aeon-ui-engine 1.3.1 → 1.4.0

package/packages/core/dist/index.d.ts

@@ -29,8 +29,9 @@ declare const dialogAnatomy: Record<"root" | "trigger" | "portal" | "backdrop" |
 /**
  * Prompt — confirm / permission / update-style dialog on top of Dialog.
  * Universal parts: eyebrow, meta, amount, actions (primary + secondary).
+ * Command-confirm face (BRC-218 §4): verb, recipient, effect.
  */
-declare const promptAnatomy: Record<"root" | "eyebrow" | "meta" | "amount" | "actions" | "primary" | "secondary", "root" | "eyebrow" | "meta" | "amount" | "actions" | "primary" | "secondary"> & {
+declare const promptAnatomy: Record<"root" | "eyebrow" | "meta" | "amount" | "verb" | "recipient" | "effect" | "actions" | "primary" | "secondary", "root" | "eyebrow" | "meta" | "amount" | "verb" | "recipient" | "effect" | "actions" | "primary" | "secondary"> & {
     scope: string;
 };
 /**
@@ -138,16 +139,21 @@ declare const conversationAnatomy: Record<"root" | "title" | "meta" | "body" | "
     scope: string;
 };
 /**
- * Thread — message stream. Items project mine | theirs | pending | failed.
+ * Thread — message stream.
+ * Item state: mine | theirs | pending | failed | command-result | payment-card | request-card.
+ * Bind = reply/message binding (BRC-218 §4.9–4.10, touch-reachable).
+ * Card parts = structured in-thread command results (pay / request / escrow / whois).
  */
-declare const threadAnatomy: Record<"root" | "meta" | "list" | "item" | "bubble" | "day", "root" | "meta" | "list" | "item" | "bubble" | "day"> & {
+declare const threadAnatomy: Record<"root" | "meta" | "list" | "item" | "bubble" | "day" | "bind" | "card" | "cardTitle" | "cardBody" | "cardActions", "root" | "meta" | "list" | "item" | "bubble" | "day" | "bind" | "card" | "cardTitle" | "cardBody" | "cardActions"> & {
     scope: string;
 };
 /**
- * Composer — bottom compose chrome for threads (input + send).
- * Root state: idle | sending | disabled | error.
+ * Composer — bottom compose chrome for threads.
+ * Root state: idle | sending | disabled | error | chat | command | lookup.
+ * Suggestions = slash-command / recipient palette (BRC-218 §4.4).
+ * Toolbar = verb shortcuts (/ pay request) without hover-only affordances.
  */
-declare const composerAnatomy: Record<"root" | "actions" | "input" | "send", "root" | "actions" | "input" | "send"> & {
+declare const composerAnatomy: Record<"root" | "actions" | "input" | "send" | "suggestions" | "suggestion" | "toolbar", "root" | "actions" | "input" | "send" | "suggestions" | "suggestion" | "toolbar"> & {
     scope: string;
 };
 declare const separatorAnatomy: Record<"root", "root"> & {
@@ -163,6 +169,12 @@ declare const radioGroupAnatomy: Record<"root" | "item" | "itemIndicator" | "ite
 declare const sliderAnatomy: Record<"root" | "thumb" | "track" | "range" | "valueText", "root" | "thumb" | "track" | "range" | "valueText"> & {
     scope: string;
 };
+declare const rangeSliderAnatomy: Record<"root" | "thumb" | "track" | "range" | "valueText", "root" | "thumb" | "track" | "range" | "valueText"> & {
+    scope: string;
+};
+declare const fileUploadAnatomy: Record<"root" | "label" | "hint" | "input" | "preview" | "dropzone" | "clearTrigger" | "rejectionMessage", "root" | "label" | "hint" | "input" | "preview" | "dropzone" | "clearTrigger" | "rejectionMessage"> & {
+    scope: string;
+};
 declare const pinInputAnatomy: Record<"root" | "input", "root" | "input"> & {
     scope: string;
 };
@@ -502,4 +514,20 @@ declare function brandPaletteToCssText(input: BrandPaletteInput, options?: {
     selector?: string;
 }): string;
 
-export { AEON_PRINCIPLE, AEON_THEME_TRANSITION_CLASS, type AeonActor, type AeonColorMode, type AeonContext, type AeonDataAttrs, type AeonEvent, type AeonPalette, type AeonSnapshot, type AeonStateValue, type AeonThemeDefinition, type ApplyBrandPaletteOptions, type BrandPalette, type BrandPaletteInput, DEFAULT_COMPACT_MQ, type FieldFace, type LayoutComposition, type LayoutCompositionSpec, type LayoutMode, NORM_PLANE, type NormOrigin, type NormPoint, type NormRect, type RegionLayoutSlot, type ResponsiveLayoutSpec, type ScrollOverflow, type ScrollSnapshot, UI_IS_FUNCTION_OF_STATE, accordionAnatomy, anatomy, appNavAnatomy, appShellAnatomy, applyAeonTheme, applyBrandPalette, asyncAnatomy, avatarAnatomy, barAnatomy, brandPaletteToCssText, brandPaletteToCssVars, buttonAnatomy, checkboxAnatomy, clampNorm, clientFromNorm, comboboxAnatomy, composerAnatomy, contentAnatomy, conversationAnatomy, dialogAnatomy, entryAnatomy, fieldAnatomy, fieldFace, fieldRegions, getCompactMq, getRegionValue, getScrollSnapshot, identityAnatomy, initAeonTheme, insetNormCluster, isAeonColorMode, isAeonMode, isAeonThemeId, layoutCompositionForMode, layoutModeAttrs, listRowAnatomy, matchLayoutMode, measureElement, menuAnatomy, metricStripAnatomy, navAnatomy, normFromClient, normalizeBrandPalette, panelAnatomy, partAttrs, partOnlyAttrs, pinInputAnatomy, playSurfaceAnatomy, popoverAnatomy, profileHeaderAnatomy, progressAnatomy, promptAnatomy, radioGroupAnatomy, regionBoundsForMode, regionLeaf, regionMatches, regionPath, registerAeonThemes, resolveAeonColorMode, resolveRegionRect, runAeonThemeTransition, scopeAttrs, scrollAnatomy, selectAnatomy, separatorAnatomy, sliderAnatomy, stateToAttr, statusBannerAnatomy, switchAnatomy, syncAeonColorMode, tabsAnatomy, themeSwitcherAnatomy, threadAnatomy, toastAnatomy, tooltipAnatomy };
+/**
+ * GitHub-style mirrored 5×5 identicon from an arbitrary seed.
+ * Useful as Avatar fallback when no photo/icon URL is available.
+ */
+/** FNV-1a 32-bit → expand to 16 bytes for grid + color. */
+declare function identiconSeedBytes(seed: string): Uint8Array;
+/** 5×5 mirrored boolean grid. */
+declare function identiconGrid(seed: string): boolean[][];
+declare function identiconColor(seed: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+/** SVG data URL for `<img src>` / CSS background. */
+declare function identiconDataUrl(seed: string, size?: number): string;
+
+export { AEON_PRINCIPLE, AEON_THEME_TRANSITION_CLASS, type AeonActor, type AeonColorMode, type AeonContext, type AeonDataAttrs, type AeonEvent, type AeonPalette, type AeonSnapshot, type AeonStateValue, type AeonThemeDefinition, type ApplyBrandPaletteOptions, type BrandPalette, type BrandPaletteInput, DEFAULT_COMPACT_MQ, type FieldFace, type LayoutComposition, type LayoutCompositionSpec, type LayoutMode, NORM_PLANE, type NormOrigin, type NormPoint, type NormRect, type RegionLayoutSlot, type ResponsiveLayoutSpec, type ScrollOverflow, type ScrollSnapshot, UI_IS_FUNCTION_OF_STATE, accordionAnatomy, anatomy, appNavAnatomy, appShellAnatomy, applyAeonTheme, applyBrandPalette, asyncAnatomy, avatarAnatomy, barAnatomy, brandPaletteToCssText, brandPaletteToCssVars, buttonAnatomy, checkboxAnatomy, clampNorm, clientFromNorm, comboboxAnatomy, composerAnatomy, contentAnatomy, conversationAnatomy, dialogAnatomy, entryAnatomy, fieldAnatomy, fieldFace, fieldRegions, fileUploadAnatomy, getCompactMq, getRegionValue, getScrollSnapshot, identiconColor, identiconDataUrl, identiconGrid, identiconSeedBytes, identityAnatomy, initAeonTheme, insetNormCluster, isAeonColorMode, isAeonMode, isAeonThemeId, layoutCompositionForMode, layoutModeAttrs, listRowAnatomy, matchLayoutMode, measureElement, menuAnatomy, metricStripAnatomy, navAnatomy, normFromClient, normalizeBrandPalette, panelAnatomy, partAttrs, partOnlyAttrs, pinInputAnatomy, playSurfaceAnatomy, popoverAnatomy, profileHeaderAnatomy, progressAnatomy, promptAnatomy, radioGroupAnatomy, rangeSliderAnatomy, regionBoundsForMode, regionLeaf, regionMatches, regionPath, registerAeonThemes, resolveAeonColorMode, resolveRegionRect, runAeonThemeTransition, scopeAttrs, scrollAnatomy, selectAnatomy, separatorAnatomy, sliderAnatomy, stateToAttr, statusBannerAnatomy, switchAnatomy, syncAeonColorMode, tabsAnatomy, themeSwitcherAnatomy, threadAnatomy, toastAnatomy, tooltipAnatomy };

package/packages/core/dist/index.js

@@ -42,6 +42,9 @@ var promptAnatomy = anatomy("prompt", [
   "eyebrow",
   "meta",
   "amount",
+  "verb",
+  "recipient",
+  "effect",
   "actions",
   "primary",
   "secondary"
@@ -204,13 +207,21 @@ var threadAnatomy = anatomy("thread", [
   "item",
   "bubble",
   "meta",
-  "day"
+  "day",
+  "bind",
+  "card",
+  "cardTitle",
+  "cardBody",
+  "cardActions"
 ]);
 var composerAnatomy = anatomy("composer", [
   "root",
   "input",
   "actions",
-  "send"
+  "send",
+  "suggestions",
+  "suggestion",
+  "toolbar"
 ]);
 var separatorAnatomy = anatomy("separator", ["root"]);
 var progressAnatomy = anatomy("progress", ["root", "track", "range", "label"]);
@@ -228,6 +239,23 @@ var sliderAnatomy = anatomy("slider", [
   "thumb",
   "valueText"
 ]);
+var rangeSliderAnatomy = anatomy("rangeSlider", [
+  "root",
+  "track",
+  "range",
+  "thumb",
+  "valueText"
+]);
+var fileUploadAnatomy = anatomy("fileUpload", [
+  "root",
+  "dropzone",
+  "input",
+  "label",
+  "hint",
+  "preview",
+  "clearTrigger",
+  "rejectionMessage"
+]);
 var pinInputAnatomy = anatomy("pinInput", ["root", "input"]);
 var barAnatomy = anatomy("bar", [
   "root",
@@ -673,6 +701,72 @@ function brandPaletteToCssText(input, options = {}) {
 ${body}
 }`;
 }
+
+// src/identicon.ts
+function identiconSeedBytes(seed) {
+  const s = seed.trim().toLowerCase() || "aeon";
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const out = new Uint8Array(16);
+  let x = h >>> 0;
+  for (let i = 0; i < 16; i++) {
+    x ^= x << 13;
+    x ^= x >>> 17;
+    x ^= x << 5;
+    out[i] = x >>> 0 & 255;
+  }
+  let h2 = 2166136261 ^ s.length;
+  for (let i = 0; i < s.length; i++) {
+    h2 ^= s.charCodeAt(s.length - 1 - i);
+    h2 = Math.imul(h2, 16777619);
+  }
+  for (let i = 0; i < 8; i++) {
+    out[i] ^= h2 >>> i % 4 * 8 & 255;
+  }
+  return out;
+}
+function identiconGrid(seed) {
+  const b = identiconSeedBytes(seed);
+  const grid = [];
+  let bit = 0;
+  for (let row = 0; row < 5; row++) {
+    const cells = [];
+    for (let col = 0; col < 3; col++) {
+      const byte = b[bit >> 3];
+      const on = (byte >> (bit & 7) & 1) === 1;
+      cells.push(on);
+      bit++;
+    }
+    grid.push([cells[0], cells[1], cells[2], cells[1], cells[0]]);
+  }
+  return grid;
+}
+function identiconColor(seed) {
+  const b = identiconSeedBytes(seed);
+  const h = Math.round((b[13] << 8 | b[14]) % 360);
+  const s = 55 + b[15] % 30;
+  const l = 42 + b[12] % 16;
+  return { h, s, l };
+}
+function identiconDataUrl(seed, size = 128) {
+  const grid = identiconGrid(seed);
+  const { h, s, l } = identiconColor(seed);
+  const cell = size / 5;
+  const fg = `hsl(${h} ${s}% ${l}%)`;
+  const bg = `hsl(${h} ${Math.max(12, s - 35)}% ${Math.min(92, l + 38)}%)`;
+  let rects = "";
+  for (let r = 0; r < 5; r++) {
+    for (let c = 0; c < 5; c++) {
+      if (!grid[r][c]) continue;
+      rects += `<rect x="${c * cell}" y="${r * cell}" width="${cell}" height="${cell}" fill="${fg}"/>`;
+    }
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><rect width="${size}" height="${size}" fill="${bg}"/>` + rects + `</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
 export {
   AEON_PRINCIPLE,
   AEON_THEME_TRANSITION_CLASS,
@@ -704,9 +798,14 @@ export {
   fieldAnatomy,
   fieldFace,
   fieldRegions,
+  fileUploadAnatomy,
   getCompactMq,
   getRegionValue,
   getScrollSnapshot,
+  identiconColor,
+  identiconDataUrl,
+  identiconGrid,
+  identiconSeedBytes,
   identityAnatomy,
   initAeonTheme,
   insetNormCluster,
@@ -733,6 +832,7 @@ export {
   progressAnatomy,
   promptAnatomy,
   radioGroupAnatomy,
+  rangeSliderAnatomy,
   regionBoundsForMode,
   regionLeaf,
   regionMatches,

package/packages/core/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":2.8135839999999916,"failed":false}],[":src/theme.test.ts",{"duration":2.691708999999989,"failed":false}],[":../../apps/demo/src/aeonSchemaCompiler.test.ts",{"duration":7.737041999999974,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":2.9991249999999923,"failed":false}],[":src/theme.test.ts",{"duration":2.946333999999993,"failed":false}],[":../../apps/demo/src/aeonSchemaCompiler.test.ts",{"duration":7.737041999999974,"failed":false}],[":src/identicon.test.ts",{"duration":4.611709000000005,"failed":false}]]}

package/packages/core/src/anatomy.ts

@@ -43,12 +43,16 @@ export const dialogAnatomy = anatomy('dialog', [
 /**
  * Prompt — confirm / permission / update-style dialog on top of Dialog.
  * Universal parts: eyebrow, meta, amount, actions (primary + secondary).
+ * Command-confirm face (BRC-218 §4): verb, recipient, effect.
  */
 export const promptAnatomy = anatomy('prompt', [
   'root',
   'eyebrow',
   'meta',
   'amount',
+  'verb',
+  'recipient',
+  'effect',
   'actions',
   'primary',
   'secondary',
@@ -269,7 +273,10 @@ export const conversationAnatomy = anatomy('conversation', [
 ] as const)
 
 /**
- * Thread — message stream. Items project mine | theirs | pending | failed.
+ * Thread — message stream.
+ * Item state: mine | theirs | pending | failed | command-result | payment-card | request-card.
+ * Bind = reply/message binding (BRC-218 §4.9–4.10, touch-reachable).
+ * Card parts = structured in-thread command results (pay / request / escrow / whois).
  */
 export const threadAnatomy = anatomy('thread', [
   'root',
@@ -278,17 +285,27 @@ export const threadAnatomy = anatomy('thread', [
   'bubble',
   'meta',
   'day',
+  'bind',
+  'card',
+  'cardTitle',
+  'cardBody',
+  'cardActions',
 ] as const)
 
 /**
- * Composer — bottom compose chrome for threads (input + send).
- * Root state: idle | sending | disabled | error.
+ * Composer — bottom compose chrome for threads.
+ * Root state: idle | sending | disabled | error | chat | command | lookup.
+ * Suggestions = slash-command / recipient palette (BRC-218 §4.4).
+ * Toolbar = verb shortcuts (/ pay request) without hover-only affordances.
  */
 export const composerAnatomy = anatomy('composer', [
   'root',
   'input',
   'actions',
   'send',
+  'suggestions',
+  'suggestion',
+  'toolbar',
 ] as const)
 
 export const separatorAnatomy = anatomy('separator', ['root'] as const)
@@ -312,6 +329,25 @@ export const sliderAnatomy = anatomy('slider', [
   'valueText',
 ] as const)
 
+export const rangeSliderAnatomy = anatomy('rangeSlider', [
+  'root',
+  'track',
+  'range',
+  'thumb',
+  'valueText',
+] as const)
+
+export const fileUploadAnatomy = anatomy('fileUpload', [
+  'root',
+  'dropzone',
+  'input',
+  'label',
+  'hint',
+  'preview',
+  'clearTrigger',
+  'rejectionMessage',
+] as const)
+
 export const pinInputAnatomy = anatomy('pinInput', ['root', 'input'] as const)
 
 /**

package/packages/core/src/identicon.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import {
+  identiconDataUrl,
+  identiconGrid,
+  identiconSeedBytes,
+} from './identicon.js'
+
+describe('identicon', () => {
+  it('is stable for the same seed (case-insensitive)', () => {
+    const a = identiconGrid('aa'.repeat(32) + '_0')
+    const b = identiconGrid('aa'.repeat(32) + '_0')
+    expect(a).toEqual(b)
+    expect(identiconDataUrl('aa'.repeat(32) + '_0')).toBe(
+      identiconDataUrl('AA'.repeat(32) + '_0'),
+    )
+  })
+
+  it('differs across seeds', () => {
+    const a = identiconDataUrl('aa'.repeat(32) + '_0')
+    const b = identiconDataUrl('bb'.repeat(32) + '_0')
+    expect(a).not.toBe(b)
+  })
+
+  it('mirrors the left half (GitHub-style)', () => {
+    const g = identiconGrid('demo')
+    expect(g).toHaveLength(5)
+    for (const row of g) {
+      expect(row).toHaveLength(5)
+      expect(row[0]).toBe(row[4])
+      expect(row[1]).toBe(row[3])
+    }
+  })
+
+  it('produces a data URL', () => {
+    const url = identiconDataUrl('GOON', 48)
+    expect(url.startsWith('data:image/svg+xml')).toBe(true)
+    expect(identiconSeedBytes('GOON')).toHaveLength(16)
+  })
+})

package/packages/core/src/identicon.ts

@@ -0,0 +1,79 @@
+/**
+ * GitHub-style mirrored 5×5 identicon from an arbitrary seed.
+ * Useful as Avatar fallback when no photo/icon URL is available.
+ */
+
+/** FNV-1a 32-bit → expand to 16 bytes for grid + color. */
+export function identiconSeedBytes(seed: string): Uint8Array {
+  const s = seed.trim().toLowerCase() || 'aeon'
+  let h = 0x811c9dc5
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i)
+    h = Math.imul(h, 0x01000193)
+  }
+  const out = new Uint8Array(16)
+  let x = h >>> 0
+  for (let i = 0; i < 16; i++) {
+    x ^= x << 13
+    x ^= x >>> 17
+    x ^= x << 5
+    out[i] = (x >>> 0) & 0xff
+  }
+  let h2 = 0x811c9dc5 ^ s.length
+  for (let i = 0; i < s.length; i++) {
+    h2 ^= s.charCodeAt(s.length - 1 - i)
+    h2 = Math.imul(h2, 0x01000193)
+  }
+  for (let i = 0; i < 8; i++) {
+    out[i] ^= (h2 >>> ((i % 4) * 8)) & 0xff
+  }
+  return out
+}
+
+/** 5×5 mirrored boolean grid. */
+export function identiconGrid(seed: string): boolean[][] {
+  const b = identiconSeedBytes(seed)
+  const grid: boolean[][] = []
+  let bit = 0
+  for (let row = 0; row < 5; row++) {
+    const cells: boolean[] = []
+    for (let col = 0; col < 3; col++) {
+      const byte = b[bit >> 3]!
+      const on = ((byte >> (bit & 7)) & 1) === 1
+      cells.push(on)
+      bit++
+    }
+    grid.push([cells[0]!, cells[1]!, cells[2]!, cells[1]!, cells[0]!])
+  }
+  return grid
+}
+
+export function identiconColor(seed: string): { h: number; s: number; l: number } {
+  const b = identiconSeedBytes(seed)
+  const h = Math.round(((b[13]! << 8) | b[14]!) % 360)
+  const s = 55 + (b[15]! % 30)
+  const l = 42 + (b[12]! % 16)
+  return { h, s, l }
+}
+
+/** SVG data URL for `<img src>` / CSS background. */
+export function identiconDataUrl(seed: string, size = 128): string {
+  const grid = identiconGrid(seed)
+  const { h, s, l } = identiconColor(seed)
+  const cell = size / 5
+  const fg = `hsl(${h} ${s}% ${l}%)`
+  const bg = `hsl(${h} ${Math.max(12, s - 35)}% ${Math.min(92, l + 38)}%)`
+  let rects = ''
+  for (let r = 0; r < 5; r++) {
+    for (let c = 0; c < 5; c++) {
+      if (!grid[r]![c]) continue
+      rects += `<rect x="${c * cell}" y="${r * cell}" width="${cell}" height="${cell}" fill="${fg}"/>`
+    }
+  }
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">` +
+    `<rect width="${size}" height="${size}" fill="${bg}"/>` +
+    rects +
+    `</svg>`
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+}

package/packages/core/src/index.ts

@@ -7,3 +7,4 @@ export * from './scroll.js'
 export * from './layout.js'
 export * from './theme.js'
 export * from './brand-theme.js'
+export * from './identicon.js'

package/packages/panda/panda.config.ts

@@ -31,6 +31,8 @@ import {
   progressRecipe,
   radioGroupRecipe,
   sliderRecipe,
+  rangeSliderRecipe,
+  fileUploadRecipe,
   pinInputRecipe,
   menuRecipe,
   popoverRecipe,
@@ -121,6 +123,8 @@ export default defineConfig({
         aeonProgress: progressRecipe,
         aeonRadioGroup: radioGroupRecipe,
         aeonSlider: sliderRecipe,
+        aeonRangeSlider: rangeSliderRecipe,
+        aeonFileUpload: fileUploadRecipe,
         aeonPinInput: pinInputRecipe,
         aeonSwitch: switchRecipe,
         aeonCheckbox: checkboxRecipe,

package/packages/panda/src/recipes/composer.ts

@@ -1,10 +1,19 @@
 import { defineSlotRecipe } from '@pandacss/dev'
 
-const slots = ['root', 'input', 'actions', 'send'] as const
+const slots = [
+  'root',
+  'input',
+  'actions',
+  'send',
+  'suggestions',
+  'suggestion',
+  'toolbar',
+] as const
 
 /**
  * Composer — bottom compose chrome for threads.
  * Hierarchy: input and send share controlMinHSm — input must never dwarf the action.
+ * States: idle | sending | disabled | error | chat | command | lookup
  */
 export const composerRecipe = defineSlotRecipe({
   className: 'aeonComposer',
@@ -18,20 +27,25 @@ export const composerRecipe = defineSlotRecipe({
       width: '100%',
       pt: '0.45rem',
       px: '0.1rem',
-      /* Clearance above dock / home indicator — input must not sit flush on chrome. */
       pb: '0.75rem',
       borderTopWidth: '1px',
       borderTopColor: 'border',
       bg: 'bg',
+      position: 'relative',
       '&[data-aeon-state=disabled]': { opacity: 0.55, pointerEvents: 'none' },
       '&[data-aeon-state=sending]': { opacity: 0.85 },
       '&[data-aeon-state=error]': {
         borderTopColor: 'danger',
       },
+      '&[data-aeon-state=command]': {
+        borderTopColor: 'accent',
+      },
+      '&[data-aeon-state=lookup]': {
+        borderTopColor: 'border',
+      },
     },
     input: {
       width: '100%',
-      /* Locked to Button sm — input must never dwarf the send action. */
       minH: 'controlMinHSm',
       h: 'controlMinHSm',
       maxH: '5.5rem',
@@ -70,12 +84,52 @@ export const composerRecipe = defineSlotRecipe({
       alignItems: 'stretch',
       justifyContent: 'center',
       minH: 'controlMinHSm',
-      /* Nested Button inherits the same control height — hierarchy stays honest. */
       '& > [data-aeon-scope=button], & > button': {
         minH: 'controlMinHSm',
         h: 'controlMinHSm',
         alignSelf: 'center',
       },
     },
+    toolbar: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.25rem',
+      gridColumn: '1 / -1',
+      order: -1,
+      mb: '0.25rem',
+    },
+    suggestions: {
+      listStyle: 'none',
+      margin: '0',
+      padding: '0.25rem',
+      display: 'grid',
+      gap: '0.15rem',
+      gridColumn: '1 / -1',
+      order: -1,
+      mb: '0.35rem',
+      maxH: '10rem',
+      overflowY: 'auto',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderColor: 'border',
+      bg: 'surface',
+    },
+    suggestion: {
+      display: 'flex',
+      alignItems: 'baseline',
+      gap: '0.5rem',
+      width: '100%',
+      textAlign: 'left',
+      px: '0.55rem',
+      py: '0.4rem',
+      borderRadius: 'md',
+      borderWidth: '0',
+      bg: 'transparent',
+      color: 'fg',
+      font: 'inherit',
+      fontSize: 'sm',
+      cursor: 'pointer',
+      _hover: { bg: 'surfaceRaised' },
+    },
   },
 })

package/packages/panda/src/recipes/file-upload.ts

@@ -0,0 +1,100 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const fileUploadRecipe = defineSlotRecipe({
+  className: 'aeonFileUpload',
+  slots: [
+    'root',
+    'dropzone',
+    'input',
+    'label',
+    'hint',
+    'preview',
+    'clearTrigger',
+    'rejectionMessage',
+  ],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      width: '100%',
+    },
+    label: {
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      fontWeight: 'medium',
+      color: 'fg',
+    },
+    dropzone: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 'gapSm',
+      width: '100%',
+      minH: '8rem',
+      px: '4',
+      py: '6',
+      borderWidth: '1px',
+      borderStyle: 'dashed',
+      borderColor: 'border',
+      borderRadius: 'lg',
+      bg: 'surface',
+      cursor: 'pointer',
+      transitionProperty: 'border-color, background',
+      transitionDuration: 'fast',
+      _focusVisible: { boxShadow: 'focusRing' },
+      '&[data-aeon-state=dragging]': {
+        borderColor: 'accent',
+        bg: 'accentDim',
+      },
+      '&[data-aeon-state=rejected]': {
+        borderColor: 'danger',
+      },
+      '&[data-disabled]': {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+      },
+    },
+    input: {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0',
+    },
+    hint: {
+      fontSize: 'xs',
+      fontFamily: 'ui',
+      color: 'muted',
+      textAlign: 'center',
+    },
+    preview: {
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      color: 'fg',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'gapSm',
+    },
+    clearTrigger: {
+      fontSize: 'xs',
+      fontFamily: 'ui',
+      color: 'muted',
+      textDecoration: 'underline',
+      cursor: 'pointer',
+      bg: 'transparent',
+      borderWidth: '0',
+      p: '0',
+    },
+    rejectionMessage: {
+      fontSize: 'xs',
+      fontFamily: 'ui',
+      color: 'danger',
+    },
+  },
+})

package/packages/panda/src/recipes/index.ts

@@ -30,5 +30,7 @@ export { separatorRecipe } from './separator.js'
 export { progressRecipe } from './progress.js'
 export { radioGroupRecipe } from './radio-group.js'
 export { sliderRecipe } from './slider.js'
+export { rangeSliderRecipe } from './range-slider.js'
+export { fileUploadRecipe } from './file-upload.js'
 export { pinInputRecipe } from './pin-input.js'
 export { menuRecipe, popoverRecipe, toastRecipe, tooltipRecipe } from './floating.js'