magnaui 0.1.0

package/dist/components/magna/apps.d.ts

@@ -0,0 +1,202 @@
+export declare const magnaApps: readonly [{
+    readonly name: "Today";
+    readonly id: "today";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174634";
+}, {
+    readonly name: "workflow";
+    readonly id: "workflow";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174631";
+}, {
+    readonly name: "what can i do ?";
+    readonly id: "what-can-i-do";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174621";
+}, {
+    readonly name: "wafir";
+    readonly id: "wafir";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174624";
+}, {
+    readonly name: "vault";
+    readonly id: "vault";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174625";
+}, {
+    readonly name: "Trajectory";
+    readonly id: "trajectory";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174620";
+}, {
+    readonly name: "Terminal";
+    readonly id: "terminal";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174608";
+}, {
+    readonly name: "Spaces";
+    readonly id: "spaces";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174633";
+}, {
+    readonly name: "Notes";
+    readonly id: "notes";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174626";
+}, {
+    readonly name: "Settings";
+    readonly id: "settings";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174617";
+}, {
+    readonly name: "Sheets";
+    readonly id: "sheets";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174628";
+}, {
+    readonly name: "Salis Verify";
+    readonly id: "salis-verify";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174623";
+}, {
+    readonly name: "Salis";
+    readonly id: "salis";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174622";
+}, {
+    readonly name: "Notifications";
+    readonly id: "notifications";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174614";
+}, {
+    readonly name: "Sledes";
+    readonly id: "sledes";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174609";
+}, {
+    readonly name: "Magna IDE";
+    readonly id: "magna-ide";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174616";
+}, {
+    readonly name: "Tasks";
+    readonly id: "tasks";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174630";
+}, {
+    readonly name: "Connect Ai";
+    readonly id: "connect-ai";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174627";
+}, {
+    readonly name: "Database";
+    readonly id: "database";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174613";
+}, {
+    readonly name: "Docs";
+    readonly id: "docs";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174619";
+}, {
+    readonly name: "Expenses";
+    readonly id: "expenses";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174629";
+}, {
+    readonly name: "Habits";
+    readonly id: "habits";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174611";
+}, {
+    readonly name: "Magna music";
+    readonly id: "magna-music";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174610";
+}, {
+    readonly name: "Magna Brief";
+    readonly id: "magna-brief";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174607";
+}, {
+    readonly name: "Ledger";
+    readonly id: "ledger";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174605";
+}, {
+    readonly name: "Hackify";
+    readonly id: "hackify";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174612";
+}, {
+    readonly name: "Code";
+    readonly id: "code";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174618";
+}, {
+    readonly name: "Connections";
+    readonly id: "connections";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174604";
+}, {
+    readonly name: "Brain";
+    readonly id: "brain";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174603";
+}, {
+    readonly name: "API Studio";
+    readonly id: "api-studio";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174615";
+}, {
+    readonly name: "Approvals";
+    readonly id: "approvals";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174602";
+}, {
+    readonly name: "App Store";
+    readonly id: "app-store";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174601";
+}, {
+    readonly name: "Magna Voice";
+    readonly id: "magna-voice";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174600";
+}, {
+    readonly name: "Mail";
+    readonly id: "mail";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174598";
+}, {
+    readonly name: "Models";
+    readonly id: "models";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174597";
+}, {
+    readonly name: "Magna studio";
+    readonly id: "magna-studio";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174596";
+}, {
+    readonly name: "Assistant";
+    readonly id: "assistant";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174595";
+}, {
+    readonly name: "Browser";
+    readonly id: "browser";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174606";
+}, {
+    readonly name: "Agent Studio";
+    readonly id: "agent-studio";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174632";
+}, {
+    readonly name: "Task Manager";
+    readonly id: "task-manager";
+    readonly src: string;
+    readonly figmaNodeId: "199745:174599";
+}];
+export type MagnaAppId = (typeof magnaApps)[number]['id'];

package/dist/components/magna/apps.js

@@ -0,0 +1,243 @@
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+export const magnaApps = [
+    {
+        name: 'Today',
+        id: 'today',
+        src: __resolveMagnaAsset_1('/magna/today.png'),
+        figmaNodeId: '199745:174634',
+    },
+    {
+        name: 'workflow',
+        id: 'workflow',
+        src: __resolveMagnaAsset_1('/magna/workflow.png'),
+        figmaNodeId: '199745:174631',
+    },
+    {
+        name: 'what can i do ?',
+        id: 'what-can-i-do',
+        src: __resolveMagnaAsset_1('/magna/what-can-i-do.png'),
+        figmaNodeId: '199745:174621',
+    },
+    {
+        name: 'wafir',
+        id: 'wafir',
+        src: __resolveMagnaAsset_1('/magna/wafir.png'),
+        figmaNodeId: '199745:174624',
+    },
+    {
+        name: 'vault',
+        id: 'vault',
+        src: __resolveMagnaAsset_1('/magna/vault.png'),
+        figmaNodeId: '199745:174625',
+    },
+    {
+        name: 'Trajectory',
+        id: 'trajectory',
+        src: __resolveMagnaAsset_1('/magna/trajectory.png'),
+        figmaNodeId: '199745:174620',
+    },
+    {
+        name: 'Terminal',
+        id: 'terminal',
+        src: __resolveMagnaAsset_1('/magna/terminal.png'),
+        figmaNodeId: '199745:174608',
+    },
+    {
+        name: 'Spaces',
+        id: 'spaces',
+        src: __resolveMagnaAsset_1('/magna/spaces.png'),
+        figmaNodeId: '199745:174633',
+    },
+    {
+        name: 'Notes',
+        id: 'notes',
+        src: __resolveMagnaAsset_1('/magna/notes.png'),
+        figmaNodeId: '199745:174626',
+    },
+    {
+        name: 'Settings',
+        id: 'settings',
+        src: __resolveMagnaAsset_1('/magna/settings.png'),
+        figmaNodeId: '199745:174617',
+    },
+    {
+        name: 'Sheets',
+        id: 'sheets',
+        src: __resolveMagnaAsset_1('/magna/sheets.png'),
+        figmaNodeId: '199745:174628',
+    },
+    {
+        name: 'Salis Verify',
+        id: 'salis-verify',
+        src: __resolveMagnaAsset_1('/magna/salis-verify.png'),
+        figmaNodeId: '199745:174623',
+    },
+    {
+        name: 'Salis',
+        id: 'salis',
+        src: __resolveMagnaAsset_1('/magna/salis.png'),
+        figmaNodeId: '199745:174622',
+    },
+    {
+        name: 'Notifications',
+        id: 'notifications',
+        src: __resolveMagnaAsset_1('/magna/notifications.png'),
+        figmaNodeId: '199745:174614',
+    },
+    {
+        name: 'Sledes',
+        id: 'sledes',
+        src: __resolveMagnaAsset_1('/magna/sledes.png'),
+        figmaNodeId: '199745:174609',
+    },
+    {
+        name: 'Magna IDE',
+        id: 'magna-ide',
+        src: __resolveMagnaAsset_1('/magna/magna-ide.png'),
+        figmaNodeId: '199745:174616',
+    },
+    {
+        name: 'Tasks',
+        id: 'tasks',
+        src: __resolveMagnaAsset_1('/magna/tasks.png'),
+        figmaNodeId: '199745:174630',
+    },
+    {
+        name: 'Connect Ai',
+        id: 'connect-ai',
+        src: __resolveMagnaAsset_1('/magna/connect-ai.png'),
+        figmaNodeId: '199745:174627',
+    },
+    {
+        name: 'Database',
+        id: 'database',
+        src: __resolveMagnaAsset_1('/magna/database.png'),
+        figmaNodeId: '199745:174613',
+    },
+    {
+        name: 'Docs',
+        id: 'docs',
+        src: __resolveMagnaAsset_1('/magna/docs.png'),
+        figmaNodeId: '199745:174619',
+    },
+    {
+        name: 'Expenses',
+        id: 'expenses',
+        src: __resolveMagnaAsset_1('/magna/expenses.png'),
+        figmaNodeId: '199745:174629',
+    },
+    {
+        name: 'Habits',
+        id: 'habits',
+        src: __resolveMagnaAsset_1('/magna/habits.png'),
+        figmaNodeId: '199745:174611',
+    },
+    {
+        name: 'Magna music',
+        id: 'magna-music',
+        src: __resolveMagnaAsset_1('/magna/magna-music.png'),
+        figmaNodeId: '199745:174610',
+    },
+    {
+        name: 'Magna Brief',
+        id: 'magna-brief',
+        src: __resolveMagnaAsset_1('/magna/magna-brief.png'),
+        figmaNodeId: '199745:174607',
+    },
+    {
+        name: 'Ledger',
+        id: 'ledger',
+        src: __resolveMagnaAsset_1('/magna/ledger.png'),
+        figmaNodeId: '199745:174605',
+    },
+    {
+        name: 'Hackify',
+        id: 'hackify',
+        src: __resolveMagnaAsset_1('/magna/hackify.png'),
+        figmaNodeId: '199745:174612',
+    },
+    {
+        name: 'Code',
+        id: 'code',
+        src: __resolveMagnaAsset_1('/magna/code.png'),
+        figmaNodeId: '199745:174618',
+    },
+    {
+        name: 'Connections',
+        id: 'connections',
+        src: __resolveMagnaAsset_1('/magna/connections.png'),
+        figmaNodeId: '199745:174604',
+    },
+    {
+        name: 'Brain',
+        id: 'brain',
+        src: __resolveMagnaAsset_1('/magna/brain.png'),
+        figmaNodeId: '199745:174603',
+    },
+    {
+        name: 'API Studio',
+        id: 'api-studio',
+        src: __resolveMagnaAsset_1('/magna/api-studio.png'),
+        figmaNodeId: '199745:174615',
+    },
+    {
+        name: 'Approvals',
+        id: 'approvals',
+        src: __resolveMagnaAsset_1('/magna/approvals.png'),
+        figmaNodeId: '199745:174602',
+    },
+    {
+        name: 'App Store',
+        id: 'app-store',
+        src: __resolveMagnaAsset_1('/magna/app-store.png'),
+        figmaNodeId: '199745:174601',
+    },
+    {
+        name: 'Magna Voice',
+        id: 'magna-voice',
+        src: __resolveMagnaAsset_1('/magna/magna-voice.png'),
+        figmaNodeId: '199745:174600',
+    },
+    {
+        name: 'Mail',
+        id: 'mail',
+        src: __resolveMagnaAsset_1('/magna/mail.png'),
+        figmaNodeId: '199745:174598',
+    },
+    {
+        name: 'Models',
+        id: 'models',
+        src: __resolveMagnaAsset_1('/magna/models.png'),
+        figmaNodeId: '199745:174597',
+    },
+    {
+        name: 'Magna studio',
+        id: 'magna-studio',
+        src: __resolveMagnaAsset_1('/magna/magna-studio.png'),
+        figmaNodeId: '199745:174596',
+    },
+    {
+        name: 'Assistant',
+        id: 'assistant',
+        src: __resolveMagnaAsset_1('/magna/assistant.png'),
+        figmaNodeId: '199745:174595',
+    },
+    {
+        name: 'Browser',
+        id: 'browser',
+        src: __resolveMagnaAsset_1('/magna/browser.png'),
+        figmaNodeId: '199745:174606',
+    },
+    {
+        name: 'Agent Studio',
+        id: 'agent-studio',
+        src: __resolveMagnaAsset_1('/magna/agent-studio.png'),
+        figmaNodeId: '199745:174632',
+    },
+    {
+        name: 'Task Manager',
+        id: 'task-manager',
+        src: __resolveMagnaAsset_1('/magna/task-manager.png'),
+        figmaNodeId: '199745:174599',
+    },
+];

package/dist/components/magna/chat-activity.d.ts

@@ -0,0 +1,12 @@
+import type { ChatComposerStatus } from "./chat-composer.js";
+export interface ChatActivityProps {
+    status?: ChatComposerStatus;
+    voiceLevel?: number | (() => number);
+    recordingSeconds?: number;
+    interactions?: boolean;
+    disabled?: boolean;
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+}
+/** Render in the message area, separately from the persistent ChatComposer. */
+export declare function ChatActivity({ status, voiceLevel, recordingSeconds, interactions, disabled, dir, className, }: ChatActivityProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/magna/chat-activity.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThinkingOrb } from "../interactions/thinking-orb.js";
+import { cn } from "../../utils/cn.js";
+import { VoiceOrb } from "./voice-orb.js";
+import styles from "./chat-composer.module.css";
+/** Render in the message area, separately from the persistent ChatComposer. */
+export function ChatActivity({ status = 'idle', voiceLevel = 0, recordingSeconds = 0, interactions = true, disabled = false, dir = 'ltr', className, }) {
+    if (status === 'idle')
+        return null;
+    const voice = status === 'listening' || status === 'speaking';
+    const label = status === 'thinking'
+        ? 'Magna is thinking'
+        : status === 'recording'
+            ? 'Recording message'
+            : status === 'listening'
+                ? 'Listening'
+                : 'Magna is speaking';
+    const seconds = Math.max(0, Math.floor(Number.isFinite(recordingSeconds) ? recordingSeconds : 0));
+    const elapsed = `${Math.floor(seconds / 60)
+        .toString()
+        .padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`;
+    return (_jsxs("div", { role: 'group', "aria-label": 'Message activity', dir: dir, className: cn('w-full text-text-sub-600', voice
+            ? 'flex flex-col items-center gap-4 py-6 text-center'
+            : 'space-y-3 py-2', className), children: [voice && interactions && (_jsx(VoiceOrb, { state: status, level: voiceLevel, paused: disabled })), _jsxs("div", { className: 'flex items-center gap-2 text-label-sm', children: [status === 'thinking' && interactions && (_jsx("span", { "aria-hidden": 'true', className: 'shrink-0', children: _jsx(ThinkingOrb, { state: 'weaving', size: 20, paused: disabled }) })), _jsx("span", { children: label })] }), status === 'recording' && (_jsxs("div", { className: 'flex max-w-[280px] items-center gap-4', children: [interactions && (_jsx("span", { "aria-hidden": 'true', className: cn(styles.waveform, 'min-w-0 flex-1 text-success-base'), "data-paused": disabled || undefined, children: [
+                            8, 14, 23, 17, 28, 20, 12, 24, 32, 18, 27, 15, 22, 10, 18, 26,
+                            12,
+                        ].map((height, index) => (_jsx("span", { style: { height, animationDelay: `${index * -0.11}s` } }, index))) })), _jsx("time", { dateTime: `PT${seconds}S`, "aria-label": `Recording duration ${Math.floor(seconds / 60)} minutes ${seconds % 60} seconds`, "aria-live": 'off', dir: 'ltr', className: 'shrink-0 font-mono text-label-sm tabular-nums', children: elapsed })] }))] }));
+}

package/dist/components/magna/chat-composer.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type ChatComposerStatus = 'idle' | 'thinking' | 'recording' | 'listening' | 'speaking';
+export interface ChatComposerProps {
+    onSend: (message: string) => void;
+    onAttach?: () => void;
+    onMicrophone?: () => void;
+    onVoice?: () => void;
+    models?: string[];
+    model?: string;
+    onModelChange?: (model: string) => void;
+    /** Controlled draft; omit to keep the draft inside the composer. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Controlled activity state. The consuming app supplies voice and AI services. */
+    status?: ChatComposerStatus;
+    /** A manual audio level from 0 to 1, or a getter sampled by the voice effect. */
+    voiceLevel?: number | (() => number);
+    onStop?: () => void;
+    /** Elapsed time for the confirm action title; show the visible timer in ChatActivity. */
+    recordingSeconds?: number;
+    /** Confirm dictation; the app can transcribe it into the controlled draft. */
+    onRecordingConfirm?: () => void;
+    onRecordingCancel?: () => void;
+    /** Show decorative composer effects; action controls and accessible status remain. */
+    interactions?: boolean;
+    disabled?: boolean;
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+}
+/** Figma Chat Area 199714:167265. Services are supplied by the consuming app. */
+export declare const ChatComposer: React.ForwardRefExoticComponent<ChatComposerProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/magna/chat-composer.js

@@ -0,0 +1,122 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import * as React from "react";
+import { BorderBeam } from "../interactions/border-beam.js";
+import { VoiceBeam } from "../interactions/voice-beam.js";
+import * as Select from "../ui/select.js";
+import { cn } from "../../utils/cn.js";
+function Action({ label, icon, onClick, disabled, filled = false, }) {
+    return (_jsx("button", { type: 'button', "aria-label": label, title: label, onClick: onClick, disabled: disabled || !onClick, className: cn('flex size-[34px] shrink-0 items-center justify-center rounded-full transition hover:bg-bg-soft-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base disabled:opacity-40', filled && 'bg-bg-strong-950 hover:opacity-80'), children: _jsx("img", { src: __resolveMagnaAsset_1(`/magna/icons/${icon}.svg`), width: 18, height: 18, alt: '', className: cn('size-[18px]', 'dark:invert') }) }));
+}
+/** Figma Chat Area 199714:167265. Services are supplied by the consuming app. */
+export const ChatComposer = React.forwardRef(({ onSend, onAttach, onMicrophone, onVoice, models = ['Magna 1.1'], model, onModelChange, value, onValueChange, status = 'idle', voiceLevel = 0, onStop, recordingSeconds = 0, onRecordingConfirm, onRecordingCancel, interactions = true, disabled, dir = 'ltr', className, }, ref) => {
+    const textareaRef = React.useRef(null);
+    const setTextareaRef = React.useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const [draft, setDraft] = React.useState('');
+    const message = value ?? draft;
+    const updateMessage = (next) => {
+        if (value === undefined)
+            setDraft(next);
+        onValueChange?.(next);
+    };
+    const [selectedModel, setSelectedModel] = React.useState(models[0]);
+    const busy = status !== 'idle';
+    const recording = status === 'recording';
+    const voiceActive = status === 'listening' || status === 'speaking';
+    const finishActivity = (event, callback) => {
+        // A controlled callback can turn this same element into a submit button.
+        event.preventDefault();
+        if (disabled || !callback)
+            return;
+        textareaRef.current?.focus();
+        callback();
+    };
+    const elapsedSeconds = Math.max(0, Math.floor(Number.isFinite(recordingSeconds) ? recordingSeconds : 0));
+    const elapsed = `${Math.floor(elapsedSeconds / 60)
+        .toString()
+        .padStart(2, '0')}:${(elapsedSeconds % 60).toString().padStart(2, '0')}`;
+    const statusText = status === 'thinking'
+        ? 'Magna is thinking'
+        : recording
+            ? 'Recording message'
+            : status === 'listening'
+                ? 'Listening'
+                : status === 'speaking'
+                    ? 'Magna is speaking'
+                    : '';
+    const availableModels = Array.from(new Set(models.filter((m) => m.trim())));
+    const requestedModel = model ?? selectedModel;
+    const currentModel = availableModels.includes(requestedModel)
+        ? requestedModel
+        : (availableModels[0] ?? '');
+    const submit = () => {
+        if (disabled || busy || !message.trim())
+            return;
+        onSend(message.trim());
+        updateMessage('');
+    };
+    return (_jsxs("form", { dir: dir, "aria-label": 'Magna chat composer', onSubmit: (e) => {
+            e.preventDefault();
+            submit();
+        }, className: cn('relative isolate w-full max-w-[700px] rounded-[36px] border border-bg-soft-200 bg-bg-soft-200 p-2.5', className), children: [interactions && (_jsxs("div", { "aria-hidden": 'true', className: 'pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[36px]', style: { contain: 'paint' }, children: [_jsx(BorderBeam, { active: !disabled && status === 'thinking', colorVariant: 'forest', staticColors: true, borderRadius: 36, strength: 0.85, style: { position: 'absolute', inset: 0 }, children: _jsx("div", { className: 'h-full w-full rounded-[36px]' }) }), _jsx(VoiceBeam, { active: !disabled && (voiceActive || recording), paused: disabled, level: voiceLevel, colorVariant: 'forest', staticColors: true, bandColors: {
+                            core: '#effff6',
+                            above: '#18a86c',
+                            mid: '#70dda5',
+                            below: '#079662',
+                        }, borderRadius: 36, strength: 0.65, scale: 0.7, style: {
+                            position: 'absolute',
+                            inset: 0,
+                            maskImage: 'linear-gradient(to top, black 0, black 10px, transparent 30px)',
+                            WebkitMaskImage: 'linear-gradient(to top, black 0, black 10px, transparent 30px)',
+                        }, children: _jsx("div", { className: 'h-full w-full rounded-[36px]' }) })] })), _jsxs("div", { className: 'relative z-0 rounded-[28px] bg-bg-white-0 px-3 pb-3 pt-3.5 shadow-regular-sm', children: [_jsx("div", { role: 'status', "aria-atomic": 'true', className: 'sr-only', children: statusText }), _jsxs("div", { children: [_jsx("textarea", { ref: setTextareaRef, "aria-label": 'Message Magna', placeholder: 'New chat with Magna', value: message, onChange: (e) => updateMessage(e.target.value), disabled: disabled, rows: 1, onKeyDown: (e) => {
+                                    if (e.key === 'Enter' &&
+                                        !e.shiftKey &&
+                                        !e.nativeEvent.isComposing) {
+                                        e.preventDefault();
+                                        submit();
+                                    }
+                                }, className: 'mb-[25px] block min-h-6 w-full resize-none border-0 bg-transparent px-1 text-paragraph-md text-text-strong-950 outline-none placeholder:text-text-soft-400 disabled:opacity-50' }), _jsxs("div", { className: 'flex flex-nowrap items-center gap-2 sm:flex-wrap', children: [_jsxs("div", { className: 'flex min-w-0 shrink-0 items-center gap-1 sm:flex-1', children: [_jsx(Action, { label: 'Attach file', icon: 'add', onClick: onAttach, disabled: disabled || busy }), _jsxs("span", { title: 'Private Sovereignty', className: 'flex items-center gap-1 whitespace-nowrap text-[13px] font-medium text-text-soft-400', children: [_jsx("img", { src: __resolveMagnaAsset_1("/magna/icons/shield.svg"), alt: '', width: 16, height: 16, className: 'size-4' }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Private Sovereignty" })] })] }), _jsxs("div", { className: 'flex min-w-0 flex-1 items-center justify-end gap-1.5 sm:flex-none', children: [_jsxs(Select.Root, { variant: 'compact', size: 'xsmall', dir: dir, value: currentModel, disabled: disabled || busy || availableModels.length === 0, onValueChange: (nextModel) => {
+                                                    if (!availableModels.includes(nextModel))
+                                                        return;
+                                                    setSelectedModel(nextModel);
+                                                    onModelChange?.(nextModel);
+                                                }, children: [_jsx(Select.Trigger, { "aria-label": 'Chat model', className: 'h-[34px] max-w-36 shrink text-start text-label-sm', children: _jsx("span", { className: 'min-w-0 truncate', children: _jsx(Select.Value, { placeholder: 'Select model' }) }) }), _jsx(Select.Content, { align: 'end', className: 'min-w-[180px]', children: availableModels.map((m) => (_jsx(Select.Item, { value: m, children: m }, m))) })] }), _jsx("button", { type: 'button', "aria-label": recording ? 'Cancel recording' : 'Record message', title: recording ? 'Cancel recording' : 'Record message', onClick: recording
+                                                    ? (event) => finishActivity(event, onRecordingCancel)
+                                                    : onMicrophone, disabled: disabled ||
+                                                    (recording ? !onRecordingCancel : busy || !onMicrophone), className: 'flex size-[34px] shrink-0 items-center justify-center rounded-full text-text-sub-600 transition hover:bg-bg-soft-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base disabled:opacity-40', children: recording ? (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round' }) })) : (
+                                                // eslint-disable-next-line @next/next/no-img-element
+                                                _jsx("img", { src: __resolveMagnaAsset_1("/magna/icons/mic.svg"), width: 18, height: 18, alt: '', className: 'size-[18px] dark:invert' })) }), _jsx("button", { type: busy || !message.trim() ? 'button' : 'submit', "aria-label": recording
+                                                    ? 'Use recording'
+                                                    : voiceActive
+                                                        ? 'End voice chat'
+                                                        : status === 'thinking'
+                                                            ? 'Stop response'
+                                                            : message.trim()
+                                                                ? 'Send message'
+                                                                : 'Start voice chat', title: recording
+                                                    ? `Use recording (${elapsed})`
+                                                    : voiceActive
+                                                        ? 'End voice chat'
+                                                        : status === 'thinking'
+                                                            ? 'Stop response'
+                                                            : message.trim()
+                                                                ? 'Send message'
+                                                                : 'Start voice chat', onClick: busy
+                                                    ? (event) => finishActivity(event, recording ? onRecordingConfirm : onStop)
+                                                    : message.trim()
+                                                        ? undefined
+                                                        : onVoice, disabled: disabled ||
+                                                    (busy
+                                                        ? !(recording ? onRecordingConfirm : onStop)
+                                                        : !message.trim() && !onVoice), className: 'flex size-[34px] shrink-0 items-center justify-center rounded-full bg-bg-strong-950 text-text-white-0 transition hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base disabled:opacity-40', children: recording ? (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) })) : busy ? (_jsx("span", { "aria-hidden": 'true', className: 'size-3 rounded-sm bg-current' })) : message.trim() ? (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 19V5m-6 6 6-6 6 6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) })) : (
+                                                // eslint-disable-next-line @next/next/no-img-element
+                                                _jsx("img", { src: __resolveMagnaAsset_1("/magna/icons/voice.svg"), width: 18, height: 18, alt: '', className: 'size-[18px] dark:invert' })) })] })] })] })] })] }));
+});
+ChatComposer.displayName = 'ChatComposer';