@tradalab/lyra 3.3.0 → 3.4.0

package/README.md

@@ -27,6 +27,7 @@ The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
 | `@tradalab/lyra/utils` | `cn` | server-safe |
 | `@tradalab/lyra/hooks` | `useMobile` | client |
 | `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container`, `EmptyState`, `StatusBadge` | client |
+| `@tradalab/lyra/blocks` | `Form`/`FormField` + RHF glue, `Panel`, `Confirm`/`useConfirm`, `Tree`, `TzPicker`, `OptionPicker`, `McpSettings`, `LlmSettings`, `PlatePicker`, `usePlate`, `useCompact`, `PreferenceScript` | client |
 | `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
 | `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
 
@@ -61,6 +62,37 @@ Infinity`). Position belongs to the viewport this package styles, so sonner's
 `position` and `richColors` props have no equivalent. Mount `<Toaster/>` once —
 apps on `@tradalab/nekit` already get it from `NekitProvider`.
 
+## Plate and density
+
+`3.4.0` added a palette the reader picks. The colours live in `styles.css` behind
+`[data-plate="<name>"]`, so an app only wires the choice:
+
+```tsx
+import { PlatePicker, PreferenceScript, useCompact, usePlate } from "@tradalab/lyra/blocks"
+
+// In the root layout, as early in the tree as possible.
+<PreferenceScript />
+
+// On a settings screen.
+const [plate, setPlate] = usePlate()
+<PlatePicker value={plate} onChange={setPlate} label="Accent colour" resetLabel="Default" />
+```
+
+`usePlate` and `useCompact` remember the choice per DEVICE, in `localStorage`
+under `lyra.plate` and `lyra.compact`, which is the same granularity as the
+theme. Absence means the default, so turning one off removes its key rather than
+storing "off".
+
+Keep `suppressHydrationWarning` on `<html>`. The script writes attributes the
+server did not render, which is the same reason `next-themes` needs it; every
+tradalab layout and `template-web` already carry it.
+
+Leaving out `<PreferenceScript />` is neither a compile error nor a runtime one.
+The attributes then arrive from an effect, so the first paint is always the
+neutral default and every reader who chose a colour watches it flip. It has to be
+a raw inline script to beat that paint, which is why lyra renders it instead of
+leaving it to each app.
+
 ## Develop
 
 ```bash

package/dist/blocks/index.d.ts

@@ -414,4 +414,71 @@ declare function LlmSettings({ api, labels, className, }: {
     className?: string;
 }): React.JSX.Element;
 
-export { ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type LlmCapability, type LlmDriver, type LlmField, type LlmFound, type LlmModel, type LlmProvider, type LlmProviderInput, type LlmPullProgress, LlmSettings, type LlmSettingsApi, type LlmSettingsLabels, type LlmSlot, type LlmState, type McpCall, type McpClient, McpSettings, type McpSettingsApi, type McpSettingsLabels, type McpStatus, type McpTool, OptionPicker, type OptionPickerLabels, Panel, PanelCard, type PanelCardProps, type PanelItemProps, type PickOption, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, TzPicker, type TzPickerLabels, type TzPickerProps, useConfirm, useFormField };
+/**
+ * Plates: the palette a reader picks, applied by putting `data-plate` on any element.
+ *
+ * This module holds NAMES and nothing else. The colours live once, in `styles/globals.css`, and a
+ * swatch reads them the same way the rest of the UI does - by sitting inside a `data-plate` scope
+ * and using `bg-primary`. Copying the values here would be the second table that drifts.
+ *
+ * Absent `data-plate`, `--primary` is lyra's neutral. That is the default every app ships with, so
+ * adopting plates costs an app nothing until a reader chooses.
+ */
+declare const PLATES: readonly ["pink", "rose", "crimson", "rust", "orange", "ochre", "amber", "honey", "gold", "olive", "lime", "green", "teal", "cyan", "azure", "blue", "indigo", "violet", "magenta"];
+type Plate = (typeof PLATES)[number];
+/**
+ * The plates certified to be told apart from each other, not merely from the status tokens.
+ *
+ * Only these may carry MEANING. The distinction is not decorative: a plate a reader picks for
+ * pleasure needs no relation to anyone else's, but a plate that says "which space you are typing
+ * into" stops working the moment two of them look alike - so that use gets the subset measured at
+ * dE76 >= 29.7 pairwise, in both themes.
+ */
+declare const BEARING_PLATES: readonly ["pink", "rust", "amber", "olive", "green", "teal", "azure", "blue", "violet"];
+type BearingPlate = (typeof BEARING_PLATES)[number];
+declare function isPlate(s: string): s is Plate;
+/**
+ * The plate for an id, from the certified subset.
+ *
+ * Derived, never chosen, and that is the point when the colour is a fence rather than a preference:
+ * if two organisations could both pick blue the signal stops working for both of them. Deriving on
+ * the CLIENT is deliberate too - the alternative is every server that shows a coloured surface
+ * keeping its own copy of the name list, which is the shape chat ended up in (a Go slice, a CSS
+ * block and a TS union, with nothing holding them together).
+ *
+ * FNV-1a rather than a cryptographic hash: this picks a colour, so spreading matters and secrecy
+ * does not, and it stays synchronous - SubtleCrypto would make every call site async for nothing.
+ */
+declare function derivePlate(id: string): BearingPlate;
+
+interface PlatePickerProps {
+    value: Plate | null;
+    onChange: (plate: Plate | null) => void;
+    /** Accessible name for the group, e.g. "Accent colour". */
+    label: string;
+    /** Accessible name for the neutral option, e.g. "Default". */
+    resetLabel: string;
+    /**
+     * Translated name per plate. Falls back to the plate's own key, which is English - fine for a
+     * developer tool, wrong for a product, and the reason this is a prop rather than a table in here.
+     */
+    plateLabels?: Partial<Record<Plate, string>>;
+    className?: string;
+}
+declare function PlatePicker({ value, onChange, label, resetLabel, plateLabels, className }: PlatePickerProps): React.JSX.Element;
+
+/**
+ * The plate this device is set to, and a way to change it.
+ *
+ * A stored name that is no longer a plate - a rename, a downgrade to an older lyra - reads as no
+ * plate. The alternative is an attribute no rule matches, which looks identical to the neutral
+ * default on screen while the picker shows nothing selected at all, so the reader cannot tell that
+ * their choice was dropped or get back to a known state.
+ */
+declare function usePlate(): [Plate | null, (plate: Plate | null) => void];
+
+declare function useCompact(): [boolean, (compact: boolean) => void];
+
+declare function PreferenceScript(): React.JSX.Element;
+
+export { BEARING_PLATES, type BearingPlate, ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type LlmCapability, type LlmDriver, type LlmField, type LlmFound, type LlmModel, type LlmProvider, type LlmProviderInput, type LlmPullProgress, LlmSettings, type LlmSettingsApi, type LlmSettingsLabels, type LlmSlot, type LlmState, type McpCall, type McpClient, McpSettings, type McpSettingsApi, type McpSettingsLabels, type McpStatus, type McpTool, OptionPicker, type OptionPickerLabels, PLATES, Panel, PanelCard, type PanelCardProps, type PanelItemProps, type PickOption, type Plate, PlatePicker, type PlatePickerProps, PreferenceScript, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, TzPicker, type TzPickerLabels, type TzPickerProps, derivePlate, isPlate, useCompact, useConfirm, useFormField, usePlate };

package/dist/blocks/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem, Spinner, Alert, AlertDescription, FieldGroup, FieldSet, FieldLegend, FieldDescription, Field, FieldContent, FieldLabel, Badge, Switch, FieldSeparator, Progress } from '../chunk-DUWK53B5.js';
+import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem, Spinner, Alert, AlertDescription, FieldGroup, FieldSet, FieldLegend, FieldDescription, Field, FieldContent, FieldLabel, Badge, Switch, FieldSeparator, Progress, RadioGroup } from '../chunk-EJP7F42V.js';
 import { NativeSelect, NativeSelectOption } from '../chunk-FHM6VOPQ.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../chunk-XJJQAQWJ.js';
 import { Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-XWGYXLIA.js';
@@ -7,8 +7,8 @@ import '../chunk-2HDU26FC.js';
 import { Button, Input } from '../chunk-VGOGWZCF.js';
 import { cn } from '../chunk-XH55BHUU.js';
 import * as React5 from 'react';
-import { createContext, useMemo, useState, useEffect, useContext, useCallback, useId } from 'react';
-import { Slot } from 'radix-ui';
+import { createContext, useMemo, useState, useEffect, useContext, useCallback, useId, useSyncExternalStore } from 'react';
+import { Slot, RadioGroup as RadioGroup$1 } from 'radix-ui';
 import { FormProvider, Controller, useFormContext } from 'react-hook-form';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -1302,6 +1302,154 @@ function LlmSettings({
   );
 }
 
-export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, LlmSettings, McpSettings, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
+// src/blocks/plate.ts
+var PLATES = [
+  "pink",
+  "rose",
+  "crimson",
+  "rust",
+  "orange",
+  "ochre",
+  "amber",
+  "honey",
+  "gold",
+  "olive",
+  "lime",
+  "green",
+  "teal",
+  "cyan",
+  "azure",
+  "blue",
+  "indigo",
+  "violet",
+  "magenta"
+];
+var BEARING_PLATES = [
+  "pink",
+  "rust",
+  "amber",
+  "olive",
+  "green",
+  "teal",
+  "azure",
+  "blue",
+  "violet"
+];
+function isPlate(s) {
+  return PLATES.includes(s);
+}
+function derivePlate(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return BEARING_PLATES[h % BEARING_PLATES.length];
+}
+var NONE = "none";
+function PlatePicker({ value, onChange, label, resetLabel, plateLabels, className }) {
+  const swatch = "size-7 shrink-0 rounded-none border outline-2 -outline-offset-[3px] outline-transparent focus-visible:ring-2 focus-visible:ring-ring";
+  return /* @__PURE__ */ jsxs(
+    RadioGroup,
+    {
+      "aria-label": label,
+      value: value ?? NONE,
+      onValueChange: (v) => onChange(isPlate(v) ? v : null),
+      className: cn("flex w-auto flex-wrap gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          RadioGroup$1.Item,
+          {
+            value: NONE,
+            "aria-label": resetLabel,
+            title: resetLabel,
+            className: cn(swatch, "bg-muted border-border data-checked:outline-foreground")
+          }
+        ),
+        PLATES.map((p) => /* @__PURE__ */ jsx(
+          RadioGroup$1.Item,
+          {
+            value: p,
+            "aria-label": plateLabels?.[p] ?? p,
+            title: plateLabels?.[p] ?? p,
+            "data-plate": p,
+            className: cn(swatch, "bg-primary border-transparent data-checked:outline-primary-foreground")
+          },
+          p
+        ))
+      ]
+    }
+  );
+}
+var PLATE_KEY = "lyra.plate";
+var COMPACT_KEY = "lyra.compact";
+var listeners = /* @__PURE__ */ new Map();
+function read(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function useStoredSetting(key) {
+  const subscribe = useCallback(
+    (onChange) => {
+      const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
+      listeners.set(key, set);
+      set.add(onChange);
+      const onStorage = (e) => {
+        if (e.key === key) onChange();
+      };
+      window.addEventListener("storage", onStorage);
+      return () => {
+        set.delete(onChange);
+        window.removeEventListener("storage", onStorage);
+      };
+    },
+    [key]
+  );
+  const value = useSyncExternalStore(
+    subscribe,
+    () => read(key),
+    () => null
+  );
+  const store = useCallback((next) => {
+    try {
+      if (next === null) localStorage.removeItem(key);
+      else localStorage.setItem(key, next);
+    } catch {
+    }
+    listeners.get(key)?.forEach((l) => l());
+  }, [key]);
+  return [value, store];
+}
+function useRootAttribute(name, value) {
+  useEffect(() => {
+    const root = document.documentElement;
+    if (value === null) root.removeAttribute(name);
+    else root.setAttribute(name, value);
+  }, [name, value]);
+}
+
+// src/blocks/use-plate.ts
+function usePlate() {
+  const [stored, store] = useStoredSetting(PLATE_KEY);
+  const plate = stored !== null && isPlate(stored) ? stored : null;
+  useRootAttribute("data-plate", plate);
+  return [plate, store];
+}
+function useCompact() {
+  const [stored, store] = useStoredSetting(COMPACT_KEY);
+  const compact = stored === "true";
+  const setCompact = useCallback((next) => store(next ? "true" : null), [store]);
+  useRootAttribute("data-compact", compact ? "true" : null);
+  return [compact, setCompact];
+}
+var SCRIPT = `try{var d=document.documentElement,p=localStorage.getItem("${PLATE_KEY}");if(p)d.setAttribute("data-plate",p);if(localStorage.getItem("${COMPACT_KEY}")==="true")d.setAttribute("data-compact","true")}catch(e){}`;
+function PreferenceScript() {
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: SCRIPT } });
+}
+
+export { BEARING_PLATES, ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, LlmSettings, McpSettings, OptionPicker, PLATES, Panel, PanelCard, PlatePicker, PreferenceScript, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, derivePlate, isPlate, useCompact, useConfirm, useFormField, usePlate };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map