### Monorepo Setup and Development Commands

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/diffs/README.md

Commands for setting up dependencies, running the demo Vite server, and starting the documentation site within the monorepo.

```bash
# From the root of the monorepo: setup dependencies
pnpm install

# Start the demo vite test server
moonx demo:dev

# To run the docs (diffs site)
moonx docs:dev-diffs
```

--------------------------------

### Install Proto

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Installs the proto toolchain manager. Restart your shell after installation for shims to be available.

```bash
curl -fsSL https://moonrepo.dev/install/proto.sh | bash
```

--------------------------------

### Install Proto

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install the Proto version manager using the official installation script. Proto manages Node.js, pnpm, and other system dependencies.

```bash
curl -fsSL https://moonrepo.dev/install/proto.sh | bash
```

--------------------------------

### Install xz using Homebrew

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install the xz utility using Homebrew, which is a prerequisite for Proto.

```bash
brew install xz
```

--------------------------------

### Install Homebrew

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install Homebrew if it is not already present on your system. This is required for installing xz.

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

--------------------------------

### Install otel-tui

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install otel-tui for local development observability. This is part of the setup for local development.

```bash
brew install otel-tui
```

--------------------------------

### Install @pierre/trees/react

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Guides/GetStartedWithReact/content.mdx

Install the React wrapper for the file tree. Use the package root for the vanilla runtime.

```bash
npm install @pierre/trees
# or
yarn add @pierre/trees
```

--------------------------------

### esbuild Worker Setup

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/WorkerPool/content.mdx

Configure esbuild to bundle worker files. This example shows how to use esbuild's loader for worker scripts.

```javascript
const esbuild = require('esbuild');

esbuild.build({
  // ...
  entryPoints: ['src/worker.js'],
  outfile: 'dist/worker.js',
  format: 'esm',
  loader: {
    '.worker.js': 'file'
  }
}).catch(() => process.exit(1));
```

--------------------------------

### Install @pierre/trees

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Guides/GetStartedWithVanilla/content.mdx

Install the necessary package for the vanilla runtime.

```bash
npm install @pierre/trees
```

--------------------------------

### Vanilla JavaScript CodeView Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/CodeView/content.mdx

An example demonstrating the initialization and usage of CodeView using vanilla JavaScript.

```javascript
const codeView = new CodeView(document.getElementById('viewer'), {
  // initial items, layout, etc.
});

// Later, update items imperatively
// codeView.addItems(newItems);
// codeView.updateItem(itemId, newItemData);
```

--------------------------------

### Run Demo/Diffshub Development Servers

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Starts the development servers for the demo or diffshub applications.

```bash
moonx demo:dev
moonx diffshub:dev
```

--------------------------------

### Install @pierre/trees

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/trees/README.md

Install the package using pnpm.

```bash
pnpm add @pierre/trees
```

--------------------------------

### React Integration Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Guides/ChooseYourIntegration/content.mdx

Example demonstrating how to integrate @pierre/trees with a React application. Use this when your UI is already built with React.

```javascript
import { Tree } from "@pierre/trees/react";

function App() {
  return <Tree initialPath="src/components/Button.tsx" />;
}

```

--------------------------------

### Verify Proto Installation

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Check if Proto has been installed correctly by verifying its version. A new terminal instance may be required after installation.

```bash
proto --version
```

--------------------------------

### Start Test Production Server

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/diffs/benchmarks/CSS_PERFORMANCE_BENCHMARK.md

Starts the test production server for DiffsHub. Similar to the base server, this command changes the directory, starts the server with specified environment variables, redirects output, and runs in the background.

```bash
cd "$TEST_WORKTREE/apps/diffshub"
nohup env AGENT=1 PORT="$TEST_PORT" moonx diffshub:start > /tmp/diffshub-test.log 2>&1 &
export TEST_SERVER_PID=$!
```

--------------------------------

### Start Base Production Server

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/diffs/benchmarks/CSS_PERFORMANCE_BENCHMARK.md

Starts the base production server for DiffsHub. Ensure you are in the DiffsHub app directory. The output is redirected to a log file and the process runs in the background.

```bash
cd "$BASE_WORKTREE/apps/diffshub"
nohup env AGENT=1 PORT="$BASE_PORT" moonx diffshub:start > /tmp/diffshub-base.log 2>&1 &
export BASE_SERVER_PID=$!
```

--------------------------------

### Project Structure Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Theming/content.mdx

Illustrates the directory organization within the Pierre Theme repository, showing where to find configuration and source files.

```tree
theme/
├── src/
│   ├── build.ts
│   ├── palette.ts
│   └── theme.ts
├── package.json
└── tsconfig.json
```

--------------------------------

### Install with npm

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Installation/content.mdx

Install Diffs using npm. This is the most common way to add the package to your project.

```bash
npm install @pierre/diffs
```

--------------------------------

### Setup Existing Worktree

Source: https://github.com/pierrecomputer/pierre/blob/main/scripts/README.md

Initializes a worktree that was previously created by a script or another process, ensuring it's ready for development.

```bash
cd ~/pierre/pierre-worktrees/generated-by-script
moonx root:wt -- setup

```

--------------------------------

### Install Global Tools with Proto

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Use Proto to install the global tools required for the monorepo, such as moon and pnpm. This command ensures consistent tool versions across the development team.

```bash
proto use
```

--------------------------------

### Vanilla JS Integration Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Guides/ChooseYourIntegration/content.mdx

Example demonstrating how to integrate @pierre/trees with a Vanilla JavaScript application. Choose this for non-React apps or when another framework manages the imperative model.

```javascript
import { Tree } from "@pierre/trees";

const tree = new Tree({
  initialPath: "src/components/Button.tsx",
});

```

--------------------------------

### React CodeView Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/CodeView/content.mdx

A basic example of how to use CodeView in a React application, managing items via React state.

```jsx
function MyCodeViewer() {
  const [items, setItems] = React.useState<CodeViewItem[]>([]);

  React.useEffect(() => {
    // Fetch or compute items and update state
    setItems(computeItems());
  }, []);

  return (
    <CodeView
      items={items}
      // ... other props
    />
  );
}
```

--------------------------------

### CodeView Item Metrics Options Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/CodeView/content.mdx

Shows how to provide item metrics for CodeView to estimate file and diff sizes for virtualization.

```typescript
const codeViewItemMetricsOptionsExample = {
  itemMetrics: {
    lineHeight: 15,
    padding: {
      top: 5,
      bottom: 5,
      left: 10,
      right: 10,
    },
  },
};
```

--------------------------------

### Publish to npm

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/theme/CONTRIBUTING.md

Run this command to publish the theme to npm. Ensure the `moonx` CLI is installed and accessible.

```bash
moonx theme:publish-npm
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Installs all project dependencies using pnpm. Dependency versions are managed via pnpm-workspace.yaml.

```bash
pnpm install
```

--------------------------------

### Styling and Theming Reference Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Reference/StylingAndTheming/content.mdx

This example demonstrates how to use themeToTreeStyles to map a VS Code or Shiki-style theme object into host styles and CSS variables for the tree component.

```typescript
import {
  themeToTreeStyles,
  TreeThemeInput,
  TreeThemeStyles,
} from "@/lib/trees/theme";

const theme: TreeThemeInput = {
  type: "dark",
  bg: "#1e1e1e",
  fg: "#d4d4d4",
  colors: {
    "editor.selectionBackground": "#264f78",
    "editor.hoverHighlightBackground": "#3a3d40",
    "editor.inactiveSelectionBackground": "#3a3d40",
    "gitDecoration.modifiedResourceForeground": "#e3a000",
    "icon.foreground": "#858585",
  },
};

const treeStyles: TreeThemeStyles = themeToTreeStyles(theme);

// Example usage in React:
// <FileTree model={...} style={treeStyles.host} />

// Example usage in Vanilla JS:
// const host = getFileTreeContainer();
// Object.assign(host.style, treeStyles.host);

console.log(treeStyles);

```

--------------------------------

### CodeView Layout Options Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/CodeView/content.mdx

Illustrates how to configure layout properties such as padding and gap for CodeView items.

```typescript
const codeViewLayoutOptionsExample = {
  layout: {
    padding: {
      top: 10,
      bottom: 10,
      left: 10,
      right: 10,
    },
    gap: 10,
  },
};
```

--------------------------------

### Install and Configure 'z' for Shell Navigation

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install 'z' using Homebrew and add its configuration to your shell profile (.zshrc) for efficient directory jumping based on command history.

```bash
brew install z

. /opt/homebrew/etc/profile.d/z.sh

Restart your terminal
cd ~/pierre/monorepo
cd ~
z mono # Takes you to the monorepo now
```

--------------------------------

### Basic React Virtualizer Setup

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Virtualization/content.mdx

Wrap your diff/file components with `Virtualizer` from `@pierre/diffs/react` to enable virtualization. This component acts as the scroll container.

```jsx
import { Virtualizer } from "@pierre/diffs/react";

function App() {
  return (
    <Virtualizer>
      {/* Your diff/file components here */}
    </Virtualizer>
  );
}
```

--------------------------------

### Clone Repo and Use Toolchain

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Clones the repository and uses proto to install the pinned versions of bun, pnpm, node, moon, and gh.

```bash
git clone git@github.com:pierrecomputer/pierre.git
cd pierre
proto use
```

--------------------------------

### Clone the Pierre Monorepo

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Clone the monorepo to your local machine. This is the starting point for all subsequent setup steps.

```bash
~/pierre/monorepo
```

--------------------------------

### Start Local Development Services

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Launch all necessary local development services, including QStash, ingest, Redis, Supabase, and local database migrations. This command sequence sets up the full local development stack.

```bash
# terminal 1
otel-tui || otel-desktop-viewer

# terminal 2
moon dev-env:local
docker compose -f packages/dev-env/compose.yaml up -d # start qstash, inggest, redis
pnpx supabase start # start supabase and related services for auth, magic link signin
moon db:migrate-local # populate local supabase
moon db:typegen # make sure the types match
# NOTE: you will need to manually git restore packages/db/schema.sql before committing
# when working in local mode -- the schema will be not match other envs. Switch to
# a non-dev mode to generate or run any migrations impacting staging or prod.
moon repli-store:dev

# terminal 3
moon git-api-auth:dev

# terminal 4
moon backend:dev

# terminal 5
moon vweb:dev # start local app
```

--------------------------------

### Create FileTree Model with Raw Paths

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Guides/GetStartedWithVanilla/content.mdx

Instantiate the FileTree model using raw paths for small or static trees. This is the simplest way to get started.

```typescript
const fileTree = new FileTree({
  paths: {
    "src/index.ts": "",
    "package.json": "",
  },
});
```

--------------------------------

### Git Merge Conflict Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/fileConflictLarge.txt

This snippet shows a typical Git merge conflict. The '<<<<<<< HEAD' marker indicates the start of the conflicting changes from the current branch, and '>>>>>>> feature/large-conflict-006' marks the end of the conflicting changes from the incoming branch. The lines between these markers represent the differing versions of the code.

```text
<<<<<<< HEAD
const conflictValue006 = createCurrentBranchValue(6);
const conflictLabel006 = 'current-006';
=======
const conflictValue006 = createIncomingBranchValue(6);
const conflictLabel006 = 'incoming-006';
>>>>>>> feature/large-conflict-006
```

--------------------------------

### Vanilla JS Virtualizer Setup

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Virtualization/content.mdx

In vanilla JavaScript, create a `Virtualizer` instance and pass it to `VirtualizedFileDiff` or `VirtualizedFile`. This requires manual wiring of the virtualizer instance.

```javascript
import { Virtualizer } from "@pierre/diffs";
import { VirtualizedFileDiff } from "@pierre/diffs/dom";

const virtualizer = new Virtualizer();

// Assuming you have a DOM element for the file diff
const fileDiffElement = document.getElementById('my-file-diff');

new VirtualizedFileDiff(fileDiffElement, {
  virtualizer,
  // ... other props
});
```

--------------------------------

### Initialize Worktree Metadata (Base)

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/diffs/benchmarks/CSS_PERFORMANCE_BENCHMARK.md

Navigates to the base worktree and sets up Pierre's worktree metadata.

```bash
cd "$BASE_WORKTREE"
export AGENT=1
moonx root:wt -- setup
```

--------------------------------

### Initialize Worktree Metadata (Test)

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/diffs/benchmarks/CSS_PERFORMANCE_BENCHMARK.md

Navigates to the test worktree and sets up Pierre's worktree metadata.

```bash
cd "$TEST_WORKTREE"
export AGENT=1
moonx root:wt -- setup
```

--------------------------------

### Install Pierre Theme via npm

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/theme/README.md

Install the Pierre Theme package for use with Shiki or other npm-based projects. This command installs the theme package.

```bash
npm install @pierre/theme
```

--------------------------------

### Instantiate and Mount FileTree

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Reference/VanillaAPI/content.mdx

Demonstrates the basic instantiation of a FileTree with options and its subsequent mounting into a container. This is the starting point for using the imperative API.

```typescript
import { FileTree } from "@pierre/trees";

const fileTree = new FileTree({
  // ... shared options
});

// Mount into an existing element
fileTree.render({ fileTreeContainer: document.getElementById("tree-container") });

// Or let the runtime create and append the container
// fileTree.render({ containerWrapper: document.body });

```

--------------------------------

### Run Docs Development Server

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Starts the documentation site development server. Supports 'diffs' or 'trees' variants and watches for dependency changes.

```bash
moonx docs:dev-diffs
moonx docs:dev-trees
```

--------------------------------

### SSR API Example

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(trees)/docs/Reference/SSRAPI/content.mdx

This example demonstrates the basic usage of the SSR API, likely involving server-side preloading and passing data for client-side hydration. It's a placeholder for a more detailed example.

```javascript
import { preloadFileTree } from "@pierre/trees/ssr";

// Server-side execution
const options = {
  paths: [
    { id: "doc", label: "Documents" },
    { id: "img", label: "Images" },
  ],
};

const ssrPayload = await preloadFileTree(options);

// Pass ssrPayload to the client...
```

--------------------------------

### Install with pnpm

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Installation/content.mdx

Install Diffs using pnpm. This is another efficient package manager for Node.js.

```bash
pnpm add @pierre/diffs
```

--------------------------------

### Install with yarn

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/docs/app/(diffs)/docs/Installation/content.mdx

Install Diffs using yarn. This is an alternative package manager for Node.js projects.

```bash
yarn add @pierre/diffs
```

--------------------------------

### Run Development Server for docs

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Start the development server for the documentation site. This command is used to run individual applications during local development.

```bash
moon docs:dev
```

--------------------------------

### Switch to Production Development Environment

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Configure the local environment to develop against the production backend services.

```bash
moon dev-env:prod
```

--------------------------------

### Switch to Staging Development Environment

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Configure the local environment to develop against the staging backend services.

```bash
moon dev-env:staging
```

--------------------------------

### Create and Use a Theme Catalog

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/theming/README.md

Demonstrates creating a theme catalog with default light and dark themes, and accessing theme names and properties. Use this to set up your application's theme registry.

```typescript
import { createThemeCatalog } from '@pierre/theming';
import { themes } from '@pierre/theming/themes';

const catalog = createThemeCatalog({
  themes,
  defaultLightThemeName: 'pierre-light',
  defaultDarkThemeName: 'pierre-dark',
});

catalog.getThemeNames(); // ['pierre-light', 'pierre-light-soft', …]
catalog.getThemeNames({ colorScheme: 'light' }); // ['pierre-light', …]
catalog.getThemeNames({ colorScheme: 'dark' }); // ['pierre-dark', …]
catalog.getThemes({ collection: 'pierre' }); // Pierre descriptors only
catalog.defaultLightThemeName; // 'pierre-light'
catalog.defaultDarkThemeName; // 'pierre-dark'

const opinionatedCatalog = createThemeCatalog({
  themes: themes.pick(['github-light', 'solarized-dark']),
  defaultLightThemeName: 'github-light',
  defaultDarkThemeName: 'solarized-dark',
});
```

--------------------------------

### Install 1Password CLI

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Install the 1Password CLI using Homebrew. This tool is used to securely access environment variables for some projects.

```bash
brew install 1password-cli
```

--------------------------------

### Generate Theme Previews

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/theme/CONTRIBUTING.md

Writes preview HTML files to the `preview/` directory for visual proofing. Use `--ignore-ci-checks` to bypass CI checks.

```bash
moonx theme:preview --ignore-ci-checks
```

--------------------------------

### Programmatically Setup Worktree

Source: https://github.com/pierrecomputer/pierre/blob/main/scripts/README.md

Call the worktree setup function directly from other TypeScript scripts. Ensure the correct path and slug are provided.

```typescript
import { setupWorktree } from './wt.ts';

await setupWorktree({ path: process.cwd(), slug: 'manual-branch' });
```

--------------------------------

### Install Pierre Theme Package

Source: https://github.com/pierrecomputer/pierre/blob/main/packages/theme/DISPLAY-P3.md

Command to install the Pierre VS Code theme package using npm. This is a prerequisite for using the theme with Shiki.

```bash
npm i @pierre/vscode-theme
```

--------------------------------

### Install Git LFS

Source: https://github.com/pierrecomputer/pierre/blob/main/CONTRIBUTING.md

Installs Git Large File Storage, required for handling large fixtures in the repository. Enables Git LFS hooks.

```bash
brew install git-lfs   # or your platform's package manager
git lfs install
```

--------------------------------

### Run Development Server for repli-store

Source: https://github.com/pierrecomputer/pierre/blob/main/apps/demo/src/mocks/example_md.txt

Start the development server for the repli-store application. This command is used to run individual applications during local development.

```bash
moon repli-store:dev
```