Components

In-depth examination of tier 2 UI components — parity checks, variant showcases, composition patterns, and state handling.

Button Groups

Button composition patterns — h-based sizing, hierarchy through variant weight, joined toolbars, and loading states.

Component Parity — Raw HTML vs InkwellButton

Hover, click, and tab through both rows. They must be pixel-identical.

Raw HTML

InkwellButton

Action Hierarchy

Primary CTA draws the eye, secondary is reachable, ghost recedes. Destructive action isolated to the right.

Save point bar

Skill execution

Loading States

Disabled + spinner. Shadow removed, opacity reduced, pointer-events none. Trailing arrows nudge on hover for navigation intent.

Disabled + spinner

Trailing arrow nudge on hover

Toolbar and Split Buttons

Joined groups: explicit corner rounding on first/last children. Focus uses inset offset so ring stays within element bounds.

Formatting toolbar

Split button

Size scale

sm (h-8)

default (h-9)

lg (h-10)

icon (size-9)

icon-sm (size-7)

Input Groups

Input composition patterns — subtle border that brightens on hover, joined groups with inset focus rings, and all input states.

Component Parity — Raw HTML vs InkwellInput

Subtle border by default (border-border/40), brightens on hover (border-foreground/15). Hover both to verify identical behavior.

Raw HTML

InkwellInput

Search with Icon Addon

⌘K

Input + Button (spaced)

Invite collaborator

Quick-add scene

Joined Input Groups

Shared border container. Children get explicit corner rounding. Focus ring uses inset offset (-1px) so it stays within element bounds and never overlaps the adjacent endcap.

Label prefix

https://

Button suffix

Copy-to-clipboard

Input States

Default: subtle border (border-border/40). Hover: border brightens (border-foreground/15). Focus: outline ring. Disabled: opacity + no shadow. Error: red border + red glow shadow.

Scene heading is required.

Field Components

Common field patterns — password visibility toggle, form field composition (label + input + helper/error), character counting, and textarea.

Password with Visibility Toggle

Eye icon toggles between masked and plain text. Icon is inside the input's padding zone — click or hover to reveal.

Password must be at least 8 characters.

Form Field Pattern

Standard composition: label above, input, helper text below. Error state replaces helper text with error message. Labels use text-xs text-muted-foreground; errors use text-destructive.

This appears in the project list and exports.

Slug can only contain lowercase letters, numbers, and hyphens.

Auto-generated. Cannot be changed.

Input with Character Count

Live character counter for length-constrained fields. Counter turns destructive when the limit is exceeded.

Standard screenplay heading format

0/60

Textarea

Multi-line input for notes, descriptions, and save point messages. Same border/hover/focus treatment as InkwellInput — consistent design language across all field types.

Visible in version history. Be descriptive.