@tradalab/lyra 3.3.0 → 3.5.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

@@ -33,10 +33,17 @@ type PanelItemType = {
     hasError?: boolean;
     content: ReactNode;
 };
-declare function Panel({ name, items, enable_url }: {
-    name?: string;
+/**
+ * No URL binding, on purpose.
+ *
+ * An `enable_url` prop used to mirror the open item into a query param, and that made this file
+ * import `next/navigation` at module scope. Since the `blocks` barrel re-exports everything, one
+ * import here made the WHOLE barrel require Next, so anything that is not itself a Next app could
+ * not import any block at all - which is how nekit broke. The prop had no caller in any of the 26
+ * consumers, and `name` existed only to build its query key, so both came out with the router.
+ */
+declare function Panel({ items }: {
     items: PanelItemType[];
-    enable_url?: boolean;
 }): React.JSX.Element | null;
 interface PanelItemProps {
     children: ReactNode;
@@ -373,6 +380,13 @@ interface LlmSettingsApi {
     onPull?(cb: (p: LlmPullProgress) => void): () => void;
     /** Runtimes already running on this machine, offered as providers to add. */
     detect?(): Promise<LlmFound[]>;
+    /**
+     * An extra line under one slot, for a fact only the app knows - loom warns that N chunks were
+     * indexed by a different embedding model than the one now bound. Without a hook for it, adopting
+     * this block means silently dropping such a warning, which is what kept loom on its own 687-line
+     * copy of this screen.
+     */
+    slotNote?(slot: string): React.ReactNode;
 }
 interface LlmSettingsLabels {
     slots?: string;
@@ -414,4 +428,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,11 +7,10 @@ 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, useState, useContext, useCallback, useId, useSyncExternalStore, useEffect } 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';
 import { ChevronRight, CheckIcon, CopyIcon, PlusIcon, FolderOpen, Folder, File } from 'lucide-react';
 
 var Form = FormProvider;
@@ -73,33 +72,15 @@ function FormMessage({ className, ...props }) {
   }
   return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className), ...props, children: body });
 }
-function Panel({ name, items, enable_url }) {
-  const router = useRouter();
-  const params = useSearchParams();
-  const defaultKey = items[0]?.key;
-  const panelKey = useMemo(() => `panel${name ? "-" + name : ""}`, [name]);
-  const panelFromUrl = useMemo(() => {
-    if (!enable_url) return defaultKey;
-    return params.get(panelKey) ?? defaultKey;
-  }, [enable_url, params, defaultKey, panelKey]);
-  const [active, setActive] = useState(panelFromUrl);
-  useEffect(() => {
-    if (!enable_url) return;
-    setActive(panelFromUrl);
-  }, [panelFromUrl, enable_url]);
+function Panel({ items }) {
+  const [active, setActive] = useState(items[0]?.key);
   const current = items.find((s) => s.key === active) ?? items[0];
   if (!current) return null;
-  const navigate = (key) => {
-    if (key === active) return;
-    setActive(key);
-    if (!enable_url) return;
-    router.replace(`?${panelKey}=${key}`, { scroll: false });
-  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full min-h-0 flex flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-lg bg-muted p-1", children: items?.map((s) => /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: () => navigate(s.key),
+        onClick: () => setActive(s.key),
         className: cn(
           "rounded-md px-3 py-1.5 text-sm transition-all",
           active === s.key ? "bg-background text-foreground shadow-sm" : s.danger ? "text-destructive" : "text-muted-foreground hover:text-foreground"
@@ -113,7 +94,7 @@ function Panel({ name, items, enable_url }) {
       s.key
     )) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-[240px_1fr] flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx("aside", { className: "hidden space-y-1 lg:block overflow-y-auto min-h-0 pr-1 [overflow:overlay]", children: items?.map((s) => /* @__PURE__ */ jsx(PanelItem, { active: active === s.key, icon: s.icon, danger: s.danger, hasError: s.hasError, onClick: () => navigate(s.key), children: s.label }, s.key)) }),
+      /* @__PURE__ */ jsx("aside", { className: "hidden space-y-1 lg:block overflow-y-auto min-h-0 pr-1 [overflow:overlay]", children: items?.map((s) => /* @__PURE__ */ jsx(PanelItem, { active: active === s.key, icon: s.icon, danger: s.danger, hasError: s.hasError, onClick: () => setActive(s.key), children: s.label }, s.key)) }),
       /* @__PURE__ */ jsx("div", { className: "space-y-6 overflow-y-auto min-h-0 pr-1 [overflow:overlay]", children: current.content })
     ] })
   ] });
@@ -1163,6 +1144,7 @@ function LlmSettings({
               ] })
             ] }),
             slot.error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: slot.error }) : null,
+            api.slotNote?.(slot.name),
             current?.manages && api.pull && missing && !pulling ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: t.notDownloaded }),
               /* @__PURE__ */ jsxs(
@@ -1302,6 +1284,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