magnaui 0.1.0 → 0.2.0

package/LICENSES/HextaUI-MIT.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Preet Suthar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,22 +2,27 @@
 
 React components, theme tokens, and original Magna artwork for authorized Magna AI applications.
 
-**Usage terms:** Public package visibility permits downloading the distribution; it does not grant an open-source license to Magna-owned materials. Use is restricted to the owner and expressly authorized users under [LICENSE](LICENSE). Third-party materials retain their own terms in [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
+MagnaUI `0.2.0` includes AI conversation components, React 18.3 and React 19 support, RTL direction support, and isolated styles for Tailwind 4 applications.
+
+**Usage terms:** Public package visibility permits downloading the distribution; it does not grant an open-source license to Magna-owned materials. Use is restricted to the owner and expressly authorized users under `LICENSE` in the installed package. Third-party materials retain their own terms in `THIRD_PARTY_NOTICES.md`.
 
 ## Install
 
 ```sh
-npm install magnaui react@^18.3.1 react-dom@^18.3.1
+npm install magnaui@^0.2.0
 ```
 
-The package ships ESM JavaScript, TypeScript declarations, compiled CSS, fonts, and artwork. Use a modern React bundler such as Next.js or Vite that supports CSS Modules and static `new URL(..., import.meta.url)` assets. React 18.3 is the supported peer version. The package does not require Next.js or a Tailwind build in your application.
+Use matching `react` and `react-dom` versions: `^18.3.1` or `^19.0.0`. Next.js 15 applications can keep React 19. The package ships ESM JavaScript, TypeScript declarations, compiled CSS, fonts, and artwork. Use Next.js, Vite, or another modern bundler that supports CSS Modules and static package assets. Next.js itself is not a library dependency.
 
-Import the styles once at your application entry point. In Next.js App Router, import them from the root layout.
+Import the styles once in your application entry point. In Next.js App Router, import them from the root layout:
 
 ```tsx
 import 'magnaui/styles.css';
+import './globals.css'; // Include your Tailwind 4 setup here, if used.
 ```
 
+No Tailwind plugin, `@source` scan, or Tailwind 3 configuration is required for a package install. MagnaUI namespaces its compiled component classes, places styles in the `components.magnaui` cascade layer, and limits its reset to library elements. Normal Tailwind utility overrides remain above component defaults even if the bundler changes stylesheet order. Your application owns additional layout utilities and styles. Interactive MagnaUI modules preserve their `"use client"` boundary; add `"use client"` to your own component when using hooks or event handlers.
+
 ```tsx
 'use client';
 
@@ -25,9 +30,9 @@ import { Button, Checkbox, MagnaLogo } from 'magnaui';
 
 export function Workspace() {
   return (
-    <main>
-      <MagnaLogo variant="horizontal" label="Magna" />
-      <Checkbox.Label label="Send workspace updates" defaultChecked />
+    <main style={{ display: 'grid', gap: 16, padding: 24 }}>
+      <MagnaLogo variant='horizontal' label='Magna' />
+      <Checkbox.Label label='Send workspace updates' defaultChecked />
       <Button.Root onClick={() => console.log('Create workspace')}>
         Create workspace
       </Button.Root>
@@ -36,7 +41,7 @@ export function Workspace() {
 }
 ```
 
-The stylesheet includes the existing reset, semantic utilities, Inter, DM Mono, and Magna themes. Artwork URLs are resolved from the installed package by your bundler; there is no public-folder copy step or CDN dependency. CSS Modules remain next to their component files for the consuming bundler to process.
+The stylesheet includes scoped component styles, Inter, DM Mono, and Magna themes. Thmanyah font binaries are supplied by your application. Artwork URLs are resolved from the installed package by your bundler; there is no public-folder copy step or CDN dependency. CSS Modules remain next to their component files for the consuming bundler to process.
 
 For a narrower import, component modules also have subpaths:
 
@@ -46,6 +51,77 @@ import { MagnaLogo } from 'magnaui/magna';
 import { BorderBeam } from 'magnaui/interactions';
 ```
 
+## Included components
+
+MagnaUI `0.2.0` includes **68 base component families**, **10 Magna workspace components**, **7 interaction adapters**, and **7 AI conversation components**, with their public component parts and types.
+
+| Group              | Public component families                                                                                                                                                                                                                                       |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Actions            | `Button`, `ButtonGroup`, `CompactButton`, `FancyButton`, `LinkButton`, `SocialButton`                                                                                                                                                                           |
+| Forms and input    | `Checkbox`, `ColorPicker`, `CounterInput`, `DatePicker`, `DigitInput`, `FileUpload`, `Filter`, `Hint`, `InlineInput`, `Input`, `Label`, `PasswordStrength`, `Radio`, `Rating`, `RichEditor`, `Select`, `Slider`, `Switch`, `TagInput`, `Textarea`, `TimePicker` |
+| Navigation         | `Accordion`, `Breadcrumb`, `CommandMenu`, `DotStepper`, `HorizontalStepper`, `Pagination`, `SegmentedControl`, `TabMenuHorizontal`, `TabMenuVertical`, `VerticalStepper`                                                                                        |
+| Feedback           | `Alert`, `Banner`, `Notification`, `NotificationFeed`, `ProgressBar`, `ProgressCircle`, `StatusBadge`, `Tooltip`                                                                                                                                                |
+| Overlays           | `Drawer`, `Dropdown`, `Modal`, `Popover`, `StatusModal`                                                                                                                                                                                                         |
+| Data and content   | `ActivityFeed`, `ChartLegend`, `ContentCard`, `ContentLabel`, `Divider`, `Kbd`, `ScrollArea`, `Table`, `Tag`                                                                                                                                                    |
+| Identity and icons | `Avatar`, `AvatarEmptyIcons`, `AvatarGroup`, `AvatarGroupCompact`, `Badge`, `FileFormatIcon`, `KeyIcon`, `PaymentIcon`, `RatingIcons`                                                                                                                           |
+
+- **Magna workspace:** `AppIcon`, `AppLauncher`, `MagnaLogo`, `ChatComposer`, `ChatActivity`, `DesktopButton`, `DesktopSwitch`, `FileTile`, `MagnaNavigation`, and `ProjectContext`.
+- **AI conversations:** `ChatMessage`, `ChatConversation`, `ChatAttachment`, `ChatReasoning`, `ChatToolCall`, `ChatSources`, and `ChatSuggestions`.
+- **Interactions:** `BorderBeam`, `ThinkingOrb`, `BotAvatar`, `Liquid`, `VoiceBeam`, `MetalFx`, and `ImageGeneration`.
+- **Providers and helpers:** `ThemeProvider`, `useTheme`, `ThemeSwitch`, `TooltipProvider`, `NotificationProvider`, `notification`, `useNotification`, `useTabObserver`, `DirectionProvider`, `useDirection`, `createMagnaTheme`, and application, navigation, and logo metadata.
+- **Styles and assets:** compiled component CSS, light/dark themes, five preset accents, custom brand colors, two neutral palettes, 265 artwork files (including 40 application icons and 24 logo variants), and 11 self-hosted font files.
+
+Compound parts such as `Checkbox.Card`, `Switch.Integration`, `RichEditor.Toolbar`, and `FileUpload.Root` are included. Internal render helpers are bundled with the components that use them. The documentation app, gallery demos, and full Figma product screens are separate from the reusable package. Package coverage confirms availability; it does not certify every Figma variant visually.
+
+## Compose an AI conversation
+
+Use the new components with the existing `ChatComposer` and `ChatActivity`. `ChatMessage` supplies streaming, error, copy, retry, and feedback states; `ChatAttachment` displays upload progress and file actions. Add `ChatToolCall` for explicit approval and results, `ChatSources` for numbered citations, and `ChatReasoning` for app-provided progress summaries.
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import {
+  ChatComposer,
+  ChatConversation,
+  ChatMessage,
+  ChatSuggestions,
+} from 'magnaui';
+
+export function Conversation() {
+  const [draft, setDraft] = useState('');
+  const [messages, setMessages] = useState<string[]>([]);
+
+  return (
+    <div style={{ display: 'grid', gap: 16, maxWidth: 700 }}>
+      <ChatConversation emptyState={<p>What would you like to work on?</p>}>
+        {messages.map((message, index) => (
+          <ChatMessage key={index} role='user'>
+            {message}
+          </ChatMessage>
+        ))}
+      </ChatConversation>
+      <ChatSuggestions
+        suggestions={['Summarize a document', 'Plan the next steps']}
+        onSelect={setDraft}
+      />
+      <ChatComposer
+        value={draft}
+        onValueChange={setDraft}
+        onSend={(message) => {
+          setMessages((current) => [...current, message]);
+          setDraft('');
+        }}
+      />
+    </div>
+  );
+}
+```
+
+This example stores messages locally. Your application provides responses, streaming, file uploads, tool authorization, and audio services. Response steps are public progress summaries supplied by your app; `ChatReasoning` does not retrieve hidden model reasoning. Place `ChatActivity` in the conversation so the composer keeps its stable text and layout across thinking, recording, and voice modes.
+
+Run the repository documentation and open [AI Chat](http://localhost:3000/docs#ai-chat) for the integrated example, controls, and API references. The seven new components also export their named `Props` types; tool status and citations use `ChatToolCallStatus` and `ChatSource`.
+
 ## Themes and providers
 
 Wrap theme controls with `ThemeProvider`, tooltips with `TooltipProvider`, and mount the notification host once when using notifications. Ordinary buttons and fields do not need a provider.
@@ -58,7 +134,7 @@ import type { ReactNode } from 'react';
 
 export function Providers({ children }: { children: ReactNode }) {
   return (
-    <ThemeProvider attribute="class">
+    <ThemeProvider attribute='class'>
       <TooltipProvider>{children}</TooltipProvider>
       <NotificationProvider />
     </ThemeProvider>
@@ -66,8 +142,75 @@ export function Providers({ children }: { children: ReactNode }) {
 }
 ```
 
-The `dark` class selects dark mode. `data-primary` and `data-neutral` on the document element select palettes. Keep those attributes on the document element so portaled controls inherit the theme. Font families can be overridden through `--font-sans` and `--font-dm-mono`.
+The `dark` class selects dark mode. `data-accent` and `data-neutral` on the document element select palettes. Keep those attributes on the document element so portaled controls inherit the theme. Override the Latin and Arabic families with `--magna-font-sans` and `--magna-font-arabic`; `--magna-font-dm-mono` controls monospace text in the npm package. Existing direct token overrides must use the `--magna-` prefix; source-checkout CSS retains its original token names.
 
 Components keep their existing API: `Button.Root`, `Input.Input`, `Checkbox.Label`, and the other compound members. Your application supplies persistence, uploads, chat, and voice services through the component callbacks.
 
-The documentation and full source are maintained in the MagnaUI repository. Registry visibility does not change access to that repository.
+The documentation and full source are maintained in the [company MagnaUI repository](https://github.com/trend-mgai/magnaui). Registry visibility does not change access to that repository.
+
+## Arabic and RTL
+
+Wrap localized UI with `DirectionProvider`. It applies `dir` to the DOM and Radix context, keeping arrow-key navigation, slider progression, and layout consistent. `lang` also follows MagnaUI menus, dialogs, popovers, tooltips, and notifications across portals.
+
+```tsx
+'use client';
+
+import { DirectionProvider, Button } from 'magnaui';
+
+export function ArabicWorkspace() {
+  return (
+    <DirectionProvider dir='rtl' lang='ar'>
+      <Button.Root>إنشاء مساحة عمل</Button.Root>
+    </DirectionProvider>
+  );
+}
+```
+
+For a fully Arabic application, also set `<html dir="rtl" lang="ar">`. For bilingual sections, nest another provider with its own `dir` and `lang`. `asChild` applies those attributes to an existing element instead of adding a wrapper. OTP codes keep left-to-right character order intentionally; chat inherits its surrounding direction unless you pass an explicit `dir`.
+
+Supply Thmanyah Sans through your application’s authorized font files. This example assumes that **your application** places a variable WOFF2 font at the given path; adjust its weight declaration to match your actual file:
+
+```css
+@font-face {
+  font-family: 'Thmanyah Sans';
+  src: url('/fonts/ThmanyahSans.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --magna-font-sans: 'Magna Inter', sans-serif;
+  --magna-font-arabic: 'Thmanyah Sans', sans-serif;
+}
+```
+
+Alternatively use `next/font/local` and assign its family variable to `--magna-font-arabic`. Arabic `lang` selects this family; direction alone does not identify a language. MagnaUI includes Inter and DM Mono, but does not bundle or download Thmanyah font files.
+
+## Custom brand colors
+
+`createMagnaTheme` accepts a `primary` color in `#RGB` or `#RRGGBB` format, optional `darkPrimary` in the same format, `fontSans`, and `fontArabic`. Apply its style object and `data-accent="custom"` to the document root so portaled components share the palette:
+
+```tsx
+import { createMagnaTheme } from 'magnaui';
+
+const magnaTheme = createMagnaTheme({
+  primary: '#8a1538',
+  darkPrimary: '#b54162',
+  fontSans: '"Magna Inter", sans-serif',
+  fontArabic: '"Thmanyah Sans", sans-serif',
+});
+
+<html lang='ar' dir='rtl' data-accent='custom' style={magnaTheme}>
+  <body>{children}</body>
+</html>;
+```
+
+The helper derives light/dark semantic accent values and focus treatments while preserving Magna geometry. `darkPrimary` defaults to `primary` when omitted. Filled controls retain white text, so choose accents with sufficient white-text contrast and review both modes. Keep `ThemeProvider attribute="class"` when switching modes. Use your app’s CSS or Tailwind utilities for custom layouts, and semantic CSS variables such as `var(--magna-primary-base)` for custom colored surfaces; the package’s compiled utility names are internal.
+
+## Upgrading from 0.1.x
+
+- Keep the `magnaui/styles.css` import alongside your application stylesheet. The nested `components.magnaui` layer preserves the priority of normal Tailwind utilities independently of stylesheet order. MagnaUI no longer supplies global resets or generic utility classes to unrelated application elements. Add any layout/reset your application previously relied on.
+- React and React DOM must use matching major versions. Both React 18.3 and React 19 are supported; do not suppress peer dependency errors with `--legacy-peer-deps`.
+- The calendar now uses React DayPicker 9. Standard selection and range props remain available. Advanced custom renderers should use DayPicker 9 slot signatures, including `Chevron`. Legacy `IconLeft`, `IconRight`, and `IconDropdown` adapters and legacy class-name mappings remain available. Set `classNamesVersion={9}` when using the v9 `day` cell class; a lone `day` override retains the v8 day-button interpretation unless this is set. `classNamesVersion={8}` explicitly requests legacy mapping.
+- Apply `DirectionProvider dir="rtl" lang="ar"` for Arabic keyboard behavior and fonts. Load your authorized Thmanyah font through the consuming application.

package/THIRD_PARTY_NOTICES.md

@@ -70,3 +70,17 @@ The RichEditor component uses Tiptap 3.31.3 and its ProseMirror dependencies. Th
 Tiptap packages retain their [MIT license](LICENSES/Tiptap-MIT.txt), copyright
 (c) 2025 Tiptap GmbH. Dependency notices remain in their distributed packages.
 MagnaUI supplies the Figma toolbar presentation, public API, and documentation.
+
+## HextaUI conversation patterns
+
+MagnaUI's chat message, attachment, and conversation components adapt patterns
+from [HextaUI](https://github.com/preetsuthar17/hextaui) by Preet Suthar,
+revision `c4e4caf60ea920f1c7759dda7ec77d54e42da065`. The referenced modules are
+`components/ui/message.tsx`, `bubble.tsx`, `attachment.tsx`, and
+`message-scroller.tsx`. Their [complete MIT license](LICENSES/HextaUI-MIT.txt),
+copyright (c) 2026 Preet Suthar, is retained.
+
+The MagnaUI adaptation uses Magna tokens, React 18, existing Magna primitives,
+and native browser scrolling. It does not require HextaUI's application, Base UI,
+or its shadcn message-scroller dependency. Response details, sources, suggestions,
+and local examples are integrated into the MagnaUI public API.

package/dist/components/interactions/border-beam.js

@@ -10,6 +10,6 @@ export const BorderBeam = React.forwardRef(function BorderBeam({ theme = 'auto',
     React.useEffect(() => setMounted(true), []);
     // The upstream style element must mount in the browser: SSR escapes its CSS text.
     if (!mounted)
-        return _jsx("div", { ...props, ref: ref });
+        return _jsx("div", { ...props, ref: ref, "data-magnaui": '' });
     return (_jsx(Primitive, { ...props, ref: ref, theme: theme === 'auto' ? preferences.theme : theme, active: active && !preferences.reducedMotion, size: size, colorVariant: colorVariant, staticColors: staticColors, duration: duration, borderRadius: borderRadius, brightness: brightness, saturation: saturation, glowSize: glowSize, hueRange: hueRange, strength: strength, css: css, onActivate: onActivate, onDeactivate: onDeactivate }));
 });

package/dist/components/interactions/image-generation.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
 import * as React from "react";
 import { useInteractionPreferences } from "./preferences.js";
 const ImageGenerationPrimitive = React.lazy(async () => ({
@@ -68,19 +69,19 @@ export const ImageGeneration = React.forwardRef(function ImageGeneration({ child
     const firstImage = typeof props.images === 'string' ? props.images : props.images?.[0];
     const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectKeys.has(key)));
     const resolvedTheme = theme === 'auto' ? preferences.theme : theme;
-    const staticContent = (_jsx("div", { ...htmlProps, ref: fallbackRef, className: className, "data-image-generation-fallback": '', "data-theme": resolvedTheme, style: {
+    const staticContent = (_jsx("div", { ...htmlProps, ref: fallbackRef, className: __magnaClasses_1(className, className), "data-image-generation-fallback": '', "data-theme": resolvedTheme, style: {
             position: 'relative',
             display: 'inline-block',
             overflow: 'hidden',
             verticalAlign: 'top',
-            background: props.cardBg ?? 'var(--bg-weak-50)',
+            background: props.cardBg ?? "var(--magna-bg-weak-50)",
             borderRadius: props.borderRadius ?? 20,
             ...style,
-        }, children: fallback ?? (_jsxs(_Fragment, { children: [children, firstImage && failedImage !== firstImage && (
+        }, "data-magnaui": '', children: fallback ?? (_jsxs(_Fragment, { children: [children, firstImage && failedImage !== firstImage && (
                 // Keep a native image: these are caller-owned local or data URLs.
                 // eslint-disable-next-line @next/next/no-img-element
-                _jsx("img", { src: firstImage, alt: fallbackAlt, className: 'pointer-events-none absolute inset-0 size-full object-cover', onError: () => setFailedImage(firstImage) }))] })) }));
+                _jsx("img", { src: firstImage, alt: fallbackAlt, className: __magnaClasses_1('pointer-events-none absolute inset-0 size-full object-cover'), onError: () => setFailedImage(firstImage), "data-magnaui": '' }))] })) }));
     if (!supported || preferences.reducedMotion)
         return staticContent;
-    return (_jsx(ImageEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(ImageGenerationPrimitive, { ...props, ref: effectRef, theme: resolvedTheme, className: className, cardBg: props.cardBg ?? (resolvedTheme === 'dark' ? '#171717' : '#ffffff'), style: style, children: children }) }) }, props.preset));
+    return (_jsx(ImageEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(ImageGenerationPrimitive, { ...props, ref: effectRef, theme: resolvedTheme, className: __magnaClasses_1(className, className), cardBg: props.cardBg ?? (resolvedTheme === 'dark' ? '#171717' : '#ffffff'), style: style, "data-magnaui": '', children: children }) }) }, props.preset));
 });

package/dist/components/interactions/liquid.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Liquid as LiquidPrimitive, } from "liquid-gooey";
 import { useInteractionPreferences } from "./preferences.js";
-const LiquidRoot = React.forwardRef(function Liquid({ fill = 'var(--primary-base)', waviness, ...props }, ref) {
+const LiquidRoot = React.forwardRef(function Liquid({ fill = "var(--magna-primary-base)", waviness, ...props }, ref) {
     const { reducedMotion } = useInteractionPreferences();
     return (_jsx(LiquidPrimitive, { ...props, ref: ref, fill: fill, waviness: reducedMotion ? 0 : waviness }));
 });

package/dist/components/interactions/metal-fx.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
 import * as React from "react";
 import { useInteractionPreferences } from "./preferences.js";
 const MetalFxPrimitive = React.lazy(async () => ({
@@ -38,14 +39,14 @@ export const MetalFx = React.forwardRef(function MetalFx({ children, theme = 'au
     const [mounted, setMounted] = React.useState(false);
     React.useEffect(() => setMounted(true), []);
     const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectKeys.has(key)));
-    const staticContent = (_jsx("div", { ...htmlProps, ref: ref, className: className, style: { display: 'inline-flex', ...style }, children: children }));
+    const staticContent = (_jsx("div", { ...htmlProps, ref: ref, className: __magnaClasses_1(className, className), style: { display: 'inline-flex', ...style }, "data-magnaui": '', children: children }));
     // The upstream capability probe caches its answer. Mount it only in the
     // browser, so server rendering cannot cache an unsupported result.
     if (!mounted)
         return staticContent;
-    return (_jsx(MetalEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(MetalFxPrimitive, { ...props, ref: ref, className: className, theme: theme === 'auto' ? preferences.theme : theme, paused: paused || preferences.reducedMotion, normalizeHostStyles: normalizeHostStyles, style: {
-                    background: 'var(--bg-white-0)',
-                    color: 'var(--text-strong-950)',
+    return (_jsx(MetalEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(MetalFxPrimitive, { ...props, ref: ref, className: __magnaClasses_1(className, className), theme: theme === 'auto' ? preferences.theme : theme, paused: paused || preferences.reducedMotion, normalizeHostStyles: normalizeHostStyles, style: {
+                    background: "var(--magna-bg-white-0)",
+                    color: "var(--magna-text-strong-950)",
                     ...style,
-                }, children: children }) }) }));
+                }, "data-magnaui": '', children: children }) }) }));
 });

package/dist/components/interactions/voice-beam.js

@@ -27,7 +27,7 @@ export const VoiceBeam = React.forwardRef(function VoiceBeam({ theme, paused, st
     // hydration so its CSS and feature-dependent markup never disagree with SSR.
     if (!mounted) {
         const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectPropNames.has(key)));
-        return (_jsx("div", { ...htmlProps, ref: ref, children: props.children }));
+        return (_jsx("div", { ...htmlProps, ref: ref, "data-magnaui": '', children: props.children }));
     }
     return (_jsx(VoiceBeamPrimitive, { ...props, ref: ref, theme: theme === undefined || theme === 'auto' ? preferences.theme : theme, paused: preferences.reducedMotion || paused, staticColors: preferences.reducedMotion || staticColors, processing: preferences.reducedMotion ? false : processing, flow: preferences.reducedMotion ? 0 : flow }));
 });

package/dist/components/magna/app-icon.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
 import { cn } from "../../utils/cn.js";
 import { magnaApps } from "./apps.js";
 /** Transparent 2x PNG exports of the original Figma icon components. */
@@ -8,8 +9,8 @@ export function AppIcon({ app, size = 48, className, decorative = false, }) {
     return (
     // Keep the exported artwork usable outside Next.js as a source component.
     // eslint-disable-next-line @next/next/no-img-element
-    _jsx("img", { src: asset.src, alt: decorative ? '' : asset.name, width: size, height: size, className: cn('shrink-0 object-contain', className), style: { width: size, height: size } }));
+    _jsx("img", { src: asset.src, alt: decorative ? '' : asset.name, width: size, height: size, className: __magnaClasses_1(__magnaClasses_1(cn('shrink-0 object-contain', className), className), className), style: { width: size, height: size }, "data-magnaui": '' }));
 }
 export function AppLauncher({ apps = magnaApps.map((a) => a.id), onLaunch, className, }) {
-    return (_jsx("div", { className: cn('grid grid-cols-3 gap-5 sm:grid-cols-5 lg:grid-cols-8', className), children: apps.map((id) => (_jsxs("button", { type: 'button', onClick: () => onLaunch(id), className: 'flex min-w-0 flex-col items-center gap-2 rounded-2xl p-2 transition hover:bg-bg-weak-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', children: [_jsx(AppIcon, { app: id, size: 52, decorative: true }), _jsx("span", { className: 'w-full truncate text-center text-label-xs', children: magnaApps.find((a) => a.id === id)?.name })] }, id))) }));
+    return (_jsx("div", { className: __magnaClasses_1(__magnaClasses_1(cn('grid grid-cols-3 gap-5 sm:grid-cols-5 lg:grid-cols-8', className), className), className), "data-magnaui": '', children: apps.map((id) => (_jsxs("button", { type: 'button', onClick: () => onLaunch(id), className: __magnaClasses_1('flex min-w-0 flex-col items-center gap-2 rounded-2xl p-2 transition hover:bg-bg-weak-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base'), "data-magnaui": '', children: [_jsx(AppIcon, { app: id, size: 52, decorative: true }), _jsx("span", { className: __magnaClasses_1('w-full truncate text-center text-label-xs'), "data-magnaui": '', children: magnaApps.find((a) => a.id === id)?.name })] }, id))) }));
 }

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

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
 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, }) {
+export function ChatActivity({ status = 'idle', voiceLevel = 0, recordingSeconds = 0, interactions = true, disabled = false, dir, className, }) {
     if (status === 'idle')
         return null;
     const voice = status === 'listening' || status === 'speaking';
@@ -20,10 +21,10 @@ export function ChatActivity({ status = 'idle', voiceLevel = 0, recordingSeconds
     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
+    return (_jsxs("div", { role: 'group', "aria-label": 'Message activity', dir: dir, className: __magnaClasses_1(__magnaClasses_1(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: [
+            : 'space-y-3 py-2', className), className), className), "data-magnaui": '', children: [voice && interactions && (_jsx(VoiceOrb, { state: status, level: voiceLevel, paused: disabled })), _jsxs("div", { className: __magnaClasses_1('flex items-center gap-2 text-label-sm'), "data-magnaui": '', children: [status === 'thinking' && interactions && (_jsx("span", { "aria-hidden": 'true', className: __magnaClasses_1('shrink-0'), "data-magnaui": '', children: _jsx(ThinkingOrb, { state: 'weaving', size: 20, paused: disabled }) })), _jsx("span", { "data-magnaui": '', children: label })] }), status === 'recording' && (_jsxs("div", { className: __magnaClasses_1('flex max-w-[280px] items-center gap-4'), "data-magnaui": '', children: [interactions && (_jsx("span", { "aria-hidden": 'true', className: __magnaClasses_1(__magnaClasses_1(cn(styles.waveform, 'min-w-0 flex-1 text-success-base'))), "data-paused": disabled || undefined, "data-magnaui": '', 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 })] }))] }));
+                        ].map((height, index) => (_jsx("span", { style: { height, animationDelay: `${index * -0.11}s` }, "data-magnaui": '' }, 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: __magnaClasses_1('shrink-0 font-mono text-label-sm tabular-nums'), "data-magnaui": '', children: elapsed })] }))] }));
 }

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface ChatAttachmentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    name: string;
+    description?: string;
+    status?: 'ready' | 'uploading' | 'processing' | 'error';
+    /** Upload percentage from 0 to 100. Omit for indeterminate progress. */
+    progress?: number;
+    onRemove?: () => void;
+    onRetry?: () => void;
+    onOpen?: () => void;
+    disabled?: boolean;
+}
+/** A controlled file preview; uploading and opening files are app responsibilities. */
+export declare const ChatAttachment: React.ForwardRefExoticComponent<ChatAttachmentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { magnaClasses as __magnaClasses_1 } from "../../magna-classes.js";
+import * as React from "react";
+import { RiCloseLine, RiErrorWarningLine, RiFileTextLine, RiLoader4Line, RiRefreshLine, } from "@remixicon/react";
+import * as CompactButton from "../ui/compact-button.js";
+import { cn } from "../../utils/cn.js";
+/** A controlled file preview; uploading and opening files are app responsibilities. */
+export const ChatAttachment = React.forwardRef(function ChatAttachment({ name, description, status = 'ready', progress, onRemove, onRetry, onOpen, disabled = false, className, ...props }, ref) {
+    const titleId = React.useId();
+    const statusId = React.useId();
+    const uploading = status === 'uploading';
+    const processing = status === 'processing';
+    const failed = status === 'error';
+    const value = progress === undefined
+        ? undefined
+        : Number.isFinite(progress)
+            ? Math.min(100, Math.max(0, progress))
+            : 0;
+    const statusLabel = uploading
+        ? value === undefined
+            ? 'Uploading…'
+            : `Uploading ${Math.round(value)}%`
+        : processing
+            ? 'Processing…'
+            : failed
+                ? 'Upload failed'
+                : 'Ready';
+    const dot = name.lastIndexOf('.');
+    const hasExtension = dot > 0 && dot < name.length - 1 && name.length - dot <= 8;
+    const title = (_jsxs("span", { id: titleId, title: name, className: __magnaClasses_1('flex min-w-0 text-label-sm text-text-strong-950'), "data-magnaui": '', children: [_jsx("span", { className: __magnaClasses_1('truncate'), "data-magnaui": '', children: hasExtension ? name.slice(0, dot) : name }), hasExtension && _jsx("span", { className: __magnaClasses_1('shrink-0'), "data-magnaui": '', children: name.slice(dot) })] }));
+    const details = (_jsxs(_Fragment, { children: [title, description && (_jsx("span", { className: __magnaClasses_1('mt-0.5 block truncate text-paragraph-xs text-text-soft-400'), "data-magnaui": '', children: description }))] }));
+    return (_jsxs("div", { ref: ref, "data-slot": 'chat-attachment', "data-state": status, className: __magnaClasses_1(__magnaClasses_1(cn('relative flex w-72 min-w-0 max-w-full items-center gap-2.5 rounded-2xl border border-stroke-soft-200 bg-bg-white-0 p-2.5 text-start shadow-regular-xs', failed && 'border-error-base/30', disabled && 'opacity-60', className), className), className), ...props, "data-magnaui": '', children: [_jsx("span", { "aria-hidden": 'true', className: __magnaClasses_1(__magnaClasses_1(cn('flex size-10 shrink-0 items-center justify-center rounded-xl bg-bg-weak-50 text-text-sub-600', status === 'ready' && 'bg-success-lighter text-success-dark', failed && 'bg-error-lighter text-error-base'))), "data-magnaui": '', children: failed ? (_jsx(RiErrorWarningLine, { className: __magnaClasses_1('size-5'), "data-magnaui": '' })) : uploading || processing ? (_jsx(RiLoader4Line, { className: __magnaClasses_1('size-5 motion-safe:animate-spin'), "data-magnaui": '' })) : (_jsx(RiFileTextLine, { className: __magnaClasses_1('size-5'), "data-magnaui": '' })) }), _jsxs("div", { className: __magnaClasses_1('min-w-0 flex-1'), "data-magnaui": '', children: [onOpen ? (_jsx("button", { type: 'button', onClick: onOpen, disabled: disabled || status !== 'ready', "aria-label": `Open ${name}`, "aria-describedby": statusId, className: __magnaClasses_1('block w-full min-w-0 rounded-md text-start outline-none hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-base disabled:cursor-default disabled:no-underline'), "data-magnaui": '', children: details })) : (details), _jsx("span", { id: statusId, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', className: __magnaClasses_1(__magnaClasses_1(cn('mt-0.5 block text-paragraph-xs text-text-sub-600', failed && 'text-error-base', status === 'ready' && description && 'sr-only'))), "data-magnaui": '', children: statusLabel })] }), (onRemove || (failed && onRetry)) && (_jsxs("div", { className: __magnaClasses_1('flex shrink-0 items-center gap-0.5'), "data-magnaui": '', children: [failed && onRetry && (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', className: __magnaClasses_1('size-8'), "aria-label": `Retry ${name}`, title: 'Retry upload', onClick: onRetry, disabled: disabled, "data-magnaui": '', children: _jsx(CompactButton.Icon, { as: RiRefreshLine, "aria-hidden": 'true', className: __magnaClasses_1('size-4'), "data-magnaui": '' }) })), onRemove && (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', className: __magnaClasses_1('size-8'), "aria-label": `Remove ${name}`, title: 'Remove attachment', onClick: onRemove, disabled: disabled, "data-magnaui": '', children: _jsx(CompactButton.Icon, { as: RiCloseLine, "aria-hidden": 'true', className: __magnaClasses_1('size-4'), "data-magnaui": '' }) }))] })), uploading && (_jsx("div", { role: 'progressbar', "aria-labelledby": titleId, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, "aria-valuetext": statusLabel, className: __magnaClasses_1('pointer-events-none absolute inset-x-3 bottom-0 h-0.5 overflow-hidden rounded-full bg-bg-soft-200'), "data-magnaui": '', children: value !== undefined && (_jsx("span", { className: __magnaClasses_1('block h-full rounded-full bg-success-base'), style: { width: `${value}%` }, "data-magnaui": '' })) }))] }));
+});
+ChatAttachment.displayName = 'ChatAttachment';

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

@@ -11,6 +11,13 @@ export interface ChatComposerProps {
     /** Controlled draft; omit to keep the draft inside the composer. */
     value?: string;
     onValueChange?: (value: string) => void;
+    /** File chips or other selected context, controlled by the consuming app. */
+    attachments?: React.ReactNode;
+    /** Prevent sending while attachments or another prerequisite are pending. */
+    sendDisabled?: boolean;
+    /** Optional validation or service error; the consuming app owns recovery. */
+    error?: string;
+    maxLength?: number;
     /** 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. */