@molecule/app-ide-react 1.0.0

package/dist/customEventCards.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Registry for app-specific custom chat-stream events.
+ *
+ * The shared chat UI (ChatPanel) only understands generic events. To surface an
+ * app-specific event — emitted by a backend as `{ type: 'custom', name, data }`
+ * (see `@molecule/app-ai-chat`) — without coupling this package to that app, the
+ * consuming app registers a factory that turns the event's `data` into a chat system
+ * card. ChatPanel consults this registry when a `custom` event arrives. This is the
+ * sanctioned extension point: app-specific events/cards (e.g. a host app's build or
+ * billing notices) live in the app, never in this shared package's union or ChatPanel.
+ *
+ * @module
+ */
+import type { IconName } from '@molecule/app-icons';
+/**
+ * A single call-to-action on a chat card: a labelled link (`href`) and/or click
+ * handler. The app supplies any route/copy — the shared package never hardcodes one.
+ */
+export interface ChatEventCardAction {
+    /** Button label (already localized by the app). */
+    label: string;
+    /** Link target. App-owned — e.g. the host's own pricing/auth route. */
+    href?: string;
+    /** Click handler (alternative to, or alongside, `href`). */
+    onClick?: () => void;
+    /**
+     * Render the action's label as inline monospace code — a command/identifier like
+     * `/report` or a skill name — so it stands out from prose while staying clickable.
+     */
+    code?: boolean;
+}
+/**
+ * A non-interactive inline monospace code span in a card body — a command or identifier
+ * the prose refers to (`/report`, a skill name) that should read as code but isn't
+ * clickable. For a *clickable* command, use {@link ChatEventCardAction} with `code: true`.
+ */
+export interface ChatEventCardCode {
+    /** The code text, rendered monospaced/tinted. */
+    code: string;
+}
+/**
+ * One inline segment of a card's composable body: literal text, an inline monospace
+ * {@link ChatEventCardCode} span, or a labelled link/action ({@link ChatEventCardAction}).
+ * See {@link ChatEventCard.content}.
+ */
+export type ChatEventCardSegment = string | ChatEventCardCode | ChatEventCardAction;
+/**
+ * A chat system card: a short message with an optional action (or actions). Mirrors
+ * the system-card shape ChatPanel renders for upgrade prompts, guest reminders, etc.
+ */
+export interface ChatEventCard {
+    /** The card's text. */
+    text: string;
+    /** An optional action button (or buttons): a link (`href`) and/or a click handler. */
+    action?: ChatEventCardAction | ChatEventCardAction[];
+    /**
+     * Composable inline body for a `tone` (tip) card: an ordered list of segments rendered
+     * in sequence — plain strings as text, {@link ChatEventCardAction}s as inline underlined
+     * links — so prose and links interleave freely (e.g. text → an inline link → a trailing
+     * period). When set, the renderer uses this INSTEAD of `text` + appended `action`s, so a
+     * link can sit mid-sentence rather than only at the end. Segments carry their own spacing
+     * (no auto-space is inserted between them). Keep `text` populated with a plain-text
+     * equivalent for accessibility / non-toned consumers. Only honored when `tone` is set.
+     */
+    content?: ChatEventCardSegment[];
+    /**
+     * When true, ChatPanel renders the card as a stand-out tip box rather than muted inline
+     * text. Prefer setting {@link ChatEventCard.tone} (which implies emphasis AND picks the
+     * accent colour + icon); `emphasized` without a `tone` falls back to the neutral `info`
+     * tone. The app opts in; the shared package never infers emphasis from a card's copy.
+     */
+    emphasized?: boolean;
+    /**
+     * The card's tip TONE — picks its accent colour + default icon so every notice card
+     * shares ONE consistent box (icon + tinted body + a uniform 1px border + actions),
+     * differing only by colour/icon per kind:
+     * - `info` — blue, info glyph (neutral notice)
+     * - `gold` — amber, lightbulb (an honest tip / onboarding note)
+     * - `upgrade` — amber, clock (a plan/limit/budget nudge)
+     * - `success` — green, check (a completed action, e.g. a saved script)
+     * - `signup` — primary, sign-in (an auth nudge)
+     *
+     * Setting `tone` implies emphasis. Cards that supply composable {@link ChatEventCard.content}
+     * render their inline links in the box; cards that supply `action`(s) render them as a
+     * consistent row of accent buttons. Omit `tone` (and `emphasized`) for a plain muted line.
+     */
+    tone?: 'info' | 'gold' | 'upgrade' | 'success' | 'signup';
+    /**
+     * Optional icon-name override (a `@molecule/app-icons` glyph) — defaults to the tone's
+     * icon. Use only a name that exists in the bonded set (`getIcon` throws otherwise);
+     * sets with extra glyphs register them via `CustomIconNames` augmentation.
+     */
+    icon?: IconName;
+}
+/**
+ * Turns a custom event's `data` payload into a chat card, or returns null to render
+ * nothing for that event.
+ */
+export type ChatEventCardFactory = (data: Record<string, unknown> | undefined) => ChatEventCard | null;
+/**
+ * Register a renderer for a custom chat-stream event. Consuming apps call this at
+ * startup so their own `{ type: 'custom', name }` events surface as chat cards —
+ * keeping app-specific events out of the core ai-chat union and this package's
+ * ChatPanel. Re-registering the same name overwrites the previous factory.
+ *
+ * @param name - The custom event `name` to handle (matches the emitted event's `name`).
+ * @param factory - Builds the card from the event's `data` (or returns null to skip).
+ */
+export declare function registerCustomEventCard(name: string, factory: ChatEventCardFactory): void;
+/**
+ * Resolve the registered card factory for a custom event name, if any.
+ *
+ * @param name - The custom event `name`.
+ * @returns The registered factory, or undefined if none is registered.
+ */
+export declare function getCustomEventCardFactory(name: string): ChatEventCardFactory | undefined;
+//# sourceMappingURL=customEventCards.d.ts.map

package/dist/customEventCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customEventCards.d.ts","sourceRoot":"","sources":["../src/customEventCards.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEnD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,iBAAiB,GAAG,mBAAmB,CAAA;AAEnF;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,sFAAsF;IACtF,MAAM,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAA;IACpD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAA;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,KACtC,aAAa,GAAG,IAAI,CAAA;AAIzB;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAEzF;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,SAAS,CAExF"}

package/dist/customEventCards.js

@@ -0,0 +1,36 @@
+/**
+ * Registry for app-specific custom chat-stream events.
+ *
+ * The shared chat UI (ChatPanel) only understands generic events. To surface an
+ * app-specific event — emitted by a backend as `{ type: 'custom', name, data }`
+ * (see `@molecule/app-ai-chat`) — without coupling this package to that app, the
+ * consuming app registers a factory that turns the event's `data` into a chat system
+ * card. ChatPanel consults this registry when a `custom` event arrives. This is the
+ * sanctioned extension point: app-specific events/cards (e.g. a host app's build or
+ * billing notices) live in the app, never in this shared package's union or ChatPanel.
+ *
+ * @module
+ */
+const registry = new Map();
+/**
+ * Register a renderer for a custom chat-stream event. Consuming apps call this at
+ * startup so their own `{ type: 'custom', name }` events surface as chat cards —
+ * keeping app-specific events out of the core ai-chat union and this package's
+ * ChatPanel. Re-registering the same name overwrites the previous factory.
+ *
+ * @param name - The custom event `name` to handle (matches the emitted event's `name`).
+ * @param factory - Builds the card from the event's `data` (or returns null to skip).
+ */
+export function registerCustomEventCard(name, factory) {
+    registry.set(name, factory);
+}
+/**
+ * Resolve the registered card factory for a custom event name, if any.
+ *
+ * @param name - The custom event `name`.
+ * @returns The registered factory, or undefined if none is registered.
+ */
+export function getCustomEventCardFactory(name) {
+    return registry.get(name);
+}
+//# sourceMappingURL=customEventCards.js.map

package/dist/customEventCards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customEventCards.js","sourceRoot":"","sources":["../src/customEventCards.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAgGH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAgC,CAAA;AAExD;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CAAC,IAAY,EAAE,OAA6B;IACjF,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC7B,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,IAAY;IACpD,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AAC3B,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IDE React hooks.
+ *
+ * @module
+ */
+export * from './useKeyboardShortcuts.js';
+export * from './useViewport.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,2BAA2B,CAAA;AACzC,cAAc,kBAAkB,CAAA"}

package/dist/hooks/index.js

@@ -0,0 +1,8 @@
+/**
+ * IDE React hooks.
+ *
+ * @module
+ */
+export * from './useKeyboardShortcuts.js';
+export * from './useViewport.js';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,2BAA2B,CAAA;AACzC,cAAc,kBAAkB,CAAA"}

package/dist/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Global keyboard shortcut hook for the IDE.
+ *
+ * Provides a centralized `document`-level keydown listener that maps
+ * platform-aware key combos (e.g. `"mod+p"`, `"mod+shift+f"`) to handlers.
+ *
+ * @module
+ */
+import type { KeyboardShortcut } from '../types.js';
+/** Detect macOS / iOS for Cmd vs Ctrl. */
+export declare const IS_MAC: boolean;
+/**
+ * Serialize a `KeyboardEvent` into a normalized combo string.
+ * Format: modifier keys in order `mod+ctrl+alt+shift+key` (lowercase).
+ * `mod` maps to Meta on Mac, Control elsewhere.
+ * @param e - The keyboard event.
+ * @param isMac - Override platform detection (for testing).
+ * @returns Serialized combo string.
+ */
+export declare function serializeEvent(e: KeyboardEvent, isMac?: boolean): string;
+/**
+ * Normalize a shortcut definition string into the same format produced by
+ * `serializeEvent`. Accepts `mod+shift+f` style strings (case-insensitive).
+ * @param keys - Raw shortcut string.
+ * @returns Normalized lowercase combo string.
+ */
+export declare function normalizeKeys(keys: string): string;
+/**
+ * Returns true when the event target is an interactive input element
+ * where shortcuts should be suppressed by default.
+ * @param e - The keyboard event.
+ * @returns Whether an input-like element is focused.
+ */
+export declare function isInputFocused(e: KeyboardEvent): boolean;
+/**
+ * Returns true when focus is inside a Monaco editor instance.
+ * @param e - The keyboard event.
+ * @returns Whether the target is inside `.monaco-editor`.
+ */
+export declare function isMonacoFocused(e: KeyboardEvent): boolean;
+/**
+ * Registers global keyboard shortcuts on the document.
+ *
+ * @param shortcuts - Array of shortcut definitions. Callers should wrap
+ *   the array in `useMemo` to avoid unnecessary re-subscriptions.
+ */
+export declare function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]): void;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/hooks/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAEnD,0CAA0C;AAC1C,eAAO,MAAM,MAAM,SACoE,CAAA;AAEvF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,UAAS,GAAG,MAAM,CAQvE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMlD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAOxD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAGzD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAmCxE"}

package/dist/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,112 @@
+/**
+ * Global keyboard shortcut hook for the IDE.
+ *
+ * Provides a centralized `document`-level keydown listener that maps
+ * platform-aware key combos (e.g. `"mod+p"`, `"mod+shift+f"`) to handlers.
+ *
+ * @module
+ */
+import { useEffect } from 'react';
+/** Detect macOS / iOS for Cmd vs Ctrl. */
+export const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent);
+/**
+ * Serialize a `KeyboardEvent` into a normalized combo string.
+ * Format: modifier keys in order `mod+ctrl+alt+shift+key` (lowercase).
+ * `mod` maps to Meta on Mac, Control elsewhere.
+ * @param e - The keyboard event.
+ * @param isMac - Override platform detection (for testing).
+ * @returns Serialized combo string.
+ */
+export function serializeEvent(e, isMac = IS_MAC) {
+    const parts = [];
+    if (isMac ? e.metaKey : e.ctrlKey)
+        parts.push('mod');
+    if (isMac ? e.ctrlKey : false)
+        parts.push('ctrl');
+    if (e.altKey)
+        parts.push('alt');
+    if (e.shiftKey)
+        parts.push('shift');
+    parts.push(e.key.toLowerCase());
+    return parts.join('+');
+}
+/**
+ * Normalize a shortcut definition string into the same format produced by
+ * `serializeEvent`. Accepts `mod+shift+f` style strings (case-insensitive).
+ * @param keys - Raw shortcut string.
+ * @returns Normalized lowercase combo string.
+ */
+export function normalizeKeys(keys) {
+    return keys
+        .toLowerCase()
+        .split('+')
+        .map((s) => s.trim())
+        .join('+');
+}
+/**
+ * Returns true when the event target is an interactive input element
+ * where shortcuts should be suppressed by default.
+ * @param e - The keyboard event.
+ * @returns Whether an input-like element is focused.
+ */
+export function isInputFocused(e) {
+    const el = e.target;
+    if (!el)
+        return false;
+    const tag = el.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    if (el.isContentEditable)
+        return true;
+    return false;
+}
+/**
+ * Returns true when focus is inside a Monaco editor instance.
+ * @param e - The keyboard event.
+ * @returns Whether the target is inside `.monaco-editor`.
+ */
+export function isMonacoFocused(e) {
+    const el = e.target;
+    return !!el?.closest?.('.monaco-editor');
+}
+/**
+ * Registers global keyboard shortcuts on the document.
+ *
+ * @param shortcuts - Array of shortcut definitions. Callers should wrap
+ *   the array in `useMemo` to avoid unnecessary re-subscriptions.
+ */
+export function useKeyboardShortcuts(shortcuts) {
+    useEffect(() => {
+        if (shortcuts.length === 0)
+            return;
+        // Pre-normalize keys for fast lookup
+        const entries = shortcuts.map((s) => ({
+            ...s,
+            normalized: normalizeKeys(s.keys),
+        }));
+        /**
+         * Keydown handler that matches events against registered shortcuts.
+         * @param e - The keyboard event to evaluate.
+         */
+        function handler(e) {
+            const combo = serializeEvent(e);
+            for (const entry of entries) {
+                if (combo !== entry.normalized)
+                    continue;
+                // Skip if focused in input and not explicitly allowed
+                if (!entry.allowInInput && isInputFocused(e))
+                    continue;
+                // Skip if focused in Monaco and not explicitly allowed
+                if (!entry.allowInEditor && isMonacoFocused(e))
+                    continue;
+                e.preventDefault();
+                e.stopPropagation();
+                entry.handler();
+                return;
+            }
+        }
+        document.addEventListener('keydown', handler, true);
+        return () => document.removeEventListener('keydown', handler, true);
+    }, [shortcuts]);
+}
+//# sourceMappingURL=useKeyboardShortcuts.js.map

package/dist/hooks/useKeyboardShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.js","sourceRoot":"","sources":["../../src/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useViewport.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Viewport + pointer media-query hooks for touch/phone-aware rendering.
+ *
+ * The IDE components style themselves with inline values (per the ClassMap
+ * rule there are no stylesheets in this package), so responsive behavior is
+ * expressed by branching on these hooks rather than `@media` rules. Consumers
+ * (e.g. molecule.dev's Workspace) keep their own breakpoint in sync with
+ * {@link NARROW_VIEWPORT_QUERY}'s 768px threshold.
+ *
+ * @module
+ */
+/**
+ * The phone-width media query — matches viewports below 768px, mirroring the
+ * host workspace's single-pane mobile breakpoint.
+ */
+export declare const NARROW_VIEWPORT_QUERY = "(max-width: 767px)";
+/**
+ * The touch-first media query — matches when the PRIMARY pointer is coarse
+ * (finger), i.e. phones/tablets, regardless of viewport width.
+ */
+export declare const COARSE_POINTER_QUERY = "(pointer: coarse)";
+/**
+ * Subscribes to a CSS media query. SSR-safe: reports `false` until mounted in
+ * a browser.
+ * @param query - A media query string, e.g. `'(max-width: 767px)'`.
+ * @returns Whether the query currently matches.
+ */
+export declare function useMediaQueryMatch(query: string): boolean;
+/**
+ * Whether the viewport is phone-width (below 768px). Use for layout-density
+ * decisions: bigger type, taller rows, `dvh`-capped popovers.
+ * @returns True on phone-width viewports.
+ */
+export declare function useNarrowViewport(): boolean;
+/**
+ * Whether the primary pointer is coarse (touch). Use for interaction
+ * decisions: ≥44px touch targets, always-visible controls that desktop
+ * reveals on hover (hover does not exist on touch).
+ * @returns True on touch-first devices.
+ */
+export declare function useCoarsePointer(): boolean;
+//# sourceMappingURL=useViewport.d.ts.map

package/dist/hooks/useViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB,uBAAuB,CAAA;AAEzD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,sBAAsB,CAAA;AAEvD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAezD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C"}

package/dist/hooks/useViewport.js

@@ -0,0 +1,61 @@
+/**
+ * Viewport + pointer media-query hooks for touch/phone-aware rendering.
+ *
+ * The IDE components style themselves with inline values (per the ClassMap
+ * rule there are no stylesheets in this package), so responsive behavior is
+ * expressed by branching on these hooks rather than `@media` rules. Consumers
+ * (e.g. molecule.dev's Workspace) keep their own breakpoint in sync with
+ * {@link NARROW_VIEWPORT_QUERY}'s 768px threshold.
+ *
+ * @module
+ */
+import { useEffect, useState } from 'react';
+/**
+ * The phone-width media query — matches viewports below 768px, mirroring the
+ * host workspace's single-pane mobile breakpoint.
+ */
+export const NARROW_VIEWPORT_QUERY = '(max-width: 767px)';
+/**
+ * The touch-first media query — matches when the PRIMARY pointer is coarse
+ * (finger), i.e. phones/tablets, regardless of viewport width.
+ */
+export const COARSE_POINTER_QUERY = '(pointer: coarse)';
+/**
+ * Subscribes to a CSS media query. SSR-safe: reports `false` until mounted in
+ * a browser.
+ * @param query - A media query string, e.g. `'(max-width: 767px)'`.
+ * @returns Whether the query currently matches.
+ */
+export function useMediaQueryMatch(query) {
+    const [matches, setMatches] = useState(() => typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia(query).matches
+        : false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const mql = window.matchMedia(query);
+        const onChange = (e) => setMatches(e.matches);
+        setMatches(mql.matches);
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, [query]);
+    return matches;
+}
+/**
+ * Whether the viewport is phone-width (below 768px). Use for layout-density
+ * decisions: bigger type, taller rows, `dvh`-capped popovers.
+ * @returns True on phone-width viewports.
+ */
+export function useNarrowViewport() {
+    return useMediaQueryMatch(NARROW_VIEWPORT_QUERY);
+}
+/**
+ * Whether the primary pointer is coarse (touch). Use for interaction
+ * decisions: ≥44px touch targets, always-visible controls that desktop
+ * reveals on hover (hover does not exist on touch).
+ * @returns True on touch-first devices.
+ */
+export function useCoarsePointer() {
+    return useMediaQueryMatch(COARSE_POINTER_QUERY);
+}
+//# sourceMappingURL=useViewport.js.map

package/dist/hooks/useViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewport.js","sourceRoot":"","sources":["../../src/hooks/useViewport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CAAA;AAEvD;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1C,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;QACtE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO;QAClC,CAAC,CAAC,KAAK,CACV,CAAA;IACD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;YAAE,OAAM;QACpF,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,QAAQ,GAAG,CAAC,CAAsB,EAAQ,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACxE,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACvB,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACxC,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACX,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAO,kBAAkB,CAAC,qBAAqB,CAAC,CAAA;AAClD,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,kBAAkB,CAAC,oBAAoB,CAAC,CAAA;AACjD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+/**
+ * `@molecule/app-ide-react` — React components for an AI-powered IDE
+ * workspace: `WorkspaceLayout` (resizable panel row), `ChatPanel` (streaming
+ * AI chat with tool-call cards, @ file mentions, / commands), `EditorPanel`
+ * (tabbed Monaco editor), `PreviewPanel` (live-preview iframe with device
+ * frames + crash/blank recovery), `FileExplorer`, `CommandPalette`,
+ * `QuickOpen`, `TabBar`, plus `registerCustomEventCard()` for app-specific
+ * chat cards and `useKeyboardShortcuts()`.
+ *
+ * @example
+ * ```tsx
+ * import { ChatPanel, EditorPanel, PreviewPanel, WorkspaceLayout } from '@molecule/app-ide-react'
+ *
+ * <WorkspaceLayout>
+ *   <ChatPanel
+ *     projectId="proj_abc123"
+ *     onFileOpen={(path) => console.log('open', path)}
+ *     onFileChange={(path, content) => console.log('changed', path, content.length)}
+ *     onReadyToBuild={() => console.log('boot sandbox')}
+ *   />
+ *   <EditorPanel
+ *     onActiveFileChange={(path) => console.log('active', path)}
+ *     onFixWithAI={(req) => console.log('fix', req)}
+ *   />
+ *   <PreviewPanel onPreviewError={(errs) => console.error(errs)} />
+ * </WorkspaceLayout>
+ * ```
+ *
+ * @remarks
+ * - The panels are hook-driven and THROW without provider wiring: wrap the
+ *   tree in `@molecule/app-react`'s `WorkspaceProvider`, `EditorProvider`,
+ *   `ChatProvider`, and `PreviewProvider` (or the umbrella
+ *   `MoleculeProvider`), each wired to a bond — typically
+ *   `@molecule/app-ide-default` (workspace/layout state + persistence),
+ *   `@molecule/app-code-editor-monaco`, `@molecule/app-ai-chat-http`
+ *   (streaming chat endpoint), and `@molecule/app-live-preview-iframe`.
+ *   `ChatPanel` additionally needs the bonded HTTP client
+ *   (`useHttpClient`) and `I18nProvider`; `getClassMap()` needs a ClassMap
+ *   bond.
+ * - `WorkspaceLayout` takes panels as CHILDREN and matches them in order to
+ *   the workspace provider's panel configs (extra configs are ignored, so
+ *   rendering 2 children against the default 3-panel layout works). Panel
+ *   sizes persist through the workspace provider's `resizePanel`.
+ * - App-specific chat/stream events do NOT belong in this package — emit
+ *   `{ type: 'custom', name, data }` events and register a card with
+ *   `registerCustomEventCard(name, factory)` in the consuming app.
+ * - `ReportModal` and `ShareModal` are exported so a HOST can mount them
+ *   itself. They need only `projectId` + the bonded HTTP client — no
+ *   workspace/editor/preview provider, no chat, no running sandbox — because
+ *   they POST to `/projects/:id/report` and `/projects/:id/shares` on the
+ *   platform API. Do NOT route a host's "report a bug" / "share" button
+ *   through `ChatPanel`'s `openReportSignal` / `openShareSignal` alone: those
+ *   props are observed inside the panel, so in any phase where the host does
+ *   not mount a `ChatPanel` (a hibernating sandbox, an error screen) the
+ *   button silently does nothing. Mount the modal directly in those phases.
+ *   `ChatPanel` renders its own copies for `/report` and `/share`; a host that
+ *   mounts them too must gate on whether the panel is mounted so the modal
+ *   never opens twice.
+ * - `ReportModal` does NOT show its own success state — it calls `onSubmitted`
+ *   and closes, so a host that mounts it MUST surface the confirmation itself
+ *   (`formatReportConfirmation(result)` returns the i18n key + default copy,
+ *   and `result.url` is the filed issue). `ShareModal` does show the created
+ *   link inline, but only until it is closed.
+ * - Text routes through `t('ide.*')` — `@molecule/app-locales-ide` supplies
+ *   translations.
+ *
+ * @module
+ */
+export * from './command-metadata.js';
+export * from './components/index.js';
+export * from './customEventCards.js';
+export * from './hooks/index.js';
+export * from './settings-metadata.js';
+export type * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,mBAAmB,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,74 @@
+/**
+ * `@molecule/app-ide-react` — React components for an AI-powered IDE
+ * workspace: `WorkspaceLayout` (resizable panel row), `ChatPanel` (streaming
+ * AI chat with tool-call cards, @ file mentions, / commands), `EditorPanel`
+ * (tabbed Monaco editor), `PreviewPanel` (live-preview iframe with device
+ * frames + crash/blank recovery), `FileExplorer`, `CommandPalette`,
+ * `QuickOpen`, `TabBar`, plus `registerCustomEventCard()` for app-specific
+ * chat cards and `useKeyboardShortcuts()`.
+ *
+ * @example
+ * ```tsx
+ * import { ChatPanel, EditorPanel, PreviewPanel, WorkspaceLayout } from '@molecule/app-ide-react'
+ *
+ * <WorkspaceLayout>
+ *   <ChatPanel
+ *     projectId="proj_abc123"
+ *     onFileOpen={(path) => console.log('open', path)}
+ *     onFileChange={(path, content) => console.log('changed', path, content.length)}
+ *     onReadyToBuild={() => console.log('boot sandbox')}
+ *   />
+ *   <EditorPanel
+ *     onActiveFileChange={(path) => console.log('active', path)}
+ *     onFixWithAI={(req) => console.log('fix', req)}
+ *   />
+ *   <PreviewPanel onPreviewError={(errs) => console.error(errs)} />
+ * </WorkspaceLayout>
+ * ```
+ *
+ * @remarks
+ * - The panels are hook-driven and THROW without provider wiring: wrap the
+ *   tree in `@molecule/app-react`'s `WorkspaceProvider`, `EditorProvider`,
+ *   `ChatProvider`, and `PreviewProvider` (or the umbrella
+ *   `MoleculeProvider`), each wired to a bond — typically
+ *   `@molecule/app-ide-default` (workspace/layout state + persistence),
+ *   `@molecule/app-code-editor-monaco`, `@molecule/app-ai-chat-http`
+ *   (streaming chat endpoint), and `@molecule/app-live-preview-iframe`.
+ *   `ChatPanel` additionally needs the bonded HTTP client
+ *   (`useHttpClient`) and `I18nProvider`; `getClassMap()` needs a ClassMap
+ *   bond.
+ * - `WorkspaceLayout` takes panels as CHILDREN and matches them in order to
+ *   the workspace provider's panel configs (extra configs are ignored, so
+ *   rendering 2 children against the default 3-panel layout works). Panel
+ *   sizes persist through the workspace provider's `resizePanel`.
+ * - App-specific chat/stream events do NOT belong in this package — emit
+ *   `{ type: 'custom', name, data }` events and register a card with
+ *   `registerCustomEventCard(name, factory)` in the consuming app.
+ * - `ReportModal` and `ShareModal` are exported so a HOST can mount them
+ *   itself. They need only `projectId` + the bonded HTTP client — no
+ *   workspace/editor/preview provider, no chat, no running sandbox — because
+ *   they POST to `/projects/:id/report` and `/projects/:id/shares` on the
+ *   platform API. Do NOT route a host's "report a bug" / "share" button
+ *   through `ChatPanel`'s `openReportSignal` / `openShareSignal` alone: those
+ *   props are observed inside the panel, so in any phase where the host does
+ *   not mount a `ChatPanel` (a hibernating sandbox, an error screen) the
+ *   button silently does nothing. Mount the modal directly in those phases.
+ *   `ChatPanel` renders its own copies for `/report` and `/share`; a host that
+ *   mounts them too must gate on whether the panel is mounted so the modal
+ *   never opens twice.
+ * - `ReportModal` does NOT show its own success state — it calls `onSubmitted`
+ *   and closes, so a host that mounts it MUST surface the confirmation itself
+ *   (`formatReportConfirmation(result)` returns the i18n key + default copy,
+ *   and `result.url` is the filed issue). `ShareModal` does show the created
+ *   link inline, but only until it is closed.
+ * - Text routes through `t('ide.*')` — `@molecule/app-locales-ide` supplies
+ *   translations.
+ *
+ * @module
+ */
+export * from './command-metadata.js';
+export * from './components/index.js';
+export * from './customEventCards.js';
+export * from './hooks/index.js';
+export * from './settings-metadata.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA"}