### Install Mention Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/mention.mdx Install the Mention component using npm or yarn. ```bash npx shadcn@latest add @joyco/mention ``` -------------------------------- ### Install Action Hint Source: https://github.com/joyco-studio/hub/blob/main/content/components/action-hint.mdx Install the Action Hint component using npm or yarn. ```bash npx shadcn@latest add @joyco/action-hint ``` -------------------------------- ### Install Mobile Menu Source: https://github.com/joyco-studio/hub/blob/main/content/components/mobile-menu.mdx Install the Mobile Menu component using the shadcn-ui CLI. ```bash npx shadcn@latest add @joyco/mobile-menu ``` -------------------------------- ### Install Magnetic Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/magnetic.mdx Install the Magnetic component using the shadcn-ui CLI. ```bash npx shadcn@latest add @joyco/magnetic ``` -------------------------------- ### Install Full JOYCO UI Kit Source: https://github.com/joyco-studio/hub/blob/main/llm-overrides/toolbox--ui.md Install the complete UI kit using the shadcn-ui CLI. ```bash pnpm dlx shadcn@latest add @joyco/ui ``` -------------------------------- ### Install File Dropzone Source: https://github.com/joyco-studio/hub/blob/main/content/components/file-dropzone.mdx Install the File Dropzone component using the shadcn CLI. ```bash npx shadcn@latest add @joyco/file-dropzone ``` -------------------------------- ### Install Chat Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/chat.mdx Install the chat component using npm or npx. ```bash npx shadcn@latest add @joyco/chat ``` -------------------------------- ### Install Debug Hooks Source: https://github.com/joyco-studio/hub/blob/main/content/components/debug.mdx Install the @joyco/debug package using npm or yarn. ```bash npx shadcn@latest add @joyco/debug ``` -------------------------------- ### Install Infinite List Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/infinite-list.mdx Install the Infinite List component using npm or npx. ```bash npx shadcn@latest add @joyco/infinite-list ``` -------------------------------- ### Install Cluster Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/cluster.mdx Install the Cluster component using npm or yarn. ```bash npx shadcn@latest add @joyco/cluster ``` -------------------------------- ### Install Scramble Effect Source: https://github.com/joyco-studio/hub/blob/main/content/components/scramble.mdx Install the Scramble effect using npm or yarn. ```bash npx shadcn@latest add @joyco/scramble ``` -------------------------------- ### Install Image Sequence Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/image-sequence.mdx Install the image sequence component using npm or npx. ```bash npx shadcn@latest add @joyco/image-sequence ``` -------------------------------- ### Install Spritesheet Sequencer Source: https://github.com/joyco-studio/hub/blob/main/content/components/spritesheet-sequencer.mdx Install the Spritesheet Sequencer component using the shadcn CLI. ```bash npx shadcn@latest add @joyco/spritesheet-sequencer ``` -------------------------------- ### Install Canvas 2D Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/canvas-2d.mdx Install the @joyco/canvas-2d package using npm or npx. ```bash npx shadcn@latest add @joyco/canvas-2d ``` -------------------------------- ### Install cw CLI Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/cw.mdx Installs the cw CLI tool using a curl script. Ensure you have Git, Bash, Claude Code, and GitHub CLI installed. ```bash curl -fsSL https://raw.githubusercontent.com/joyco-studio/cw/main/install.sh | bash ``` -------------------------------- ### Install Typewriter Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/typewriter.mdx Install the Typewriter component using npm or yarn. ```bash npx shadcn@latest add @joyco/typewriter ``` -------------------------------- ### Install File Button Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/file-button.mdx Install the File Button component using the shadcn-ui CLI. ```bash npx shadcn@latest add @joyco/file-button ``` -------------------------------- ### Install Typed Emitter Source: https://github.com/joyco-studio/hub/blob/main/content/components/typed-emitter.mdx Install the Typed Emitter package using npm or npx. ```bash npx shadcn@latest add @joyco/typed-emitter ``` -------------------------------- ### Install Individual JOYCO Component Source: https://github.com/joyco-studio/hub/blob/main/llm-overrides/toolbox--ui.md Install specific components from the JOYCO UI Kit using the shadcn-ui CLI. ```bash pnpm dlx shadcn@latest add @joyco/button ``` -------------------------------- ### Install tmux using Homebrew Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/tmux.mdx Installs tmux on macOS using the Homebrew package manager. Ensure Homebrew is installed before running this command. ```bash brew install tmux ``` -------------------------------- ### Install HLS Video Player Source: https://github.com/joyco-studio/hub/blob/main/content/components/hls-video-player.mdx Install the HLS Video Player component using the shadcn-ui CLI. ```bash npx shadcn@latest add @joyco/hls-video-player ``` -------------------------------- ### Start a New Claude Session Source: https://github.com/joyco-studio/hub/blob/main/content/logs/06-parallel-claudes-with-cw.mdx Initiates a new isolated Claude Code session. It creates a dedicated git worktree and branch for the session, installs dependencies, and opens Claude Code with the specified prompt. ```bash cw new auth "implement OAuth2 with GitHub provider" ``` -------------------------------- ### Install Media Player Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/media-player.mdx Use this command to add the Media Player component to your project using shadcn-ui. ```bash npx shadcn@latest add @joyco/media-player ``` -------------------------------- ### Install Modern CLI Tools with Homebrew Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/aliases.mdx A single command to install a suite of modern CLI replacements using Homebrew. ```bash brew install eza bat ripgrep fd dust btop git-delta ``` -------------------------------- ### Install Scroll Area Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/scroll-area.mdx Install the Scroll Area component using the shadcn CLI. ```bash npx shadcn@latest add @joyco/scroll-area ``` -------------------------------- ### Install Debug Canvas Source: https://github.com/joyco-studio/hub/blob/main/content/components/debug-canvas.mdx Install the Debug Canvas component and its dependency @joyco/debug using npm or yarn. ```bash npx shadcn@latest add @joyco/debug-canvas ``` -------------------------------- ### Install Scramble Button Source: https://github.com/joyco-studio/hub/blob/main/content/components/scramble-button.mdx Install the Scramble Button component and its dependency using the shadcn CLI. ```bash npx shadcn@latest add @joyco/scramble-button ``` -------------------------------- ### Basic cw CLI Usage Examples Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/cw.mdx Demonstrates common cw commands for creating, listing, opening, merging, and removing worktrees. Use these to manage parallel development sessions. ```bash cw new auth "implement OAuth2 login" ``` ```bash cw new api --open "build REST API" ``` ```bash cw ls ``` ```bash cw open auth "continue auth work" ``` ```bash cw merge auth ``` ```bash cw merge api --local ``` ```bash cw rm api ``` ```bash cw clean ``` -------------------------------- ### Guideline Frontmatter Example Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/guideline-references.md Example of the `reference` frontmatter field within a guideline file. This URL should be directly used when citing the guideline. ```markdown --- reference: https://registry.joyco.studio/toolbox/pr-guidelines#naming-conventions --- ``` -------------------------------- ### Install Snake Game Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/snake-game.mdx Install the Snake Game component using the shadcn-ui CLI. This command fetches the necessary configuration and files for the component. ```bash npx shadcn@latest add https://r.joyco.studio/snake-game.json ``` -------------------------------- ### Basic Coin Animation Example Source: https://github.com/joyco-studio/hub/blob/main/content/components/spritesheet-sequencer.mdx A simple example demonstrating the basic usage of SpritesheetSequencer for animating a coin sprite. ```tsx ``` -------------------------------- ### Install Space Invaders Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/space-invaders.mdx Install the Space Invaders component using the shadcn-ui CLI. This command fetches the necessary configuration and assets. ```bash npx shadcn@latest add https://r.joyco.studio/space-invaders.json ``` -------------------------------- ### Install Marquee Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/marquee.mdx Install the Marquee component using the shadcn-ui CLI. This command adds the necessary package to your project. ```bash npx shadcn@latest add @joyco/marquee ``` -------------------------------- ### Install Brick Breaker Component Source: https://github.com/joyco-studio/hub/blob/main/content/components/brick-breaker.mdx Install the Brick Breaker component using the shadcn CLI. This command fetches the necessary configuration and files. ```bash npx shadcn@latest add https://r.joyco.studio/brick-breaker.json ``` -------------------------------- ### CSS for Implicit Layer Promotion Example Source: https://github.com/joyco-studio/hub/blob/main/content/logs/12-the-render-pipeline.mdx Shows a CSS example where an explicitly promoted element (`.a`) might cause other overlapping elements (`.b, .c, .d`) to be implicitly promoted to their own layers if not managed correctly with `z-index`. ```css /* Element A: explicitly promoted */ .a { will-change: transform; z-index: 1; } /* Elements B, C, D overlap A visually and are painted above it → browser might promote all of them implicitly */ .b, .c, .d { position: absolute; /* overlapping .a */ } ``` -------------------------------- ### CSS for Backdrop-Filter Animations Source: https://github.com/joyco-studio/hub/blob/main/content/logs/12-the-render-pipeline.mdx Illustrates CSS for `backdrop-filter` animations. The 'tooltip' example shows a fine-grained use case where a small element with a moderate blur is handled efficiently. The 'fullscreen-overlay' example highlights an expensive scenario due to the large area and significant blur, leading to performance issues. ```css /* Fine: small element, compositor handles it easily */ .tooltip { backdrop-filter: blur(12px); transition: transform 0.2s ease; } /* Expensive: large area means the GPU re-samples a huge region every frame */ .fullscreen-overlay { backdrop-filter: blur(20px); width: 100vw; height: 100vh; animation: slide-up 0.5s ease; } ``` -------------------------------- ### Install parallel-claudes skill Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/cw.mdx Installs the parallel-claudes skill using pnpx. This skill enables Claude Code to automatically orchestrate multiple parallel sessions using cw. ```bash pnpx skills add joyco-studio/skills ``` -------------------------------- ### Install tmux Plugin Manager (TPM) Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/tmux.mdx Clone the TPM repository to your tmux plugins directory. This is the first step to managing tmux plugins. ```bash git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm ``` -------------------------------- ### Clone the scripts repository Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/scripts.mdx Clone the repository to your local machine to access and install the Raycast scripts. ```bash git clone https://github.com/joyco-studio/scripts.git ``` -------------------------------- ### CSS `will-change` Usage Examples Source: https://github.com/joyco-studio/hub/blob/main/content/logs/12-the-render-pipeline.mdx Provides examples of correct and incorrect usage of the `will-change` CSS property. Use it sparingly on elements that are actually animating to avoid excessive GPU memory consumption. ```css /* GOOD: promote only elements that actually animate */ .animating-card { will-change: transform; } /* BAD: promoting everything "just in case" */ * { will-change: transform, opacity; } /* GPU memory bomb */ ``` -------------------------------- ### Button with Full State Progression Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/hover-interactive-states.md Example of a button demonstrating rest, hover, active, and focus-visible states with increasing contrast. ```tsx // Button with full state progression ``` -------------------------------- ### Display pnpx CLI help Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/scripts.mdx Run this command to see all available options and commands for the pnpx CLI. ```bash pnpx @joycostudio/scripts --help ``` -------------------------------- ### Slow Tap Response without touch-action Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/touch-interaction.md This example demonstrates the negative impact of not using `touch-action: manipulation`, resulting in a 300ms delay on tap events. ```tsx // No touch-action - 300ms delay on tap ``` -------------------------------- ### Input Component Usage Source: https://github.com/joyco-studio/hub/blob/main/llm-overrides/toolbox--ui.md Examples of the Input component with placeholders, disabled state, and invalid state. Ensure correct type attributes are used. ```tsx import { Input } from '@/components/ui/input' ``` -------------------------------- ### Create New Invite Workflow Source: https://github.com/joyco-studio/hub/blob/main/content/logs/06-parallel-claudes-with-cw.mdx Initiates a new workflow for the 'invites' task without automatically opening it in the editor. This is useful for starting a task that you'll interact with later. ```bash cw new invites --no-open ``` -------------------------------- ### Modern CLI Replacements (Commented Out) Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/aliases.mdx Commented-out aliases for modern CLI tools that replace standard commands like `ls`, `cat`, and `grep`. Uncomment after installing the respective tools. ```bash ## Modern CLI Replacements (uncomment if you have the tools installed, see table below) # alias ls="eza --icons" # alias ll="eza -la --icons --git" # alias tree="eza --tree" # alias cat="bat" # alias grep="rg" # alias find="fd" # alias du="dust" # alias top="btop" # alias diff="delta" ``` -------------------------------- ### Change Directory to Invite Workflow Source: https://github.com/joyco-studio/hub/blob/main/content/logs/06-parallel-claudes-with-cw.mdx Navigates the command-line interface into the 'invites' workflow directory. This is typically done after creating a new workflow to start working on it. ```bash cw cd invites ``` -------------------------------- ### Prop Drilling Example in React Source: https://github.com/joyco-studio/hub/blob/main/content/logs/04-context-is-all-you-need.mdx Illustrates the prop drilling problem where props are passed through multiple intermediate components. This approach becomes cumbersome as the component tree deepens. ```tsx function ProfilePage({ profile, currentUserId }) { const isOwner = profile.id === currentUserId const isAdmin = profile.role === "admin" return ( ) } ``` -------------------------------- ### useDebugBindings Source: https://github.com/joyco-studio/hub/blob/main/content/components/debug.mdx Creates a tweakpane folder with bindings for each key in the `target` object. It returns a ref, the folder API, and a Zustand store. ```APIDOC ## useDebugBindings ### Description Creates a tweakpane folder with bindings for each key in `target`. Returns a **ref**, the **folder API**, and a **zustand store**. ### Parameters #### `folderTitle` - **Type**: `string` - **Description**: Name of the tweakpane folder. #### `target` - **Type**: `Record` - **Description**: Object with initial values to bind. #### `options` - **Type**: `DebugOptions` - **Description**: Optional per-key tweakpane binding parameters. ### Returns - **`ref`** (`RefObject`): Mutable ref kept in sync with the UI. Not reactive; reads from `ref.current` won't trigger re-renders. Use this for imperative reads (e.g., in `useFrame`, animation loops, or event handlers). - **`folder`** (`FolderApi | null`): Tweakpane folder handle for manual control (e.g., `folder.expanded = true`). - **`store`** (`StoreApi`): Zustand store. Pass to `useDebugState` for reactive subscriptions. ``` -------------------------------- ### Column Layout with Cluster Source: https://github.com/joyco-studio/hub/blob/main/content/components/cluster.mdx Example of a vertical layout using Cluster with 'direction="col"' and 'align="stretch"'. It also demonstrates setting a specific background color. ```tsx
Header

Description

 ``` -------------------------------- ### Basic Usage of Action Hint Emitter and Hook Source: https://github.com/joyco-studio/hub/blob/main/content/components/action-hint.mdx Demonstrates how to set up the ActionHintEmitter and use the useActionHint hook to emit feedback. ```tsx import { ActionHintEmitter, useActionHint } from '@/components/action-hint' function MyComponent() { return ( ) } function ActionButton() { const { emit } = useActionHint() return ( ) } ``` -------------------------------- ### Sequence Diagram: Rendering with Promise Forwarding and PPR Source: https://github.com/joyco-studio/hub/blob/main/content/logs/07-nextjs-promises-ppr.mdx Demonstrates the rendering flow with promise forwarding and PPR, showing an instant static shell and progressive data streaming. ```mermaid sequenceDiagram participant S as Server participant C as Client S->>S: Start getCart() S->>S: Start getFlags() S->>C: Static shell + fallbacks (instant) C->>C: Display shell + hydrate static parts Note over C: Users see content immediately S-->>C: Stream flags data C->>C: CheckoutButton resolves S-->>C: Stream cart data C->>C: CartCount + CartTotal pop in Note over S,C: Fast TTFB, progressive render ``` -------------------------------- ### Add JOYCO Registry to Project Source: https://github.com/joyco-studio/hub/blob/main/content/index.mdx Paste this configuration into your `components.json` file to enable the integration of JOYCO components. ```json "registries": { "@joyco": "https://registry.joyco.studio/r/{name}.json" } ``` -------------------------------- ### Good File Naming Convention (Kebab-Case) Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/kebab-case-file-naming.md Illustrates the recommended kebab-case naming convention for components, hooks, and library files. This format ensures consistency and avoids cross-platform issues. ```directory structure components/ button.tsx card-link.tsx file-dropzone.tsx mobile-menu.tsx hooks/ use-config.ts use-file-upload.tsx lib/ compose-refs.ts external-registries.ts ``` -------------------------------- ### Navigation and File Listing Aliases Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/aliases.mdx Shortcuts for common directory navigation and file listing commands. ```bash ## Navigation alias ..='cd ..' alias ...='cd ../..' alias ~='cd ~' alias c='clear' ## Lists alias ll='ls -lah' alias la='ls -A' alias l='ls -lh' ``` -------------------------------- ### Avoid 'transition: all' Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/animation-performance.md Using 'transition: all' is wasteful and can lead to unpredictable animations. Explicitly list properties instead. ```tsx // transition-all is wasteful and unpredictable ``` -------------------------------- ### Component with Multiple ClassName Props (Bad Practice) Source: https://github.com/joyco-studio/hub/blob/main/public/guidelines/data-slot-approach.md An example of a React component that uses multiple `className` props for inner elements, illustrating a cluttered API. This is presented as the 'Bad' example. ```jsx export function CardLink({ href, title, description, className, titleClassName, descriptionClassName, }) { return (
{title}

{description}

 ) } ``` -------------------------------- ### PPR Architecture Overview Source: https://github.com/joyco-studio/hub/blob/main/content/logs/07-nextjs-promises-ppr.mdx Illustrates the structure of a page using Partial Prerendering, showing the static shell and dynamic components. ```mermaid block-beta columns 1 block:shell["Static Shell: built at build time, served from CDN"] columns 2 nav["<nav>
Store
</nav>"]:2 skeleton1["CartTotal skeleton"]:1 skeleton2["CartCount skeleton"]:1 main["<main>
Featured Products"]:2 fallback["Checkout button fallback"]:2 end style nav fill:#bfdbfe,stroke:#2563eb,color:#000 style main fill:#bfdbfe,stroke:#2563eb,color:#000 style skeleton1 fill:#fef9c3,stroke:#ca8a04,color:#000 style skeleton2 fill:#fef9c3,stroke:#ca8a04,color:#000 style fallback fill:#fef9c3,stroke:#ca8a04,color:#000 ``` -------------------------------- ### Forced Reflow Example: Synchronous Read After Write Source: https://github.com/joyco-studio/hub/blob/main/content/logs/11-wtf-is-layout-thrashing.mdx This example demonstrates a forced reflow. A style write to an element's width invalidates layout, and a subsequent read of its bounding rectangle forces the browser to synchronously recompute the layout. ```tsx const element = document.getElementById('element') element.style.width = '230px' // <--- Style write, **invalidates layout** const elmBounds = element.getBoundingClientRect() // <--- Layout read, **forces a synchronous reflow** ``` -------------------------------- ### Flowchart: Full Rendering Flow with Promise Forwarding and PPR Source: https://github.com/joyco-studio/hub/blob/main/content/logs/07-nextjs-promises-ppr.mdx Provides a comprehensive overview of the request lifecycle, from build time to request time, detailing how promise forwarding and PPR optimize rendering. ```mermaid flowchart TD subgraph build ["BUILD TIME"] B1["Next.js prerenders the route"] B2["Static Shell
html, body, nav, main, footer
Suspense fallbacks
All non-dynamic content"] B3[("CDN / Edge Cache")] B1 --> B2 --> B3 end subgraph request ["REQUEST TIME"] R1["CDN serves static shell"] --> R2["Browser paints immediately"] R3["Server executes layout"] R3 --> R4["getCart(): fetch in flight"] R3 --> R5["getFlags(): fetch in flight"] R4 --> R6["Promises forwarded via
RSC payload"] R5 --> R6 R6 --> R7["flags ready
stream HTML"] R6 --> R8["cart ready
stream HTML"] end B3 --> R1 B3 --> R3 style build fill:#eff6ff,stroke:#2563eb,color:#000 style request fill:#f0fdf4,stroke:#16a34a,color:#000 style B3 fill:#bfdbfe,stroke:#2563eb,color:#000 style R2 fill:#bbf7d0,stroke:#16a34a,color:#000 style R7 fill:#e9d5ff,stroke:#7c3aed,color:#000 style R8 fill:#e9d5ff,stroke:#7c3aed,color:#000 ``` -------------------------------- ### Card with Nested Checkbox (Problem Example) Source: https://github.com/joyco-studio/hub/blob/main/content/logs/05-group-has-magic.mdx This example demonstrates a common scenario where a card's styling needs to change based on the state of a checkbox nested deep within its structure. Traditional CSS struggles with this due to selector limitations. ```tsx

Settings

``` -------------------------------- ### CSS Translate Property Example Source: https://github.com/joyco-studio/hub/blob/main/content/logs/13-working-with-reduced-motion.mdx This CSS demonstrates the translate property as set by Tailwind. ```css .element { translate: -50% -50%; /* CSS translate property */ } ``` -------------------------------- ### Slower CSS Selector Example Source: https://github.com/joyco-studio/hub/blob/main/content/logs/12-the-render-pipeline.mdx Selectors requiring the browser to traverse up the DOM tree are slower. ```css .sidebar > .card-list > .card > .card-title { color: red; } ``` -------------------------------- ### Fast CSS Selector Example Source: https://github.com/joyco-studio/hub/blob/main/content/logs/12-the-render-pipeline.mdx Direct class matches are generally fast for the browser to resolve. ```css .card-title { color: red; } ``` -------------------------------- ### Tmux Configuration File Source: https://github.com/joyco-studio/hub/blob/main/content/toolbox/tmux.mdx This is the main Tmux configuration file. It sets up custom key bindings, status bar, and integrates with Tmux plugins. ```bash # ── Prefix ───────────────────────────────────────────── unbind C-b set -g prefix C-a bind C-a send-prefix # ── General ──────────────────────────────────────────── set -g default-terminal "tmux-256color" set -ga terminal-overrides ",xterm-256color:Tc,alacritty:Tc,xterm-ghostty:Tc" set -g mouse on set -g base-index 1 setw -g pane-base-index 1 set -g renumber-windows on set -g history-limit 50000 set -g escape-time 0 set -g focus-events on setw -g mode-keys vi # ── Bindings ─────────────────────────────────────────── bind | split-window -h -c "#{pane_current_path}" bind - split-window -v -c "#{pane_current_path}" unbind '"' unbind % bind r source-file ~/.tmux.conf \; display-message " reloaded" bind h select-pane -L bind j select-pane -D bind k select-pane -U bind l select-pane -R bind Tab last-window bind S display-popup -E -w 60% -h 60% "tmux choose-tree -Zs" # vi-mode copy → system clipboard (macOS) bind -T copy-mode-vi v send-keys -X begin-selection bind -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "pbcopy" # ── Status (JOYCO accent #ff8c42) ────────────────────── set -g status-position bottom set -g status-justify centre set -g status-style "bg=default fg=#b0b0b0" set -g status-interval 5 set -g status-left-length 40 set -g status-left "#[fg=#{?client_prefix,#ff8c42,#3a3a3a}]●#[fg=#6a6a6a] #S " set -g status-right-length 60 set -g status-right "#[fg=#6a6a6a]%H:%M #[fg=#3a3a3a]·#[fg=#ff8c42,bold] PEK " setw -g window-status-format "#[fg=#6a6a6a] #W " setw -g window-status-current-format "#[fg=#ff8c42,bold] #W " setw -g window-status-separator "#[fg=#3a3a3a]·" # ── Borders ──────────────────────────────────────────── set -g pane-border-style "fg=#2a2a2a" set -g pane-active-border-style "fg=#5a5a5a" set -g pane-border-lines single # ── Messages & modes ─────────────────────────────────── set -g message-style "bg=default fg=#ff8c42" set -g message-command-style "bg=default fg=#ff8c42" set -g mode-style "bg=#3a3a3a fg=#ffffff" # ── Plugins (TPM) ────────────────────────────────────── set -g @plugin 'tmux-plugins/tpm' set -g @plugin 'tmux-plugins/tmux-resurrect' set -g @plugin 'tmux-plugins/tmux-continuum' set -g @resurrect-capture-pane-contents 'on' # space-separated list of programs to relaunch on restore set -g @resurrect-processes 'nvim vim claude' set -g @continuum-restore 'on' set -g @continuum-save-interval '15' # keep this line at the very bottom run '~/.tmux/plugins/tpm/tpm' ``` -------------------------------- ### Textarea with Auto-Height Source: https://github.com/joyco-studio/hub/blob/main/llm-overrides/toolbox--ui.md Example of the Textarea component, which uses 'field-sizing: content' for auto-height adjustment based on content. ```tsx import { Textarea } from '@/components/ui/textarea'