@luxfi/ui 7.4.9 → 7.4.11

package/src/toaster.tsx

@@ -1,89 +1,73 @@
 'use client';
 
-import type React from 'react';
-import { Toaster as SonnerToaster, toast } from 'sonner';
+import { Text, Toast, ToastProvider, ToastViewport, XStack, YStack } from '@hanzo/gui';
+import * as React from 'react';
+
+// Toasts, on the gui engine.
+//
+// The published surface is imperative — `toaster.error({ title })` from
+// anywhere, including code that is not a component — while gui's toast is a
+// hook (`useToastController`) that only a descendant of a provider can call.
+// The bridge is a module-level store: callers push onto it, `<Toaster/>`
+// subscribes with `useSyncExternalStore` and renders one gui `Toast` per entry.
+// That is the whole adaptation, and it is why `sonner` is gone rather than
+// wrapped — a second toast implementation would have been a second way to do
+// the same thing.
 
 const SECOND = 1_000;
 const DURATION = 10 * SECOND;
 
+type ToastType = 'info' | 'warning' | 'success' | 'error' | 'loading';
+
 interface ToastOptions {
   readonly id?: string | number;
   readonly title?: string;
   readonly description?: string;
-  readonly type?: 'info' | 'warning' | 'success' | 'error' | 'loading';
+  readonly type?: ToastType;
   readonly duration?: number;
   readonly action?: { readonly label: string; readonly onClick: () => void };
   readonly onStatusChange?: (details: { readonly status: string }) => void;
 }
 
-function mapOptions(opts: ToastOptions): Parameters<typeof toast>[1] {
-  const external: Parameters<typeof toast>[1] = {
-    id: opts.id,
-    description: opts.description,
-    duration: opts.duration,
-  };
-
-  if (opts.action) {
-    external.action = {
-      label: opts.action.label,
-      onClick: opts.action.onClick,
-    };
-  }
-
-  if (opts.onStatusChange) {
-    const cb = opts.onStatusChange;
-    external.onDismiss = () => cb({ status: 'unmounted' });
-    external.onAutoClose = () => cb({ status: 'unmounted' });
-  }
-
-  return external;
+interface Entry extends ToastOptions {
+  readonly id: string | number;
 }
 
-function create(opts: ToastOptions): string | number {
-  const external = mapOptions(opts);
-  const title = opts.title ?? '';
-
-  switch (opts.type) {
-    case 'success':
-      return toast.success(title, external);
-    case 'error':
-      return toast.error(title, external);
-    case 'warning':
-      return toast.warning(title, external);
-    case 'loading':
-      return toast.loading(title, external);
-    case 'info':
-    default:
-      return toast.info(title, external);
-  }
-}
+// ── the store ──────────────────────────────────────────────────────────────
 
-function update(id: string | number, opts: ToastOptions): void {
-  const title = opts.title ?? '';
-
-  // Sonner does not have a dedicated update method.
-  // Re-calling a typed toast with the same id replaces it in-place.
-  const external = mapOptions({ ...opts, id });
-
-  switch (opts.type) {
-    case 'success':
-      toast.success(title, external);
-      break;
-    case 'error':
-      toast.error(title, external);
-      break;
-    case 'warning':
-      toast.warning(title, external);
-      break;
-    case 'loading':
-      toast.loading(title, external);
-      break;
-    case 'info':
-    default:
-      toast.info(title, external);
-      break;
-  }
-}
+let entries: ReadonlyArray<Entry> = [];
+const listeners = new Set<() => void>();
+let counter = 0;
+
+const emit = () => listeners.forEach((l) => l());
+
+const subscribe = (l: () => void) => {
+  listeners.add(l);
+  return () => { listeners.delete(l); };
+};
+
+/** `useSyncExternalStore` compares by identity, so the array is replaced, never mutated. */
+const snapshot = () => entries;
+
+const remove = (id: string | number): void => {
+  const found = entries.find((e) => e.id === id);
+  entries = entries.filter((e) => e.id !== id);
+  emit();
+  found?.onStatusChange?.({ status: 'unmounted' });
+};
+
+const create = (opts: ToastOptions): string | number => {
+  const id = opts.id ?? `toast-${ ++counter }`;
+  const entry: Entry = { ...opts, id };
+  entries = [ ...entries.filter((e) => e.id !== id), entry ];
+  emit();
+  return id;
+};
+
+const update = (id: string | number, opts: ToastOptions): void => {
+  entries = entries.map((e) => (e.id === id ? { ...e, ...opts, id } : e));
+  emit();
+};
 
 export const toaster = {
   create,
@@ -91,27 +75,75 @@ export const toaster = {
   error: (opts: ToastOptions) => create({ ...opts, type: 'error' }),
   loading: (opts: ToastOptions) => create({ ...opts, type: 'loading' }),
   update,
-  remove: (id: string | number) => toast.dismiss(id),
+  remove,
 } as const;
 
+// ── presentation ───────────────────────────────────────────────────────────
+
+/** Border colour carries the severity; the surface stays the popover surface. */
+const EDGE: Record<ToastType, string> = {
+  success: 'var(--color-status-good)',
+  error: 'var(--color-status-bad)',
+  warning: 'var(--color-status-warn)',
+  loading: 'var(--color-border-divider)',
+  info: 'var(--color-border-divider)',
+};
+
+const One = ({ entry }: { entry: Entry }) => (
+  <Toast
+    key={ entry.id }
+    duration={ entry.duration ?? DURATION }
+    onOpenChange={ (open: boolean) => { if (!open) remove(entry.id); } }
+    unstyled
+    flexDirection="column"
+    gap={ 4 }
+    padding={ 12 }
+    borderRadius={ 8 }
+    borderWidth={ 1 }
+    borderColor={ EDGE[entry.type ?? 'info'] as never }
+    backgroundColor={ 'var(--color-popover-bg)' as never }
+    transition="quick"
+    enterStyle={{ opacity: 0, y: -8 }}
+    exitStyle={{ opacity: 0, y: -8 }}
+  >
+    { entry.title ? (
+      <Toast.Title unstyled fontSize={ 14 } fontWeight="600" color={ 'var(--color-text-primary)' as never }>
+        { entry.title }
+      </Toast.Title>
+    ) : null }
+    { entry.description ? (
+      <Toast.Description unstyled fontSize={ 13 } color={ 'var(--color-text-secondary)' as never }>
+        { entry.description }
+      </Toast.Description>
+    ) : null }
+    { /* Toast.Action is the accessible affordance and takes no styling of its
+         own; the look belongs to the Text it wraps. */ }
+    { entry.action ? (
+      <XStack marginTop={ 4 }>
+        <Toast.Action altText={ entry.action.label } onPress={ entry.action.onClick }>
+          <Text
+            cursor="pointer"
+            fontSize={ 13 }
+            fontWeight="500"
+            color={ 'var(--color-link-primary)' as never }
+          >
+            { entry.action.label }
+          </Text>
+        </Toast.Action>
+      </XStack>
+    ) : null }
+  </Toast>
+);
+
 export const Toaster: React.FC = () => {
+  const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+
   return (
-    <SonnerToaster
-      position="top-right"
-      richColors
-      closeButton
-      duration={ DURATION }
-      offset={{ top: 12, right: 12, bottom: 12, left: 12 }}
-      mobileOffset={{ top: 16, right: 16, bottom: 16, left: 16 }}
-      toastOptions={{
-        className: 'font-sans',
-        style: {
-          fontFamily: 'var(--font-sans, "Geist", sans-serif)',
-          color: 'var(--color-text-primary)',
-          backgroundColor: 'var(--color-bg-primary)',
-          borderColor: 'var(--color-border-divider)',
-        },
-      }}
-    />
+    <ToastProvider>
+      <YStack>
+        { list.map((entry) => <One key={ entry.id } entry={ entry }/>) }
+      </YStack>
+      <ToastViewport position="absolute" top={ 12 } right={ 12 }/>
+    </ToastProvider>
   );
 };

package/tokens.css

@@ -97,6 +97,7 @@
   /* --- Text --- */
   --color-text-primary: var(--lux-ink-80);
   --color-text-secondary: var(--lux-n-500);
+  --color-text-disabled: var(--lux-ink-24);
   --color-text-error: var(--lux-state-error);
   --color-text-success: var(--lux-state-success);
 
@@ -174,8 +175,17 @@
   --color-input-border: var(--lux-n-100);
   --color-input-border-hover: var(--lux-n-200);
   --color-input-border-focus: var(--lux-n-600);
+  /* Three states that were being ASKED for and never answered: input.tsx and
+     textarea.tsx reference these, and nothing declared them. Their written
+     fallback was `theme(colors.red.500)`-style, which is a Tailwind 3 function
+     that v4 does not resolve inside an arbitrary value — so the whole
+     declaration was discarded. An invalid field drew no error border and the
+     `filled` variant drew no fill, in both themes. */
+  --color-input-border-error: var(--lux-state-error);
+  --color-input-filled-bg: var(--lux-n-50);
   /* n-400 on white is 2.5:1 — under the 3:1 non-text minimum. n-500 clears it. */
   --color-input-placeholder: var(--lux-n-500);
+  --color-input-placeholder-focus: var(--lux-n-400);
 
   /* --- Tags --- */
   --color-tag-subtle-bg: var(--lux-ink-04);
@@ -277,6 +287,11 @@
   /* --- Controls --- */
   --color-switch-bg: var(--lux-n-300);
   --color-progress-track: var(--lux-n-100);
+  /* The FILL. Referenced by progress.tsx and never declared, so the bar drew
+     its track and nothing else. */
+  --color-progress-indicator: var(--lux-n-900);
+  /* The row highlight shared by every menu and popover list. */
+  --color-popover-item-hover: var(--lux-ink-06);
 
   /* --- Chrome / charts --- */
   --color-stats-bg: var(--lux-n-50);
@@ -488,6 +503,7 @@
   /* --- Text --- */
   --color-text-primary: var(--lux-paper-80);
   --color-text-secondary: var(--lux-n-400);
+  --color-text-disabled: var(--lux-paper-24);
   --color-text-error: var(--lux-state-error);
   --color-text-success: var(--lux-state-success);
 
@@ -565,7 +581,10 @@
   --color-input-border: var(--lux-n-800);
   --color-input-border-hover: var(--lux-n-700);
   --color-input-border-focus: var(--lux-n-400);
+  --color-input-border-error: var(--lux-state-error);
+  --color-input-filled-bg: var(--lux-n-800);
   --color-input-placeholder: var(--lux-n-500);
+  --color-input-placeholder-focus: var(--lux-n-600);
 
   /* --- Tags --- */
   --color-tag-subtle-bg: var(--lux-paper-06);
@@ -664,6 +683,8 @@
   /* --- Controls --- */
   --color-switch-bg: var(--lux-paper-24);
   --color-progress-track: var(--lux-paper-06);
+  --color-progress-indicator: var(--lux-n-0);
+  --color-popover-item-hover: var(--lux-paper-06);
 
   /* --- Chrome / charts --- */
   --color-stats-bg: var(--lux-paper-04);
@@ -838,6 +859,46 @@
 .lux-interactive:disabled,
 .lux-interactive[aria-disabled='true'] { transform: none }
 
+/* The floating field label. This is CSS rather than a gui prop because it keys
+   off the state of a SIBLING (`:focus` / `:placeholder-shown` of the control),
+   and a sibling combinator is a selector — there is no prop that expresses it.
+   The label rests centred over the empty control and rises into the top of the
+   frame once the control is focused or holds a value. */
+.lux-field-float {
+  transform: translateY(-50%);
+  transform-origin: top left;
+  transition: top var(--lux-dur-hover) var(--lux-ease-out),
+              transform var(--lux-dur-hover) var(--lux-ease-out);
+}
+.lux-field-control:focus ~ .lux-field-float,
+.lux-field-control:not(:placeholder-shown) ~ .lux-field-float {
+  top: 4px;
+  transform: translateY(0) scale(0.75);
+}
+
+/* An accordion row's label brightens while the ROW is hovered. Also a
+   selector — the state belongs to the row, the colour to the label inside it —
+   so the row sets a colour and its contents inherit. */
+.lux-accordion-trigger { color: var(--color-text-primary) }
+.lux-accordion-trigger:hover { color: var(--color-hover) }
+
+/* Text controls: the two states no prop reaches. `::placeholder` styles a
+   pseudo-element the input owns rather than the input, and `:read-only` is a
+   selector with no prop counterpart — gui offers disabled, hover and focus, not
+   this. Everything else about an Input or Textarea is a prop. */
+/* A keyframe is not a prop — gui's transitions interpolate between two states,
+   they do not loop. The spinner rotates forever, so it is CSS. */
+.lux-spin { animation: lux-spin 0.8s linear infinite }
+
+/* Size the ICON inside a control. A descendant selector has no prop form, so
+   the control publishes its icon size and this rule applies it. */
+.lux-icon svg { width: var(--icon-size, 20px); height: var(--icon-size, 20px) }
+
+.lux-control::placeholder { color: var(--color-input-placeholder) }
+.lux-control:focus::placeholder { color: var(--color-input-placeholder-focus) }
+.lux-control:read-only { opacity: 0.7 }
+.lux-control[data-invalid] { border-color: var(--color-input-border-error) }
+
 /* ================================================================
    6c — The loading state. Two primitives, one job each.