cursedbelt 5.63.0 → 5.64.0

package/src/react/components/auth/SignInCard.spec.tsx

@@ -30,6 +30,15 @@ describe('SignInCard', () => {
     expect(warning.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 
+  test("`chrome='look'` drops the forced aurora front door so the card wears the app's own look", () => {
+    const aurora = render(<SignInCard title='Family' onSignIn={() => {}} />);
+    expect(aurora.container.querySelector('.cb-aurora')).not.toBeNull();
+    cleanup();
+    const look = render(<SignInCard title='Family' onSignIn={() => {}} chrome='look' />);
+    expect(look.container.querySelector('.cb-aurora')).toBeNull();
+    expect(look.container.querySelector('.bg-background')).not.toBeNull();
+  });
+
   test('a disabled reason disables the button instead of hiding it', () => {
     const onSignIn = mock(() => {});
     const { getByRole } = render(

package/src/react/components/auth/SignInCard.tsx

@@ -49,6 +49,14 @@ export interface SignInCardProps {
   children?: ReactNode;
   /** A line under the card, outside it. */
   footer?: ReactNode;
+  /**
+   * `aurora` (default): the fleet's dark-aurora front door, whatever look the app wears — the
+   * continuous hand-off from cursedalchemy.com. `look`: the page chrome of the app's OWN look
+   * and scheme (`AuthCard` without `aurora`), for an app whose signed-out screen must read as
+   * the same product as its signed-in one — a monochrome look wants no glass and no glow on its
+   * front door either (forge task 2891).
+   */
+  chrome?: 'aurora' | 'look';
 }
 
 /**
@@ -79,6 +87,7 @@ export function SignInCard({
   anotherAccountLabel = 'Use a different account',
   children,
   footer,
+  chrome = 'aurora',
 }: SignInCardProps) {
   // A refusal plus somewhere else to go: the other account leads, because retrying as the
   // account that was just refused would be refused again.
@@ -96,7 +105,7 @@ export function SignInCard({
     </Button>
   ) : null;
   return (
-    <AuthCard aurora title={title} subtitle={subtitle} logo={logo} footer={footer}>
+    <AuthCard aurora={chrome === 'aurora'} title={title} subtitle={subtitle} logo={logo} footer={footer}>
       <div className='flex flex-col gap-4'>
         {refusal ? (
           <Alert tone='warning' title={refusalTitle}>

package/src/react/index.ts

@@ -39,6 +39,28 @@ export {
 } from 'cursedbelt-core/color-scheme';
 export { ThemeToggle, type ThemeToggleProps } from './colorScheme/ThemeToggle.js';
 export { type UseColorScheme, useColorScheme } from './colorScheme/useColorScheme.js';
+export { LookPicker, type LookPickerProps } from './look/LookPicker.js';
+export {
+  applyLookToDocument,
+  createLookStore,
+  DEFAULT_LOOK,
+  getLook,
+  initLook,
+  isLookId,
+  LOOK_STORAGE_KEY,
+  LOOKS,
+  type Look,
+  type LookId,
+  type LookStorage,
+  type LookStore,
+  type LookStoreOptions,
+  lookClass,
+  lookStore,
+  resetLook,
+  setLook,
+  subscribeLook,
+} from './look/lookStore.js';
+export { type UseLook, useLook } from './look/useLook.js';
 export { Bubble, type BubbleProps, type BubbleVariant } from './chat/Bubble.js';
 export { DateMarker, type DateMarkerProps } from './chat/DateMarker.js';
 export { MessageComposer, type MessageComposerProps } from './chat/MessageComposer.js';

package/src/react/look/LookPicker.spec.tsx

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { LookPicker } from './LookPicker.js';
+import { initLook, LOOK_STORAGE_KEY, LOOKS, lookClass, resetLook } from './lookStore.js';
+
+afterEach(() => {
+  cleanup();
+  // The picker drives the app-wide singleton — reset it between tests.
+  resetLook();
+  localStorage.removeItem(LOOK_STORAGE_KEY);
+  for (const look of LOOKS) document.documentElement.classList.remove(lookClass(look.id));
+});
+
+describe('LookPicker', () => {
+  test('offers every shipped look as a radio, the fallback checked, and a pick applies + persists', () => {
+    initLook({ fallback: 'obsidian' });
+    const { getByRole, getAllByRole } = render(<LookPicker />);
+    expect(getAllByRole('radio')).toHaveLength(LOOKS.length);
+    expect(getByRole('radio', { name: /Obsidian/ }).getAttribute('aria-checked')).toBe('true');
+
+    fireEvent.click(getByRole('radio', { name: /Nord/ }));
+    expect(document.documentElement.classList.contains('cb-nord')).toBe(true);
+    expect(document.documentElement.classList.contains('cb-obsidian')).toBe(false);
+    expect(localStorage.getItem(LOOK_STORAGE_KEY)).toBe('nord');
+    expect(getByRole('radio', { name: /Nord/ }).getAttribute('aria-checked')).toBe('true');
+  });
+
+  test('`looks` narrows and orders what is offered', () => {
+    const { getAllByRole } = render(<LookPicker looks={['aurora', 'obsidian']} label='Appearance' />);
+    expect(getAllByRole('radio').map((r) => r.textContent)).toEqual([
+      expect.stringContaining('Aurora'),
+      expect.stringContaining('Obsidian'),
+    ]);
+  });
+
+  test('each card draws its picture inside its own look scope', () => {
+    const { container } = render(<LookPicker />);
+    for (const look of LOOKS) expect(container.querySelector(`.${lookClass(look.id)}`)).not.toBeNull();
+  });
+});

package/src/react/look/LookPicker.tsx

@@ -0,0 +1,112 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { Check } from 'lucide-react';
+import { type ReactNode, useId } from 'react';
+import { cn } from '../lib/cn.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
+import { type LookId, LOOKS, lookClass } from './lookStore.js';
+import { useLook } from './useLook.js';
+
+export interface LookPickerProps {
+  /** Which looks to offer, in order. Default: every look the stylesheets ship. */
+  looks?: readonly LookId[];
+  /** The question the cards answer. Default "Look". */
+  label?: ReactNode;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
+  /** Help under the cards. */
+  description?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Pick the app's look: one card per look, each a small picture of itself drawn with that look's
+ * OWN tokens (the card wears the `cb-<look>` scope, so what it shows is what you get, in the
+ * colour scheme the page is in right now). Reads and writes the shared look store itself, like
+ * `ThemeToggle` does the colour scheme, so dropping it into Settings is the whole integration.
+ *
+ * Linear's Preferences → Theme and Obsidian's Appearance both draw their themes as swatch cards,
+ * which is why this is cards and not a select (REV-5). Radix `RadioGroup`: each card IS the
+ * focusable element (roving tabindex, arrow keys), nothing hidden is drawn anywhere else — the
+ * same reason `ChoiceGroup` is built on it. The checked card is marked by its accent edge AND a
+ * check mark, never by colour alone.
+ */
+export function LookPicker({ looks: offered, label = 'Look', 'aria-label': ariaLabel, description, className }: LookPickerProps) {
+  const { look, setLook } = useLook();
+  const id = useId();
+  const labelId = label != null ? `${id}-label` : undefined;
+  const descriptionId = description != null ? `${id}-desc` : undefined;
+  const options = offered ? offered.flatMap((wanted) => LOOKS.filter((l) => l.id === wanted)) : LOOKS;
+
+  return (
+    <div className={cn('flex min-w-0 flex-col gap-1.5', className)} data-cb-look-picker=''>
+      {label != null ? (
+        <span id={labelId} className='text-sm font-medium text-foreground'>
+          {label}
+        </span>
+      ) : null}
+      <RadioGroup.Root
+        aria-labelledby={labelId}
+        aria-label={labelId ? undefined : ariaLabel}
+        aria-describedby={descriptionId}
+        value={look}
+        onValueChange={(next) => setLook(next as LookId)}
+        className='grid min-w-0 grid-cols-2 gap-2 sm:grid-cols-4'
+      >
+        {options.map((option) => (
+          <RadioGroup.Item
+            key={option.id}
+            value={option.id}
+            className={cn(
+              'group relative flex min-w-0 flex-col gap-2 rounded-lg border border-border bg-card p-2 text-left transition-colors',
+              'hover:border-border-strong',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'data-[state=checked]:border-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent',
+              TAP_TARGET,
+            )}
+          >
+            {/* The picture: this look's own canvas, chrome, a panel and the accent, under the page's
+                current scheme (`.dark .cb-<look>` matches when the page is dark). */}
+            <span
+              aria-hidden='true'
+              className={cn(
+                'flex h-14 w-full flex-col overflow-hidden rounded-md border border-border bg-background',
+                lookClass(option.id),
+              )}
+            >
+              <span className='flex h-4 shrink-0 items-center gap-1 border-b border-border bg-card px-1.5'>
+                <span className='size-1.5 rounded-full bg-accent-solid' />
+                <span className='h-1 w-6 rounded-full bg-muted-foreground/50' />
+              </span>
+              <span className='flex flex-1 gap-1.5 p-1.5'>
+                <span className='flex w-1/3 flex-col gap-1 rounded-sm border border-border bg-card p-1'>
+                  <span className='h-1 w-full rounded-full bg-foreground/70' />
+                  <span className='h-1 w-2/3 rounded-full bg-muted-foreground/50' />
+                </span>
+                <span className='flex flex-1 flex-col gap-1 rounded-sm border border-border bg-card-raised p-1'>
+                  <span className='h-1 w-1/2 rounded-full bg-foreground/70' />
+                  <span className='h-1 w-full rounded-full bg-muted-foreground/40' />
+                  <span className='h-1 w-3/4 rounded-full bg-muted-foreground/40' />
+                </span>
+              </span>
+            </span>
+            <span className='flex min-w-0 items-start justify-between gap-2'>
+              <span className='flex min-w-0 flex-col'>
+                <span className='text-sm font-medium text-foreground'>{option.label}</span>
+                <span className='text-xs text-muted-foreground'>{option.description}</span>
+              </span>
+              <Check
+                aria-hidden='true'
+                className='mt-0.5 size-4 shrink-0 text-accent opacity-0 transition-opacity group-data-[state=checked]:opacity-100'
+              />
+            </span>
+          </RadioGroup.Item>
+        ))}
+      </RadioGroup.Root>
+      {descriptionId ? (
+        <p id={descriptionId} className='text-xs text-muted-foreground'>
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/react/look/lookStore.spec.ts

@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import {
+  applyLookToDocument,
+  createLookStore,
+  DEFAULT_LOOK,
+  isLookId,
+  LOOK_STORAGE_KEY,
+  type LookId,
+  type LookStorage,
+  LOOKS,
+  lookClass,
+} from './lookStore.js';
+
+const makeStorage = (): LookStorage & { map: Map<string, string> } => {
+  const map = new Map<string, string>();
+  return {
+    map,
+    getItem: (k) => map.get(k) ?? null,
+    setItem: (k, v) => void map.set(k, v),
+    removeItem: (k) => void map.delete(k),
+  };
+};
+
+afterEach(() => {
+  for (const look of LOOKS) document.documentElement.classList.remove(lookClass(look.id));
+  delete document.documentElement.dataset.look;
+});
+
+describe('look store (injected side-effects)', () => {
+  test('nothing stored → the fallback, and it is not a choice', () => {
+    const store = createLookStore({ fallback: 'obsidian' });
+    expect(store.get()).toBe('obsidian');
+    expect(store.isChosen()).toBe(false);
+    expect(createLookStore().get()).toBe(DEFAULT_LOOK);
+  });
+
+  test('hydrates a stored choice; garbage in storage → the fallback', () => {
+    const storage = makeStorage();
+    storage.map.set(LOOK_STORAGE_KEY, 'nord');
+    const store = createLookStore({ storage, fallback: 'obsidian' });
+    expect(store.get()).toBe('nord');
+    expect(store.isChosen()).toBe(true);
+
+    const garbage = makeStorage();
+    garbage.map.set(LOOK_STORAGE_KEY, 'blurple');
+    expect(createLookStore({ storage: garbage, fallback: 'obsidian' }).get()).toBe('obsidian');
+  });
+
+  test('set persists + applies + notifies; reset clears the choice back to the fallback', () => {
+    const storage = makeStorage();
+    const applied: LookId[] = [];
+    const store = createLookStore({ storage, apply: (l) => applied.push(l), fallback: 'obsidian' });
+    let notifications = 0;
+    store.subscribe(() => notifications++);
+
+    store.set('dracula');
+    expect(storage.map.get(LOOK_STORAGE_KEY)).toBe('dracula');
+    expect(applied).toEqual(['dracula']);
+    expect(notifications).toBe(1);
+    expect(store.isChosen()).toBe(true);
+
+    store.reset();
+    expect(storage.map.has(LOOK_STORAGE_KEY)).toBe(false);
+    expect(applied).toEqual(['dracula', 'obsidian']);
+    expect(store.get()).toBe('obsidian');
+    expect(store.isChosen()).toBe(false);
+  });
+
+  test('init applies the stored look, and a later init with a new fallback re-applies it', () => {
+    const storage = makeStorage();
+    const applied: LookId[] = [];
+    const store = createLookStore({ storage, apply: (l) => applied.push(l) });
+    store.init({ fallback: 'obsidian' });
+    expect(applied).toEqual(['obsidian']);
+    store.init({ fallback: 'nord' });
+    expect(applied).toEqual(['obsidian', 'nord']);
+    expect(store.getFallback()).toBe('nord');
+  });
+
+  test('an outside change drops the cached choice so the next read re-hydrates', () => {
+    const storage = makeStorage();
+    let fire: () => void = () => {};
+    const store = createLookStore({
+      storage,
+      onExternalChange: (listener) => {
+        fire = listener;
+        return () => {};
+      },
+    });
+    store.init();
+    expect(store.get()).toBe(DEFAULT_LOOK);
+    storage.map.set(LOOK_STORAGE_KEY, 'nord');
+    expect(store.get()).toBe(DEFAULT_LOOK); // cached
+    fire();
+    expect(store.get()).toBe('nord');
+  });
+
+  test('isLookId knows exactly the shipped looks', () => {
+    for (const look of LOOKS) expect(isLookId(look.id)).toBe(true);
+    expect(isLookId('cb-aurora')).toBe(false);
+    expect(isLookId(null)).toBe(false);
+  });
+});
+
+describe('applyLookToDocument', () => {
+  test('puts exactly one look class on <html>, removing every other look, and keeps unrelated classes', () => {
+    const root = document.documentElement;
+    root.classList.add('dark', 'cb-aurora', 'cb-dense');
+    applyLookToDocument('obsidian');
+    expect(root.classList.contains('cb-obsidian')).toBe(true);
+    expect(root.classList.contains('cb-aurora')).toBe(false);
+    expect(root.classList.contains('dark')).toBe(true);
+    expect(root.classList.contains('cb-dense')).toBe(true);
+    expect(root.dataset.look).toBe('obsidian');
+
+    applyLookToDocument('aurora');
+    expect([...root.classList].filter((c) => LOOKS.some((l) => lookClass(l.id) === c))).toEqual(['cb-aurora']);
+    root.classList.remove('dark', 'cb-dense');
+  });
+});

package/src/react/look/lookStore.ts

@@ -0,0 +1,172 @@
+/**
+ * The LOOK store — which theme scope the app wears.
+ *
+ * A look is one of the `cb-<id>` scopes the stylesheets define: `cb-aurora` in `theme.css`, and
+ * `cb-obsidian`, `cb-nord` and `cb-dracula` in `looks.css`. Every look re-binds the SAME semantic
+ * surface tokens (`--background`, `--card`, `--border`, the shadows, the glass, the field aliases),
+ * so a component never knows which look it is in — and light/dark stays the colour-scheme store's
+ * business: `.dark` sits beside the look class on `<html>`, and each look declares both schemes.
+ *
+ * This holds the chosen look, persists it under {@link LOOK_STORAGE_KEY}, applies it as exactly ONE
+ * `cb-<look>` class on `<html>` (every other look's class is removed first, so an app whose markup
+ * carries a static default class is corrected, never doubled) and notifies subscribers. It is the
+ * same shape as `cursedbelt-core`'s `colorSchemeStore`, for the same reasons: it works before React
+ * mounts (`initLook()` at boot, after the app's own pre-paint script), and its side effects are
+ * injected so a test drives a real store with fakes.
+ *
+ * An app that never calls it is untouched: a static `class="cb-aurora"` on `<html>` keeps working,
+ * because nothing here runs until {@link initLook} does.
+ */
+
+export type LookId = 'aurora' | 'obsidian' | 'nord' | 'dracula';
+
+export interface Look {
+  id: LookId;
+  /** The name a picker shows. */
+  label: string;
+  /** One line on what it is. */
+  description: string;
+}
+
+/** Every look the stylesheets ship, in the order a picker offers them. `looks.spec.ts` holds the CSS to this list. */
+export const LOOKS: readonly Look[] = [
+  { id: 'obsidian', label: 'Obsidian', description: 'Monochrome and quiet. Colour only where it means something.' },
+  { id: 'aurora', label: 'Aurora', description: 'Glass panels over a field of ambient light.' },
+  { id: 'nord', label: 'Nord', description: 'Cool blue-grey, soft on the eyes.' },
+  { id: 'dracula', label: 'Dracula', description: 'Deep violet-grey with warm text.' },
+];
+
+export const LOOK_STORAGE_KEY = 'cwip.look';
+
+/** The look when nothing is stored and the app named no fallback: what every app wore before looks existed. */
+export const DEFAULT_LOOK: LookId = 'aurora';
+
+export const isLookId = (value: unknown): value is LookId => LOOKS.some((look) => look.id === value);
+
+/** The class a look puts on `<html>`: the scope `theme.css` / `looks.css` style. */
+export const lookClass = (id: LookId): string => `cb-${id}`;
+
+/** The slice of the Web Storage API the store needs (so a test can fake it). */
+export interface LookStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+export interface LookStoreOptions {
+  storage?: LookStorage | null;
+  /** Apply a look to the page. Default: {@link applyLookToDocument}. */
+  apply?: (look: LookId) => void;
+  /** Subscribe to the root element's class being changed by something OTHER than this store
+   *  (devtools, a visual-test harness driving the DOM directly). Default: a `MutationObserver`. */
+  onExternalChange?: (listener: () => void) => () => void;
+  /** localStorage key. */
+  key?: string;
+  /** The look when nothing is stored. `init({ fallback })` overrides it. */
+  fallback?: LookId;
+}
+
+export interface LookStore {
+  /** The look the page wears: the stored choice, else the fallback. */
+  get(): LookId;
+  /** The fallback the app named (what `get()` answers when nothing is stored). */
+  getFallback(): LookId;
+  /** Whether the look is the reader's own stored choice rather than the app's fallback. */
+  isChosen(): boolean;
+  /** Choose, persist, apply, notify. */
+  set(look: LookId): void;
+  /** Forget the choice: back to the app's fallback. */
+  reset(): void;
+  /** Apply the stored (or fallback) look to the page and start watching for outside changes.
+   *  Call once on app boot; calling again with a new `fallback` re-applies. */
+  init(options?: { fallback?: LookId }): void;
+  subscribe(listener: () => void): () => void;
+}
+
+export function createLookStore(options: LookStoreOptions = {}): LookStore {
+  const { storage = null, apply, onExternalChange, key = LOOK_STORAGE_KEY } = options;
+  let fallback: LookId = options.fallback ?? DEFAULT_LOOK;
+  const listeners = new Set<() => void>();
+  let chosen: LookId | null | undefined; // undefined until first hydrate; null = nothing stored
+  let watchingExternal = false;
+
+  const hydrate = (): LookId | null => {
+    if (chosen !== undefined) return chosen;
+    const raw = storage?.getItem(key);
+    chosen = isLookId(raw) ? raw : null;
+    return chosen;
+  };
+
+  const resolve = (): LookId => hydrate() ?? fallback;
+
+  const notify = (): void => {
+    for (const listener of listeners) listener();
+  };
+
+  const commit = (next: LookId | null): void => {
+    chosen = next;
+    if (next === null) storage?.removeItem(key);
+    else storage?.setItem(key, next);
+    apply?.(resolve());
+    notify();
+  };
+
+  return {
+    get: resolve,
+    getFallback: () => fallback,
+    isChosen: () => hydrate() !== null,
+    set: (look) => commit(look),
+    reset: () => commit(null),
+    init(init = {}) {
+      if (init.fallback) fallback = init.fallback;
+      apply?.(resolve());
+      notify();
+      if (!watchingExternal && onExternalChange) {
+        watchingExternal = true;
+        onExternalChange(() => {
+          // Something outside this store touched the root's class or the storage: drop the cached
+          // choice so the next read re-hydrates, and tell every subscriber to re-check.
+          chosen = undefined;
+          notify();
+        });
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+/**
+ * Apply a look to the document root: exactly one `cb-<look>` class, every other look's class
+ * removed, and `data-look` beside it for a stylesheet or a test that wants to ask. SSR-safe.
+ */
+export function applyLookToDocument(look: LookId): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  for (const other of LOOKS) if (other.id !== look) root.classList.remove(lookClass(other.id));
+  root.classList.add(lookClass(look));
+  root.dataset.look = look;
+}
+
+const defaultStorage: LookStorage | null = typeof localStorage !== 'undefined' ? localStorage : null;
+
+/** The app-wide singleton bound to localStorage and the page. */
+export const lookStore = createLookStore({
+  storage: defaultStorage,
+  apply: applyLookToDocument,
+  onExternalChange: (listener) => {
+    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {};
+    const observer = new MutationObserver(listener);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  },
+});
+
+export const getLook = (): LookId => lookStore.get();
+export const setLook = (look: LookId): void => lookStore.set(look);
+export const resetLook = (): void => lookStore.reset();
+export const subscribeLook = (listener: () => void): (() => void) => lookStore.subscribe(listener);
+/** Apply the saved look (or the app's `fallback`) on boot, before React mounts, beside `initColorScheme()`. */
+export const initLook = (options?: { fallback?: LookId }): void => lookStore.init(options);

package/src/react/look/useLook.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from 'react';
+import {
+  DEFAULT_LOOK,
+  type Look,
+  type LookId,
+  LOOKS,
+  lookStore,
+  resetLook,
+  setLook,
+  subscribeLook,
+} from './lookStore.js';
+
+export interface UseLook {
+  /** The look the page wears right now. */
+  look: LookId;
+  /** Whether that is the reader's own stored choice, rather than the app's fallback. */
+  chosen: boolean;
+  /** Every look the stylesheets ship, in picker order. */
+  looks: readonly Look[];
+  setLook: (look: LookId) => void;
+  /** Forget the choice: back to the app's fallback. */
+  resetLook: () => void;
+}
+
+/**
+ * Read + control the app-wide look. Backed by the shared {@link lookStore} (persisted to
+ * localStorage, applied as the `cb-<look>` class on `<html>`), so every consumer — a
+ * {@link LookPicker} in Settings, a row in an account menu — stays in sync. SSR-safe: renders the
+ * default look on the server, hydrates the saved one on the client.
+ *
+ * Pair with `initLook({ fallback })` at app start, beside `initColorScheme()`.
+ */
+export function useLook(): UseLook {
+  const look = useSyncExternalStore(subscribeLook, () => lookStore.get(), () => DEFAULT_LOOK);
+  const chosen = useSyncExternalStore(subscribeLook, () => lookStore.isChosen(), () => false);
+  return { look, chosen, looks: LOOKS, setLook, resetLook };
+}

package/src/styles-areas/calendar.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 78 candidate(s).
+ * 77 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -34,7 +34,7 @@
 @source inline("dark:text-rose-200 dark:text-sky-200 dark:text-slate-200 dark:text-teal-200 dark:text-violet-200");
 @source inline("focus:opacity-100 grid-cols-[repeat(7,minmax(0,1fr))] group-focus-within:opacity-100 h-3.5");
 @source inline("hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80 last:border-r-0 line-through min-h-28");
-@source inline("min-h-40 opacity-85 outline-1 outline-dashed outline-tone-amber-ink p-1.5 sm:inline sm:min-h-0");
+@source inline("min-h-40 opacity-85 outline-1 outline-dashed outline-tone-amber-ink sm:inline sm:min-h-0");
 @source inline("sm:min-h-24 sm:px-1.5 sm:text-xs text-accent-solid-foreground text-amber-900 text-blue-800");
 @source inline("text-emerald-800 text-green-800 text-purple-800 text-rose-800 text-sky-800 text-slate-800");
 @source inline("text-teal-800 text-tone-amber-ink text-violet-800 w-20 w-3.5");

package/src/styles-areas/chat.css

@@ -18,7 +18,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 68 candidate(s).
+ * 67 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -28,9 +28,9 @@
 @source inline("bg-background/30 bg-black/10 bg-gradient-to-t border-border/40 bottom-3 col collapse");
 @source inline("dark:bg-white/10 first:mt-0 flex-row flex-row-reverse flex-shrink focus-visible:outline-2");
 @source inline("focus-visible:outline-offset-2 focus-visible:outline-ring from-surface h-105 h-3.5");
-@source inline("hover:bg-background/50 hover:border-border-strong hover:border-field-ring hover:opacity-80");
-@source inline("italic list-decimal list-disc max-w-4/5 min-h-20 min-w-16 ml-0.5 ml-1.5 mr-9 outline-2");
-@source inline("outline-accent outline-dashed pl-5 pointer-coarse:mr-12 pt-0.5 px-0.5 px-3.5 resize-none right-1");
-@source inline("rounded-2xl rounded-bl-md rounded-bl-sm rounded-br-md rounded-br-sm size-7");
-@source inline("text-[length:var(--text-code-block)] text-[length:var(--text-code-inline)] text-xl");
-@source inline("to-transparent top-1 underline-offset-2 w-1.5 w-3 w-3.5 w-40 w-48 w-56 w-88 z-[9]");
+@source inline("hover:bg-background/50 hover:border-field-ring hover:opacity-80 italic list-decimal list-disc");
+@source inline("max-w-4/5 min-h-20 min-w-16 ml-0.5 ml-1.5 mr-9 outline-2 outline-accent outline-dashed pl-5");
+@source inline("pointer-coarse:mr-12 pt-0.5 px-0.5 px-3.5 resize-none right-1 rounded-2xl rounded-bl-md");
+@source inline("rounded-bl-sm rounded-br-md rounded-br-sm size-7 text-[length:var(--text-code-block)]");
+@source inline("text-[length:var(--text-code-inline)] text-xl to-transparent top-1 underline-offset-2 w-1.5 w-3");
+@source inline("w-3.5 w-40 w-48 w-56 w-88 z-[9]");