prompt-area 0.1.0

package/dist/tailwind.css

@@ -0,0 +1,181 @@
+/**
+ * Prompt Area — Tailwind v4 preset.
+ *
+ * For consumers who run Tailwind themselves and want token-level theming.
+ * If you are not using Tailwind, import 'prompt-area/styles.css' instead.
+ *
+ *   @import 'prompt-area/tailwind.css';
+ *
+ * The component styles use a few tw-animate-css utilities; if you want the
+ * entrance/spinner animations, also: @import 'tw-animate-css';
+ */
+@custom-variant dark (&:is(.dark *));
+
+/* Generate the utilities the components use from the built output. */
+@source './**/*.js';
+
+/**
+ * Tailwind theme mappings for Prompt Area.
+ *
+ * Maps the design-token CSS variables (defined in tokens.css) to Tailwind
+ * v4 theme variables so utilities like `bg-secondary` / `text-foreground` /
+ * `rounded-lg` resolve correctly. Shipped both inside the prebuilt
+ * `styles.css` and as part of the optional `tailwind.css` preset.
+ *
+ * Names intentionally match the shadcn/ui convention so the component
+ * automatically inherits the theme of an existing shadcn project.
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/**
+ * Default design tokens for Prompt Area (neutral base, light + dark).
+ *
+ * These are sensible standalone defaults so the component looks right with
+ * zero configuration. To theme it, override any of these variables in your
+ * own CSS (e.g. on `:root` / `.dark`, or scoped to a wrapper element). In a
+ * shadcn project these names already exist, so the component inherits your
+ * theme automatically.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 14%);
+  --input: oklch(1 0 0 / 20%);
+  --ring: oklch(0.556 0 0);
+}
+
+/**
+ * Prompt Area component styles.
+ *
+ * These are the hand-authored styles the components depend on (chips, the
+ * tap ripple, markdown markers, and stable selectors for the bars). They
+ * live in the `components` layer so consumer utilities win over them.
+ */
+@layer components {
+  .prompt-area-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: baseline;
+    margin: 0 1px;
+    background-color: var(--secondary);
+    color: var(--foreground);
+    transition: background-color 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .prompt-area-chip:hover {
+    background-color: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 20%);
+    box-shadow: 0 1px 4px color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+
+  .prompt-area-chip:active {
+    transform: scale(0.93);
+    background-color: color-mix(in srgb, var(--secondary) 70%, var(--foreground) 30%);
+    box-shadow: 0 0 0 transparent;
+    transition: background-color 0.05s ease, transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.05s ease;
+  }
+
+  @keyframes prompt-area-chip-ripple {
+    0% {
+      transform: scale(0);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(2.5);
+      opacity: 0;
+    }
+  }
+
+  .prompt-area-chip-ripple {
+    position: absolute;
+    border-radius: 50%;
+    width: 100%;
+    aspect-ratio: 1;
+    background: color-mix(in srgb, var(--foreground) 15%, transparent);
+    pointer-events: none;
+    animation: prompt-area-chip-ripple 0.45s ease-out forwards;
+  }
+  .prompt-area-md-marker {
+    font-size: 0;
+    display: inline;
+  }
+  .prompt-area-chip--inline {
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    font-weight: 700;
+  }
+  .action-bar {
+    /* Base styles for action-bar; Tailwind utilities handle the layout.
+       This class exists as a stable selector for consumer overrides. */
+  }
+  .status-bar {
+    /* Base styles for status-bar; Tailwind utilities handle the layout.
+       This class exists as a stable selector for consumer overrides. */
+  }
+}

package/dist/types-C4BgDEpe.d.ts

@@ -0,0 +1,271 @@
+/**
+ * PromptArea component types
+ *
+ * A lightweight contentEditable-based text input that supports:
+ * - Trigger characters (/, @, #) that activate handlers
+ * - Immutable chips for resolved mentions/commands
+ * - Configurable trigger behavior (dropdown vs callback)
+ * - Simple inline markdown rendering
+ */
+/**
+ * A segment of content within the editable text.
+ * The document model is an ordered array of these segments.
+ */
+type TextSegment = {
+    type: 'text';
+    text: string;
+};
+type ChipSegment = {
+    type: 'chip';
+    /** The trigger character that created this chip (e.g., '@', '#') */
+    trigger: string;
+    /** The resolved value/ID (e.g., user ID, file ID) */
+    value: string;
+    /** The display text shown in the chip */
+    displayText: string;
+    /** Optional data payload attached to the chip */
+    data?: unknown;
+    /**
+     * True when this chip was auto-created by pressing space (resolveOnSpace).
+     * Backspace on an auto-resolved chip reverts it to plain text instead of deleting.
+     */
+    autoResolved?: boolean;
+};
+type Segment = TextSegment | ChipSegment;
+/**
+ * Determines where a trigger character is valid.
+ * - 'start': Only valid at the very start of input or after a newline (e.g., slash commands)
+ * - 'any': Valid after any whitespace boundary (e.g., @mentions)
+ */
+type TriggerPosition = 'start' | 'any';
+/**
+ * Defines how a trigger behaves when activated.
+ * - 'dropdown': Shows a popover with suggestions from `onSearch`
+ * - 'callback': Fires `onActivate` immediately without a dropdown
+ */
+type TriggerMode = 'dropdown' | 'callback';
+/**
+ * Visual style for rendered chips.
+ * - 'pill': Button-like pill with background color, padding, border-radius (default)
+ * - 'inline': Bold inline text that flows naturally with surrounding content
+ */
+type ChipStyle = 'pill' | 'inline';
+/**
+ * A suggestion item shown in the trigger dropdown.
+ */
+type TriggerSuggestion = {
+    /** Unique value/ID for this suggestion */
+    value: string;
+    /** Display label shown in the dropdown */
+    label: string;
+    /** Optional description shown below the label */
+    description?: string;
+    /** Optional icon element rendered before the label */
+    icon?: React.ReactNode;
+    /** Optional arbitrary data passed through on selection */
+    data?: unknown;
+};
+/**
+ * Configuration for a trigger character.
+ */
+type TriggerConfig = {
+    /** The trigger character (e.g., '/', '@', '#') */
+    char: string;
+    /** Where this trigger is valid */
+    position: TriggerPosition;
+    /** How this trigger behaves */
+    mode: TriggerMode;
+    /**
+     * For 'dropdown' mode: called with the current query to fetch suggestions.
+     * Should return a list of suggestions to display.
+     *
+     * Receives an options object with an `AbortSignal` that is aborted when a
+     * newer search supersedes this one. Pass it to `fetch()` or other async
+     * APIs to cancel in-flight work automatically.
+     */
+    onSearch?: (query: string, options: {
+        signal: AbortSignal;
+    }) => TriggerSuggestion[] | Promise<TriggerSuggestion[]>;
+    /**
+     * For 'dropdown' mode: called when a suggestion is selected.
+     * Return the display text for the chip, or void to use `suggestion.label`.
+     */
+    onSelect?: (suggestion: TriggerSuggestion) => string | void;
+    /**
+     * For 'callback' mode: called when the trigger is activated.
+     * Receives the full input text and cursor position.
+     */
+    onActivate?: (context: TriggerActivateContext) => void;
+    /**
+     * When true, pressing space while this trigger is active (with a non-empty query)
+     * auto-resolves the typed text into a chip without selecting from the dropdown.
+     * The auto-resolved chip can be reverted to plain text with backspace.
+     * Useful for free-form tags (e.g., #hashtag).
+     */
+    resolveOnSpace?: boolean;
+    /**
+     * Visual style for chips created by this trigger.
+     * - 'pill' (default): Button-like pill with background, padding, border-radius
+     * - 'inline': Bold inline text without pill styling
+     */
+    chipStyle?: ChipStyle;
+    /** CSS class name(s) applied to chips created by this trigger */
+    chipClassName?: string;
+    /** Label used for accessibility (e.g., "mention", "command") */
+    accessibilityLabel?: string;
+    /**
+     * Debounce delay in milliseconds before calling `onSearch`.
+     * Defaults to 0 (immediate). The initial empty-query search always fires
+     * immediately regardless of this setting so the dropdown appears instantly.
+     */
+    searchDebounceMs?: number;
+    /**
+     * Called when `onSearch` rejects or throws (non-abort errors only).
+     * Use this to log errors or show toast notifications.
+     */
+    onSearchError?: (error: unknown) => void;
+    /**
+     * Message shown in the dropdown when `onSearch` returns an empty array.
+     * If omitted, the popover hides when there are no results (current behavior).
+     */
+    emptyMessage?: string;
+};
+/**
+ * Context passed to callback-mode trigger handlers.
+ */
+type TriggerActivateContext = {
+    /** The full plain text content at the time of activation */
+    text: string;
+    /** The cursor offset position */
+    cursorPosition: number;
+    /** Function to insert a chip at the current cursor position */
+    insertChip: (chip: Omit<ChipSegment, 'type'>) => void;
+};
+/**
+ * Represents an active trigger being typed by the user.
+ */
+type ActiveTrigger = {
+    /** The trigger config that was activated */
+    config: TriggerConfig;
+    /** Position (character offset) where the trigger character was typed */
+    startOffset: number;
+    /** The text typed after the trigger character so far */
+    query: string;
+};
+/**
+ * An image attachment displayed in the prompt area.
+ * State is managed externally by the parent component.
+ */
+type PromptAreaImage = {
+    /** Unique identifier for this image */
+    id: string;
+    /** URL to display (CDN URL or temporary blob URL for preview) */
+    url: string;
+    /** Optional alt text for accessibility */
+    alt?: string;
+    /** When true, shows a loading indicator over the thumbnail */
+    loading?: boolean;
+};
+/**
+ * A file attachment displayed in the prompt area.
+ * State is managed externally by the parent component.
+ */
+type PromptAreaFile = {
+    /** Unique identifier for this file */
+    id: string;
+    /** Display filename (e.g., "report.pdf") */
+    name: string;
+    /** File size in bytes */
+    size?: number;
+    /** MIME type (used for icon selection, e.g., "application/pdf") */
+    type?: string;
+    /** When true, shows a loading indicator over the file card */
+    loading?: boolean;
+};
+/**
+ * Props for the PromptArea component.
+ */
+type PromptAreaProps = {
+    /** The document segments (controlled) */
+    value: Segment[];
+    /** Called when the content changes */
+    onChange: (segments: Segment[]) => void;
+    /** Trigger configurations */
+    triggers?: TriggerConfig[];
+    /** Placeholder text when empty. Pass an array of strings to animate between them. */
+    placeholder?: string | string[];
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to render simple inline markdown (bold, italic, URLs, lists) */
+    markdown?: boolean;
+    /** Called when Enter is pressed (without Shift) */
+    onSubmit?: (segments: Segment[]) => void;
+    /** Called when Escape is pressed */
+    onEscape?: () => void;
+    /** Called when a chip element is clicked. Receives the chip's segment data. */
+    onChipClick?: (chip: ChipSegment) => void;
+    /** Called when a new chip is added (dropdown selection, auto-resolve, paste, or imperative insert) */
+    onChipAdd?: (chip: ChipSegment) => void;
+    /** Called when a chip is deleted (backspace or forward delete) */
+    onChipDelete?: (chip: ChipSegment) => void;
+    /** Called when a URL link is clicked. Receives the URL string. */
+    onLinkClick?: (url: string) => void;
+    /** Called after content is pasted. Receives the resulting segments and the paste source. */
+    onPaste?: (data: {
+        segments: Segment[];
+        source: 'internal' | 'external';
+    }) => void;
+    /** Called after an undo operation. Receives the restored segments. */
+    onUndo?: (segments: Segment[]) => void;
+    /** Called after a redo operation. Receives the restored segments. */
+    onRedo?: (segments: Segment[]) => void;
+    /** Minimum height in pixels */
+    minHeight?: number;
+    /** Maximum height in pixels */
+    maxHeight?: number;
+    /** Auto-focus on mount */
+    autoFocus?: boolean;
+    /** When true, the area auto-grows to fit content on focus and shrinks on blur */
+    autoGrow?: boolean;
+    /** Accessible label for the input */
+    'aria-label'?: string;
+    /** data-test-id for e2e testing */
+    'data-test-id'?: string;
+    /** Array of image attachments to display */
+    images?: PromptAreaImage[];
+    /** Where to render the image strip relative to the text area. Defaults to 'above'. */
+    imagePosition?: 'above' | 'below';
+    /** Called when the user pastes an image from clipboard. Receives the File object. */
+    onImagePaste?: (file: File) => void;
+    /** Called when the user clicks the remove button on an image */
+    onImageRemove?: (image: PromptAreaImage) => void;
+    /** Called when the user clicks an image thumbnail */
+    onImageClick?: (image: PromptAreaImage) => void;
+    /** Array of file attachments to display */
+    files?: PromptAreaFile[];
+    /** Where to render the file strip relative to the text area. Defaults to 'above'. */
+    filePosition?: 'above' | 'below';
+    /** Called when the user clicks the remove button on a file */
+    onFileRemove?: (file: PromptAreaFile) => void;
+    /** Called when the user clicks a file attachment */
+    onFileClick?: (file: PromptAreaFile) => void;
+};
+/**
+ * Ref handle exposed by PromptArea via useImperativeHandle.
+ */
+type PromptAreaHandle = {
+    /** Focus the editable area */
+    focus: () => void;
+    /** Blur the editable area */
+    blur: () => void;
+    /** Insert a chip at the current cursor position */
+    insertChip: (chip: Omit<ChipSegment, 'type'>) => void;
+    /** Get the current plain text (without chip markup) */
+    getPlainText: () => string;
+    /** Clear all content */
+    clear: () => void;
+};
+
+export type { ActiveTrigger as A, ChipSegment as C, PromptAreaFile as P, Segment as S, TextSegment as T, ChipStyle as a, PromptAreaHandle as b, PromptAreaImage as c, PromptAreaProps as d, TriggerActivateContext as e, TriggerConfig as f, TriggerMode as g, TriggerPosition as h, TriggerSuggestion as i };

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "prompt-area",
+  "version": "0.1.0",
+  "description": "An opinionated, dependency-light React rich-text prompt input with trigger-based chips (@mentions, /commands, #tags), inline markdown, undo/redo, file & image attachments, and a complete chat-input layout. Ships as an npm package or a shadcn registry.",
+  "keywords": [
+    "react",
+    "prompt",
+    "chat-input",
+    "textarea",
+    "contenteditable",
+    "mentions",
+    "slash-commands",
+    "rich-text",
+    "ai",
+    "shadcn"
+  ],
+  "license": "MIT",
+  "homepage": "https://prompt-area.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/just-marketing/prompt-area.git",
+    "directory": "packages/prompt-area"
+  },
+  "bugs": {
+    "url": "https://github.com/just-marketing/prompt-area/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./prompt-area": {
+      "types": "./dist/prompt-area/index.d.ts",
+      "import": "./dist/prompt-area/index.js"
+    },
+    "./action-bar": {
+      "types": "./dist/action-bar/index.d.ts",
+      "import": "./dist/action-bar/index.js"
+    },
+    "./status-bar": {
+      "types": "./dist/status-bar/index.d.ts",
+      "import": "./dist/status-bar/index.js"
+    },
+    "./compact-prompt-area": {
+      "types": "./dist/compact-prompt-area/index.d.ts",
+      "import": "./dist/compact-prompt-area/index.js"
+    },
+    "./chat-prompt-layout": {
+      "types": "./dist/chat-prompt-layout/index.d.ts",
+      "import": "./dist/chat-prompt-layout/index.js"
+    },
+    "./helpers": {
+      "types": "./dist/helpers/index.d.ts",
+      "import": "./dist/helpers/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.css": "./dist/tailwind.css",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@tailwindcss/cli": "^4.3.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "publint": "^0.3.14",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.0",
+    "tsup": "^8.5.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm run clean && pnpm run build:js && pnpm run build:css",
+    "build:js": "tsup && node ./scripts/preserve-directives.mjs",
+    "build:css": "tailwindcss --input ./src/styles.css --output ./dist/styles.css --minify && node ./scripts/build-preset.mjs",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint:exports": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css tailwind.css"
+  }
+}