@molecule/app-ide-react 1.0.0

package/dist/components/chat-tips-utilities.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Auto-tip selection + idle-gating for the dismissable chat tip cards.
+ *
+ * Two complementary surfaces, so a typical session reliably surfaces a tip
+ * (the previous idle-only gate was so conservative new users saw ZERO):
+ *
+ * 1. **Entry tip** ({@link ENTRY_TIP}) — one high-value onboarding hint shown
+ *    once on a *fresh* conversation (before the first prompt), so a brand-new
+ *    user always learns how to drive the agent. The caller shows it directly;
+ *    no gate.
+ * 2. **Idle rotation** ({@link CHAT_TIPS}) — additional tips that MAY surface
+ *    after the conversation has sat idle for a while, gated by a random roll and
+ *    a cooldown so the timeline never fills with tips.
+ *
+ * {@link shouldShowIdleTip} and {@link pickIdleTip} are pure (the random roll is
+ * injected) so the behavior is unit-testable; {@link selectTip} remains a
+ * deterministic by-index helper.
+ *
+ * @module
+ */
+/** A single onboarding tip. */
+export interface TipDef {
+    /** Stable id (also used as the i18n key suffix). */
+    id: string;
+    /**
+     * English default text, rendered via `t('ide.chat.tip.<id>', { agentName }, { defaultValue })`.
+     * May contain the `{{agentName}}` interpolation token, filled in by the caller
+     * from the host's agent identity (neutral default: "the assistant").
+     */
+    text: string;
+}
+/**
+ * The single highest-value onboarding tip, shown once on a fresh conversation
+ * (see the module overview). It points at the two interactions that unlock
+ * everything else — the `/` command menu and `@`-mentioning a file — so a brand-
+ * new user is never left staring at an empty chat with no idea how to begin.
+ * Its `id` is also a locale key (`ide.chat.tip.getStarted`), like every entry in
+ * {@link CHAT_TIPS}.
+ */
+export declare const ENTRY_TIP: TipDef;
+/**
+ * The idle-rotation tip pool. Each covers a real, shipped slash command or
+ * affordance — file mentions, the command menu, plan vs execute, `/undo`,
+ * `/compact`, `/commit`, and `/report`. Surfaced occasionally
+ * while idle (in no fixed order — {@link pickIdleTip} chooses an unseen one at
+ * random), so a longer session keeps learning new features without the timeline
+ * filling with hints. The {@link ENTRY_TIP} (`getStarted`) is shown separately at
+ * onboarding and is intentionally NOT part of this rotation.
+ */
+export declare const CHAT_TIPS: readonly TipDef[];
+/**
+ * How long the conversation must sit idle before a rotation tip may surface
+ * ("idle for a while"). Kept short enough that a typical pause in a real session
+ * reaches it.
+ */
+export declare const TIP_IDLE_MS = 45000;
+/**
+ * Don't surface an *idle-rotation* tip until the conversation has at least this
+ * many messages (one real back-and-forth). The {@link ENTRY_TIP} is exempt — it
+ * is the onboarding hint shown before the first prompt.
+ */
+export declare const TIP_MIN_MESSAGES = 2;
+/** Minimum gap between two idle tips, so the timeline never fills with them. */
+export declare const TIP_COOLDOWN_MS = 150000;
+/**
+ * Chance to surface a rotation tip once idle + cooldown allow it — high enough
+ * that an active session reliably sees one, but not every idle period.
+ */
+export declare const TIP_IDLE_PROBABILITY = 0.7;
+/** Inputs to the idle-tip gate. All durations in milliseconds. */
+export interface IdleTipState {
+    /** Total messages in the conversation. */
+    messageCount: number;
+    /** Time since the last message activity (the idle duration). */
+    msSinceLastActivity: number;
+    /** Time since the last tip was shown (`Infinity` if none yet). */
+    msSinceLastTip: number;
+}
+/**
+ * Decide whether to surface an idle tip. Pure: pass `rand` (0–1, e.g. `Math.random()`)
+ * so it is testable. Returns false unless the conversation has enough history (never
+ * on the first prompt), has been idle long enough, the cooldown since the last tip has
+ * elapsed, AND the random roll passes — so tips stay occasional and never pile up.
+ *
+ * @param state - Conversation idle state.
+ * @param rand - A random value in [0, 1) (injected for testability).
+ * @returns Whether a tip should be shown now.
+ */
+export declare function shouldShowIdleTip(state: IdleTipState, rand: number): boolean;
+/**
+ * Pick a tip the user hasn't seen yet (falling back to the full pool once all have
+ * been shown). Pure: pass `rand` (0–1) for a testable random choice; out-of-range or
+ * non-finite values are clamped.
+ *
+ * @param shownIds - Ids of tips already shown this conversation.
+ * @param rand - A random value in [0, 1) (injected for testability).
+ * @returns The chosen tip definition.
+ */
+export declare function pickIdleTip(shownIds: readonly string[], rand: number): TipDef;
+/**
+ * Deterministic by-index tip pick, cycling through {@link CHAT_TIPS} via modulo.
+ * Non-finite or negative indices clamp to slot 0.
+ *
+ * @param index - The tip index.
+ * @returns The tip definition for that index.
+ */
+export declare function selectTip(index: number): TipDef;
+//# sourceMappingURL=chat-tips-utilities.d.ts.map

package/dist/components/chat-tips-utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-tips-utilities.d.ts","sourceRoot":"","sources":["../../src/components/chat-tips-utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+BAA+B;AAC/B,MAAM,WAAW,MAAM;IACrB,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,MAGvB,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EA6B7B,CAAA;AAEV;;;;GAIG;AACH,eAAO,MAAM,WAAW,QAAS,CAAA;AACjC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,IAAI,CAAA;AACjC,gFAAgF;AAChF,eAAO,MAAM,eAAe,SAAU,CAAA;AACtC;;;GAGG;AACH,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,mBAAmB,EAAE,MAAM,CAAA;IAC3B,kEAAkE;IAClE,cAAc,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAK5E;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAK7E;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAI/C"}

package/dist/components/chat-tips-utilities.js

@@ -0,0 +1,137 @@
+/**
+ * Auto-tip selection + idle-gating for the dismissable chat tip cards.
+ *
+ * Two complementary surfaces, so a typical session reliably surfaces a tip
+ * (the previous idle-only gate was so conservative new users saw ZERO):
+ *
+ * 1. **Entry tip** ({@link ENTRY_TIP}) — one high-value onboarding hint shown
+ *    once on a *fresh* conversation (before the first prompt), so a brand-new
+ *    user always learns how to drive the agent. The caller shows it directly;
+ *    no gate.
+ * 2. **Idle rotation** ({@link CHAT_TIPS}) — additional tips that MAY surface
+ *    after the conversation has sat idle for a while, gated by a random roll and
+ *    a cooldown so the timeline never fills with tips.
+ *
+ * {@link shouldShowIdleTip} and {@link pickIdleTip} are pure (the random roll is
+ * injected) so the behavior is unit-testable; {@link selectTip} remains a
+ * deterministic by-index helper.
+ *
+ * @module
+ */
+/**
+ * The single highest-value onboarding tip, shown once on a fresh conversation
+ * (see the module overview). It points at the two interactions that unlock
+ * everything else — the `/` command menu and `@`-mentioning a file — so a brand-
+ * new user is never left staring at an empty chat with no idea how to begin.
+ * Its `id` is also a locale key (`ide.chat.tip.getStarted`), like every entry in
+ * {@link CHAT_TIPS}.
+ */
+export const ENTRY_TIP = {
+    id: 'getStarted',
+    text: 'Tip: type / to see every command, or @ a filename to give {{agentName}} a file to work from.',
+};
+/**
+ * The idle-rotation tip pool. Each covers a real, shipped slash command or
+ * affordance — file mentions, the command menu, plan vs execute, `/undo`,
+ * `/compact`, `/commit`, and `/report`. Surfaced occasionally
+ * while idle (in no fixed order — {@link pickIdleTip} chooses an unseen one at
+ * random), so a longer session keeps learning new features without the timeline
+ * filling with hints. The {@link ENTRY_TIP} (`getStarted`) is shown separately at
+ * onboarding and is intentionally NOT part of this rotation.
+ */
+export const CHAT_TIPS = [
+    {
+        id: 'mention',
+        text: 'Tip: type @filename to attach a project file as context — {{agentName}} reads it directly.',
+    },
+    {
+        id: 'slash',
+        text: 'Tip: type / to browse every command (commit, model, and more).',
+    },
+    {
+        id: 'plan',
+        text: 'Tip: use /plan to have {{agentName}} research and propose a plan before it edits any files.',
+    },
+    {
+        id: 'undo',
+        text: "Tip: use /undo to instantly revert the last AI turn's file changes if it went the wrong way.",
+    },
+    {
+        id: 'compact',
+        text: 'Tip: long conversation? /compact compresses the context so you keep room to work.',
+    },
+    {
+        id: 'commit',
+        text: 'Tip: use /commit to save your changes as a git commit you can always return to.',
+    },
+    {
+        id: 'report',
+        text: 'Tip: something off? /report sends a bug or feedback to the team with your recent chat attached.',
+    },
+];
+/**
+ * How long the conversation must sit idle before a rotation tip may surface
+ * ("idle for a while"). Kept short enough that a typical pause in a real session
+ * reaches it.
+ */
+export const TIP_IDLE_MS = 45_000;
+/**
+ * Don't surface an *idle-rotation* tip until the conversation has at least this
+ * many messages (one real back-and-forth). The {@link ENTRY_TIP} is exempt — it
+ * is the onboarding hint shown before the first prompt.
+ */
+export const TIP_MIN_MESSAGES = 2;
+/** Minimum gap between two idle tips, so the timeline never fills with them. */
+export const TIP_COOLDOWN_MS = 150_000;
+/**
+ * Chance to surface a rotation tip once idle + cooldown allow it — high enough
+ * that an active session reliably sees one, but not every idle period.
+ */
+export const TIP_IDLE_PROBABILITY = 0.7;
+/**
+ * Decide whether to surface an idle tip. Pure: pass `rand` (0–1, e.g. `Math.random()`)
+ * so it is testable. Returns false unless the conversation has enough history (never
+ * on the first prompt), has been idle long enough, the cooldown since the last tip has
+ * elapsed, AND the random roll passes — so tips stay occasional and never pile up.
+ *
+ * @param state - Conversation idle state.
+ * @param rand - A random value in [0, 1) (injected for testability).
+ * @returns Whether a tip should be shown now.
+ */
+export function shouldShowIdleTip(state, rand) {
+    if (state.messageCount < TIP_MIN_MESSAGES)
+        return false;
+    if (state.msSinceLastActivity < TIP_IDLE_MS)
+        return false;
+    if (state.msSinceLastTip < TIP_COOLDOWN_MS)
+        return false;
+    return rand < TIP_IDLE_PROBABILITY;
+}
+/**
+ * Pick a tip the user hasn't seen yet (falling back to the full pool once all have
+ * been shown). Pure: pass `rand` (0–1) for a testable random choice; out-of-range or
+ * non-finite values are clamped.
+ *
+ * @param shownIds - Ids of tips already shown this conversation.
+ * @param rand - A random value in [0, 1) (injected for testability).
+ * @returns The chosen tip definition.
+ */
+export function pickIdleTip(shownIds, rand) {
+    const fresh = CHAT_TIPS.filter((tip) => !shownIds.includes(tip.id));
+    const pool = fresh.length ? fresh : CHAT_TIPS;
+    const safe = Number.isFinite(rand) ? Math.min(Math.max(rand, 0), 0.999999) : 0;
+    return pool[Math.floor(safe * pool.length)];
+}
+/**
+ * Deterministic by-index tip pick, cycling through {@link CHAT_TIPS} via modulo.
+ * Non-finite or negative indices clamp to slot 0.
+ *
+ * @param index - The tip index.
+ * @returns The tip definition for that index.
+ */
+export function selectTip(index) {
+    const len = CHAT_TIPS.length;
+    const safe = Number.isFinite(index) && index > 0 ? Math.floor(index) : 0;
+    return CHAT_TIPS[safe % len];
+}
+//# sourceMappingURL=chat-tips-utilities.js.map

package/dist/components/chat-tips-utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-tips-utilities.js","sourceRoot":"","sources":["../../src/components/chat-tips-utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAcH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,EAAE,EAAE,YAAY;IAChB,IAAI,EAAE,8FAA8F;CACrG,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAsB;IAC1C;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,4FAA4F;KACnG;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,gEAAgE;KACvE;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,6FAA6F;KACpG;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,8FAA8F;KACrG;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,mFAAmF;KAC1F;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,iFAAiF;KACxF;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,iGAAiG;KACxG;CACO,CAAA;AAEV;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAA;AACjC;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AACjC,gFAAgF;AAChF,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAA;AACtC;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;AAYvC;;;;;;;;;GASG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAmB,EAAE,IAAY;IACjE,IAAI,KAAK,CAAC,YAAY,GAAG,gBAAgB;QAAE,OAAO,KAAK,CAAA;IACvD,IAAI,KAAK,CAAC,mBAAmB,GAAG,WAAW;QAAE,OAAO,KAAK,CAAA;IACzD,IAAI,KAAK,CAAC,cAAc,GAAG,eAAe;QAAE,OAAO,KAAK,CAAA;IACxD,OAAO,IAAI,GAAG,oBAAoB,CAAA;AACpC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,QAA2B,EAAE,IAAY;IACnE,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;IACnE,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9E,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC7C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,MAAM,GAAG,GAAG,SAAS,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,OAAO,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,CAAA;AAC9B,CAAC"}

package/dist/components/device-cycle.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Device-frame data + helpers for the preview panel.
+ *
+ * The preview header exposes a {@link DeviceFrameSelector} dropdown that lists
+ * every device frame, plus a "Rotate" control that swaps a fixed-frame device
+ * between portrait and landscape. The frame order, the icon + human label for
+ * each frame, the fixed pixel DIMENSIONS used to size the preview iframe, and
+ * the orientation-aware size resolver all live here as pure data/functions so
+ * they can be unit tested and reused.
+ *
+ * @module
+ */
+import type { IconName } from '@molecule/app-icons';
+import type { DeviceFrame } from '@molecule/app-live-preview';
+/**
+ * The device frames the selector dropdown lists, in display order.
+ * `none` = responsive (no fixed frame, full width).
+ */
+export declare const DEVICE_FRAMES: readonly DeviceFrame[];
+/**
+ * Per-frame display metadata: the icon-set glyph name and the i18n label
+ * (key + English default) shown in the dropdown trigger + menu items.
+ */
+export declare const DEVICE_META: Record<DeviceFrame, {
+    readonly icon: IconName;
+    readonly labelKey: string;
+    readonly label: string;
+}>;
+/**
+ * Preview-only iframe orientation. Portrait is the natural orientation of a
+ * fixed-frame device; landscape swaps its width/height. This is a visual
+ * preview concern that lives in {@link PreviewPanel}'s local state — it is NOT
+ * part of the live-preview core state.
+ */
+export type DeviceOrientation = 'portrait' | 'landscape';
+/**
+ * Per-frame iframe sizing. `width`/`height` are the PORTRAIT CSS sizes; a
+ * fixed-frame (`rotatable`) device swaps them in landscape. `'100%'` width with
+ * a `null` height means "fluid" — fill the available preview area (responsive /
+ * desktop have no fixed frame to rotate).
+ */
+export interface DeviceDimensions {
+    /** Portrait CSS width (e.g. `'768px'`, or `'100%'` for a fluid frame). */
+    readonly width: string;
+    /** Portrait CSS height in px (e.g. `'1024px'`), or `null` to fill the area. */
+    readonly height: string | null;
+    /** Whether the frame has a fixed size that can be rotated portrait ⇄ landscape. */
+    readonly rotatable: boolean;
+}
+/**
+ * The fixed pixel frame each device renders the preview iframe at. `none`
+ * (responsive) and `desktop` are fluid — full width, full height, nothing to
+ * rotate. `tablet` (768×1024) and `mobile` (375×667) are fixed frames that can
+ * be rotated to landscape (swapping width/height).
+ */
+export declare const DEVICE_DIMENSIONS: Record<DeviceFrame, DeviceDimensions>;
+/**
+ * Whether a device frame can be rotated (true only for fixed-frame devices —
+ * tablet and mobile). Responsive and desktop are full-width with nothing to
+ * rotate, so the "Rotate" control is enabled only "where possible".
+ * @param device - The device frame.
+ * @returns `true` if the frame has a fixed size that can be rotated.
+ */
+export declare function isDeviceRotatable(device: DeviceFrame): boolean;
+/**
+ * Resolves the concrete iframe `width`/`height` for a device frame at a given
+ * orientation. Fluid frames (responsive/desktop) ignore orientation and fill
+ * the preview area (`width` from dims, `height: '100%'`). Fixed frames render
+ * at their pixel size in portrait and at the swapped size in landscape.
+ * @param device - The device frame.
+ * @param orientation - The preview orientation.
+ * @returns The CSS `width` and `height` to apply to the preview iframe.
+ */
+export declare function resolveDeviceSize(device: DeviceFrame, orientation: DeviceOrientation): {
+    width: string;
+    height: string;
+};
+/**
+ * Returns the icon-set glyph name for a device frame.
+ * @param device - The device frame.
+ * @returns The icon name registered in the bonded icon set.
+ */
+export declare function deviceIconName(device: DeviceFrame): string;
+//# sourceMappingURL=device-cycle.d.ts.map

package/dist/components/device-cycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-cycle.d.ts","sourceRoot":"","sources":["../../src/components/device-cycle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAE7D;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EAA4C,CAAA;AAE5F;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAC9B,WAAW,EACX;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAM/E,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,WAAW,CAAA;AAExD;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,mFAAmF;IACnF,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAKnE,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAE9D;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,iBAAiB,GAC7B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CASnC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAE1D"}

package/dist/components/device-cycle.js

@@ -0,0 +1,77 @@
+/**
+ * Device-frame data + helpers for the preview panel.
+ *
+ * The preview header exposes a {@link DeviceFrameSelector} dropdown that lists
+ * every device frame, plus a "Rotate" control that swaps a fixed-frame device
+ * between portrait and landscape. The frame order, the icon + human label for
+ * each frame, the fixed pixel DIMENSIONS used to size the preview iframe, and
+ * the orientation-aware size resolver all live here as pure data/functions so
+ * they can be unit tested and reused.
+ *
+ * @module
+ */
+/**
+ * The device frames the selector dropdown lists, in display order.
+ * `none` = responsive (no fixed frame, full width).
+ */
+export const DEVICE_FRAMES = ['none', 'desktop', 'tablet', 'mobile'];
+/**
+ * Per-frame display metadata: the icon-set glyph name and the i18n label
+ * (key + English default) shown in the dropdown trigger + menu items.
+ */
+export const DEVICE_META = {
+    none: { icon: 'browser', labelKey: 'ide.device.responsive', label: 'Responsive' },
+    desktop: { icon: 'device-desktop', labelKey: 'ide.device.desktop', label: 'Desktop' },
+    tablet: { icon: 'device-tablet', labelKey: 'ide.device.tablet', label: 'Tablet' },
+    mobile: { icon: 'device-mobile', labelKey: 'ide.device.mobile', label: 'Mobile' },
+};
+/**
+ * The fixed pixel frame each device renders the preview iframe at. `none`
+ * (responsive) and `desktop` are fluid — full width, full height, nothing to
+ * rotate. `tablet` (768×1024) and `mobile` (375×667) are fixed frames that can
+ * be rotated to landscape (swapping width/height).
+ */
+export const DEVICE_DIMENSIONS = {
+    none: { width: '100%', height: null, rotatable: false },
+    desktop: { width: '100%', height: null, rotatable: false },
+    tablet: { width: '768px', height: '1024px', rotatable: true },
+    mobile: { width: '375px', height: '667px', rotatable: true },
+};
+/**
+ * Whether a device frame can be rotated (true only for fixed-frame devices —
+ * tablet and mobile). Responsive and desktop are full-width with nothing to
+ * rotate, so the "Rotate" control is enabled only "where possible".
+ * @param device - The device frame.
+ * @returns `true` if the frame has a fixed size that can be rotated.
+ */
+export function isDeviceRotatable(device) {
+    return DEVICE_DIMENSIONS[device].rotatable;
+}
+/**
+ * Resolves the concrete iframe `width`/`height` for a device frame at a given
+ * orientation. Fluid frames (responsive/desktop) ignore orientation and fill
+ * the preview area (`width` from dims, `height: '100%'`). Fixed frames render
+ * at their pixel size in portrait and at the swapped size in landscape.
+ * @param device - The device frame.
+ * @param orientation - The preview orientation.
+ * @returns The CSS `width` and `height` to apply to the preview iframe.
+ */
+export function resolveDeviceSize(device, orientation) {
+    const dims = DEVICE_DIMENSIONS[device];
+    if (!dims.rotatable || dims.height === null) {
+        // Fluid frame — fill the available preview area; nothing to rotate.
+        return { width: dims.width, height: '100%' };
+    }
+    return orientation === 'landscape'
+        ? { width: dims.height, height: dims.width }
+        : { width: dims.width, height: dims.height };
+}
+/**
+ * Returns the icon-set glyph name for a device frame.
+ * @param device - The device frame.
+ * @returns The icon name registered in the bonded icon set.
+ */
+export function deviceIconName(device) {
+    return DEVICE_META[device].icon;
+}
+//# sourceMappingURL=device-cycle.js.map

package/dist/components/device-cycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-cycle.js","sourceRoot":"","sources":["../../src/components/device-cycle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAE5F;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAGpB;IACF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,uBAAuB,EAAE,KAAK,EAAE,YAAY,EAAE;IACjF,OAAO,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,KAAK,EAAE,SAAS,EAAE;IACrF,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE;IACjF,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE;CAClF,CAAA;AAyBD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAA0C;IACtE,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;IACvD,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;IAC1D,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE;IAC7D,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;CAC7D,CAAA;AAED;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAAmB;IACnD,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAA;AAC5C,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAmB,EACnB,WAA8B;IAE9B,MAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAA;IACtC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;QAC5C,oEAAoE;QACpE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAA;IAC9C,CAAC;IACD,OAAO,WAAW,KAAK,WAAW;QAChC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE;QAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAA;AAChD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,MAAmB;IAChD,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAA;AACjC,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * IDE React components.
+ *
+ * @module
+ */
+export * from './activity-utilities.js';
+export type { ActivityCardProps } from './ActivityCard.js';
+export { ActivityCard } from './ActivityCard.js';
+export * from './chat-autocommit-utilities.js';
+export * from './chat-report-utilities.js';
+export * from './chat-share-utilities.js';
+export { ChatPanel } from './ChatPanel.js';
+export { CommandPalette } from './CommandPalette.js';
+export * from './device-cycle.js';
+export { DeviceFrameSelector } from './DeviceFrameSelector.js';
+export { EditorPanel } from './EditorPanel.js';
+export { FileExplorer } from './FileExplorer.js';
+export type { IconProps } from './Icon.js';
+export { Icon } from './Icon.js';
+export { KeyboardShortcutsPanel } from './KeyboardShortcutsPanel.js';
+export { PreviewPanel } from './PreviewPanel.js';
+export { QuickOpen } from './QuickOpen.js';
+export { QuickPicker } from './QuickPicker.js';
+export { ReportModal } from './ReportModal.js';
+export { ResizeHandle } from './ResizeHandle.js';
+export { SearchPanel } from './SearchPanel.js';
+export { ShareModal } from './ShareModal.js';
+export { SidebarTabs } from './SidebarTabs.js';
+export { TabBar } from './TabBar.js';
+export { ToolCallCard } from './ToolCallCard.js';
+export * from './user-avatar-utilities.js';
+export type { UserAvatarProps } from './UserAvatar.js';
+export { UserAvatar } from './UserAvatar.js';
+export * from './workspace-layout-utilities.js';
+export { WorkspaceLayout } from './WorkspaceLayout.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,yBAAyB,CAAA;AACvC,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,cAAc,4BAA4B,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,33 @@
+/**
+ * IDE React components.
+ *
+ * @module
+ */
+export * from './activity-utilities.js';
+export { ActivityCard } from './ActivityCard.js';
+export * from './chat-autocommit-utilities.js';
+export * from './chat-report-utilities.js';
+export * from './chat-share-utilities.js';
+export { ChatPanel } from './ChatPanel.js';
+export { CommandPalette } from './CommandPalette.js';
+export * from './device-cycle.js';
+export { DeviceFrameSelector } from './DeviceFrameSelector.js';
+export { EditorPanel } from './EditorPanel.js';
+export { FileExplorer } from './FileExplorer.js';
+export { Icon } from './Icon.js';
+export { KeyboardShortcutsPanel } from './KeyboardShortcutsPanel.js';
+export { PreviewPanel } from './PreviewPanel.js';
+export { QuickOpen } from './QuickOpen.js';
+export { QuickPicker } from './QuickPicker.js';
+export { ReportModal } from './ReportModal.js';
+export { ResizeHandle } from './ResizeHandle.js';
+export { SearchPanel } from './SearchPanel.js';
+export { ShareModal } from './ShareModal.js';
+export { SidebarTabs } from './SidebarTabs.js';
+export { TabBar } from './TabBar.js';
+export { ToolCallCard } from './ToolCallCard.js';
+export * from './user-avatar-utilities.js';
+export { UserAvatar } from './UserAvatar.js';
+export * from './workspace-layout-utilities.js';
+export { WorkspaceLayout } from './WorkspaceLayout.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,yBAAyB,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,cAAc,4BAA4B,CAAA;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/components/tool-call-utilities.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Pure utility functions for tool call display.
+ *
+ * Extracted from ToolCallCard for testability — these functions have no
+ * React dependencies and can be unit-tested directly.
+ *
+ * @module
+ */
+/** Raw tool output shape. */
+export type ToolOutput = Record<string, unknown> | string | null | undefined;
+/**
+ * Extracts the last path segment from a file path (e.g. "a/b/c.ts" → "c.ts").
+ * @param path - The file path to extract the basename from.
+ * @returns The basename string, or empty string if path is undefined.
+ */
+export declare function basename(path: string | undefined): string;
+/**
+ * Path of a `@molecule/*` package's MOLECULE.md inside the sandbox, where every
+ * package is pre-installed. Used by the find_package / read_molecule_doc cards
+ * so clicking a package opens its docs in the editor.
+ * @param packageName - The package name, with or without the `@molecule/` prefix.
+ * @returns The absolute sandbox path to the package's MOLECULE.md, or null for
+ * a name that isn't a plain molecule package slug.
+ */
+export declare function moleculeDocPath(packageName: string | undefined): string | null;
+/**
+ * Human-readable label for a tool call (e.g. "Edit `ChatPanel.tsx`").
+ * @param name - The tool name (e.g. "write_file", "exec_command").
+ * @param input - The raw tool input payload.
+ * @returns A formatted label string with backtick-wrapped filenames.
+ */
+export declare function toolLabel(name: string, input: unknown): string;
+/**
+ * One-line result summary shown beneath the label.
+ * @param name - The tool name.
+ * @param output - The raw tool output payload.
+ * @param status - The execution status (pending, running, done, error).
+ * @returns A brief summary string describing the result.
+ */
+export declare function toolSummary(name: string, output: ToolOutput, status: string): string;
+/**
+ * Count truly added/removed lines between two line arrays using LCS.
+ * @param oldLines - The original lines array.
+ * @param newLines - The modified lines array.
+ * @returns An object with the number of added and removed lines.
+ */
+export declare function diffLineCount(oldLines: string[], newLines: string[]): {
+    added: number;
+    removed: number;
+};
+/**
+ * Compute lines added/removed from a file-changing tool call.
+ * @param name - The tool name (edit_file or write_file).
+ * @param input - The raw tool input payload.
+ * @param output - The raw tool output payload.
+ * @returns Diff stats with added and removed line counts, or null if not applicable.
+ */
+export declare function fileDiffStats(name: string, input: unknown, output: unknown): {
+    added: number;
+    removed: number;
+} | null;
+/**
+ * Extracts the primary file path from a tool's input, if it operates on a single file.
+ * @param name - The tool name.
+ * @param input - The raw tool input payload.
+ * @returns The file path string, or null if the tool doesn't target a single file.
+ */
+export declare function extractFilePath(name: string, input: unknown): string | null;
+//# sourceMappingURL=tool-call-utilities.d.ts.map

package/dist/components/tool-call-utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-utilities.d.ts","sourceRoot":"","sources":["../../src/components/tool-call-utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,6BAA6B;AAC7B,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;AAE5E;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAGzD;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAK9E;AAOD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CA4H9D;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CA8HpF;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,EAAE,EAClB,QAAQ,EAAE,MAAM,EAAE,GACjB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAcpC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,GACd;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAyB3C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAgB3E"}