@womp/kookie-ui 0.6.2 → 0.8.0

package/src/components/select.css

@@ -33,12 +33,6 @@
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--accent-12);
-    }
-  }
-
   /* Selected values use medium font weight */
   &:where(:not([data-placeholder])) {
     & :where(.rt-SelectTriggerInner) {
@@ -339,15 +333,11 @@
 .rt-SelectTrigger:where(.rt-variant-classic) {
   position: relative;
   top: var(--classic-elevation-offset);
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     background-color: var(--color-surface);
@@ -362,24 +352,6 @@
     background-color: var(--color-surface);
   }
 
-  &:where(.rt-high-contrast) {
-    background-color: var(--color-surface);
-
-    /* Theme-level translucent override for high contrast */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: var(--color-surface);
-    }
-
-    /* Component-level overrides for high contrast */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--color-surface);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: var(--color-surface);
-    }
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
@@ -464,11 +436,7 @@
 .rt-SelectTrigger:where(.rt-variant-soft) {
   /* Base state: solid accent for solid panels */
   background-color: var(--accent-3);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -565,11 +533,7 @@
 
 .rt-SelectTrigger:where(.rt-variant-ghost) {
   background-color: transparent;
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   &:where([data-placeholder]) {
     & :where(.rt-SelectTriggerInner) {
@@ -670,28 +634,21 @@
 .rt-SelectTrigger:where(.rt-variant-outline) {
   /* Base state: solid colors for solid panels */
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-11);
+  color: var(--accent-ink);
   transition: var(--transition-background-blur);
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
-    color: var(--accent-a11);
   }
 
   /* Component-level overrides (higher specificity) */
   &:where([data-panel-background='solid'], [data-material='solid']) {
     box-shadow: inset 0 0 0 1px var(--accent-6);
-    color: var(--accent-11);
   }
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
-    color: var(--accent-a11);
   }
 
   @media (hover: hover) {
@@ -767,10 +724,6 @@
     outline-offset: -1px;
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   &:where(:disabled) {
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
@@ -793,11 +746,7 @@
   /* Base state: solid accent for solid panels */
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -889,10 +838,6 @@
     outline-offset: -1px;
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   &:where(:disabled) {
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
@@ -978,7 +923,7 @@
  ***************************************************************************************************/
 
 .rt-SelectItem:where([data-accent-color]) {
-  color: var(--accent-a11);
+  color: var(--accent-ink);
 }
 .rt-SelectItem:where([data-disabled]) {
   color: var(--gray-a8);
@@ -988,17 +933,18 @@
   background-color: var(--gray-a6);
 }
 
-/* Ensure gray text appears muted in non-highlighted state */
-.rt-SelectItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+/* Muted text sits a step lower inside items */
+.rt-SelectItem :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
   color: var(--gray-a10);
 }
 
 /* solid */
 
 .rt-SelectContent:where(.rt-variant-solid) {
+  /* Gray fills with step 12 through the solid tokens */
   & :where(.rt-SelectItem[data-highlighted]) {
-    background-color: var(--accent-9);
-    color: var(--accent-contrast);
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
 
     /* Force all text elements to inherit hover color, including those with color="gray" */
     & :where(.rt-Text) {
@@ -1010,35 +956,6 @@
       color: inherit !important;
     }
   }
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SelectItem[data-highlighted]) {
-      background-color: var(--accent-12);
-      color: var(--accent-1);
-
-      /* Force all text elements to inherit hover color in high contrast mode */
-      & :where(.rt-Text) {
-        color: inherit !important;
-      }
-
-      /* Also target any element with data-accent-color="gray" in high contrast */
-      & :where([data-accent-color='gray']) {
-        color: inherit !important;
-      }
-
-      &:where([data-accent-color]) {
-        background-color: var(--accent-9);
-        color: var(--accent-contrast);
-
-        & :where(.rt-Text) {
-          color: inherit !important;
-        }
-
-        & :where([data-accent-color='gray']) {
-          color: inherit !important;
-        }
-      }
-    }
-  }
 }
 
 /* soft */
@@ -1047,8 +964,8 @@
   & :where(.rt-SelectItem[data-highlighted]) {
     background-color: var(--accent-a4);
 
-    /* In soft variant, improve contrast for gray text while maintaining hierarchy */
-    & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    /* In soft variant, lift muted text a step while keeping the hierarchy */
+    & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
       color: var(--gray-11) !important;
     }
   }

package/src/components/select.props.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -45,7 +44,6 @@ const contentVariants = ['solid', 'soft'] as const;
 const selectContentPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   variant: PropDef<(typeof contentVariants)[number]>;
 };

package/src/components/sheet.tsx

@@ -280,9 +280,9 @@ type SheetDescriptionElement = React.ElementRef<typeof Text>;
 type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof Text>;
 /** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
 const Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(
-  ({ size = '2', color = 'gray', ...rest }, ref) => (
+  ({ size = '2', emphasis = 'medium', ...rest }, ref) => (
     <DialogPrimitive.Description asChild>
-      <Text ref={ref} size={size} color={color} {...rest} />
+      <Text ref={ref} size={size} emphasis={emphasis} {...rest} />
     </DialogPrimitive.Description>
   ),
 );

package/src/components/shell.context.tsx

@@ -1,13 +1,61 @@
+'use client';
+
+/**
+ * Since 0.8.0 the Shell has two contexts: the pane registry (the store) and
+ * the inset set. They live in `_internal/shell-store.tsx`. This module keeps
+ * the two hooks consumers can reach: `useSidebarMode`, and the deprecated
+ * `useShell`.
+ */
 import * as React from 'react';
-import type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';
+import { useBreakpoint } from '../hooks/use-breakpoint.js';
+import type { Breakpoint, PaneMode, PaneName, PaneTarget, PresentationValue, SidebarMode } from './shell.types.js';
+import { setShellPeek, subscribeShellStore, useShellStore, warnOnce, type PaneValue, type ShellStore } from './_internal/shell-store.js';
+
+const toSidebarMode = (value: PaneValue | undefined): SidebarMode | undefined => (value === undefined ? undefined : value === 'closed' ? 'collapsed' : value === 'thin' ? 'thin' : 'expanded');
+
+const fromSidebarMode = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : mode === 'thin' ? 'thin' : 'open');
+
+const toPaneMode = (value: PaneValue | undefined): PaneMode => (value === undefined || value === 'closed' ? 'collapsed' : 'expanded');
+
+const paneName = (target: PaneTarget): PaneName => (target === 'left' ? 'rail' : target);
+
+/** Re-renders on every change to the registry. For the deprecated whole-shell reader only. */
+function useStoreVersion(store: ShellStore) {
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  return React.useSyncExternalStore(
+    subscribe,
+    () => store.version,
+    () => 0,
+  );
+}
+
+/**
+ * The Sidebar's mode, and a setter. The setter is a user action: it reports
+ * through the Sidebar's `onStateChange` the way a Trigger does.
+ */
+export function useSidebarMode(): { sidebarMode: SidebarMode; setSidebarMode: (mode: SidebarMode) => void } {
+  const store = useShellStore('useSidebarMode');
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  const value = React.useSyncExternalStore(
+    subscribe,
+    () => store.entries.get('sidebar')?.value,
+    () => undefined,
+  );
+  const setSidebarMode = React.useCallback(
+    (mode: SidebarMode) => {
+      store.entries.get('sidebar')?.setValue(fromSidebarMode(mode), 'toggle');
+    },
+    [store],
+  );
+  return { sidebarMode: toSidebarMode(value) ?? 'expanded', setSidebarMode };
+}
 
 export interface ShellContextValue {
-  // Pane states
   leftMode: PaneMode;
   setLeftMode: (mode: PaneMode) => void;
-  /** When Rail is controlled, this reflects the resolved open state for the current breakpoint. */
+  /** The Rail's open state, resolved, when it is controlled. */
   leftControlledOpen?: boolean;
-  panelMode: PaneMode; // Panel state within left container
+  panelMode: PaneMode;
   setPanelMode: (mode: PaneMode) => void;
   sidebarMode: SidebarMode;
   setSidebarMode: (mode: SidebarMode) => void;
@@ -15,140 +63,80 @@ export interface ShellContextValue {
   setInspectorMode: (mode: PaneMode) => void;
   bottomMode: PaneMode;
   setBottomMode: (mode: PaneMode) => void;
-
-  // Peek state (layout-only, ephemeral)
   peekTarget: PaneTarget | null;
   setPeekTarget: (target: PaneTarget | null) => void;
   peekPane: (target: PaneTarget) => void;
   clearPeek: () => void;
-
-  // Composition detection
+  /** Whether a Rail is mounted. */
   hasLeft: boolean;
+  /** No effect since 0.8.0: the registry knows which panes are mounted. */
   setHasLeft: (has: boolean) => void;
+  /** Whether a Sidebar is mounted. */
   hasSidebar: boolean;
+  /** No effect since 0.8.0: the registry knows which panes are mounted. */
   setHasSidebar: (has: boolean) => void;
-
-  // Presentation resolution
   currentBreakpoint: Breakpoint;
   currentBreakpointReady: boolean;
+  /** The Rail's presentation at the current breakpoint, when known. */
   leftResolvedPresentation?: PresentationValue;
-
-  // Actions
   togglePane: (target: PaneTarget) => void;
   expandPane: (target: PaneTarget) => void;
   collapsePane: (target: PaneTarget) => void;
-  // Toggle customization
-  setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
-  // Dev-only hooks for presentation warnings
-  onLeftPres?: (p: PresentationValue) => void;
-  // Sizing info for overlay grouping
-  onLeftDefaults?: (size: number) => void;
-  onRailDefaults?: (size: number) => void;
-  onPanelDefaults?: (size: number) => void;
-}
-
-const ShellContext = React.createContext<ShellContextValue | null>(null);
-
-/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */
-export function useShell() {
-  const ctx = React.useContext(ShellContext);
-  if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');
-  return ctx;
-}
-
-export function ShellProvider({ value, children }: { value: ShellContextValue; children: React.ReactNode }) {
-  return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;
-}
-
-// Phase 7: Split contexts for render isolation
-
-// Pane mode slice contexts
-type ModeSetter<T> = (mode: T) => void;
-
-export const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null);
-export function useLeftMode() {
-  const ctx = React.useContext(LeftModeContext);
-  if (!ctx) throw new Error('useLeftMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const PanelModeContext = React.createContext<{ panelMode: PaneMode; setPanelMode: ModeSetter<PaneMode> } | null>(null);
-export function usePanelMode() {
-  const ctx = React.useContext(PanelModeContext);
-  if (!ctx) throw new Error('usePanelMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const SidebarModeContext = React.createContext<{ sidebarMode: SidebarMode; setSidebarMode: ModeSetter<SidebarMode> } | null>(null);
-export function useSidebarMode() {
-  const ctx = React.useContext(SidebarModeContext);
-  if (!ctx) throw new Error('useSidebarMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const InspectorModeContext = React.createContext<{ inspectorMode: PaneMode; setInspectorMode: ModeSetter<PaneMode> } | null>(null);
-export function useInspectorMode() {
-  const ctx = React.useContext(InspectorModeContext);
-  if (!ctx) throw new Error('useInspectorMode must be used within Shell.Root');
-  return ctx;
-}
-
-export const BottomModeContext = React.createContext<{ bottomMode: PaneMode; setBottomMode: ModeSetter<PaneMode> } | null>(null);
-export function useBottomMode() {
-  const ctx = React.useContext(BottomModeContext);
-  if (!ctx) throw new Error('useBottomMode must be used within Shell.Root');
-  return ctx;
-}
-
-// Presentation slice
-export const PresentationContext = React.createContext<{ currentBreakpoint: Breakpoint; currentBreakpointReady: boolean; leftResolvedPresentation?: PresentationValue } | null>(null);
-export function usePresentation() {
-  const ctx = React.useContext(PresentationContext);
-  if (!ctx) throw new Error('usePresentation must be used within Shell.Root');
-  return ctx;
-}
-
-// Peek slice
-export const PeekContext = React.createContext<{ peekTarget: PaneTarget | null; setPeekTarget: (t: PaneTarget | null) => void; peekPane: (t: PaneTarget) => void; clearPeek: () => void } | null>(
-  null,
-);
-export function usePeek() {
-  const ctx = React.useContext(PeekContext);
-  if (!ctx) throw new Error('usePeek must be used within Shell.Root');
-  return ctx;
-}
-
-// Actions slice (stable callbacks)
-export const ActionsContext = React.createContext<{
-  togglePane: (t: PaneTarget) => void;
-  expandPane: (t: PaneTarget) => void;
-  collapsePane: (t: PaneTarget) => void;
-  setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
-} | null>(null);
-export function useShellActions() {
-  const ctx = React.useContext(ActionsContext);
-  if (!ctx) throw new Error('useShellActions must be used within Shell.Root');
-  return ctx;
-}
-
-// Composition slice
-export const CompositionContext = React.createContext<{ hasLeft: boolean; setHasLeft: (v: boolean) => void; hasSidebar: boolean; setHasSidebar: (v: boolean) => void } | null>(null);
-export function useComposition() {
-  const ctx = React.useContext(CompositionContext);
-  if (!ctx) throw new Error('useComposition must be used within Shell.Root');
-  return ctx;
 }
 
-// Inset slice - tracks which panes have inset for gray backdrop
-export type InsetPaneId = 'left' | 'sidebar' | 'content' | 'inspector' | 'bottom';
-export const InsetContext = React.createContext<{
-  insetPanes: Set<InsetPaneId>;
-  registerInset: (id: InsetPaneId) => void;
-  unregisterInset: (id: InsetPaneId) => void;
-  hasAnyInset: boolean;
-} | null>(null);
-export function useInset() {
-  const ctx = React.useContext(InsetContext);
-  if (!ctx) throw new Error('useInset must be used within Shell.Root');
-  return ctx;
+const noop = () => {};
+
+/**
+ * @deprecated The whole-shell reader re-renders its consumer on every change
+ * to any pane. Use `Shell.Trigger` to drive a pane, `Shell.useSidebarMode`
+ * for the Sidebar, and each pane's `open`/`onOpenChange` for its state.
+ * Removed in 1.0.
+ *
+ * Keeps 0.7's shape. The setters act as a user would: they report through
+ * the pane's own callback with `reason: 'toggle'`, and a controlled pane
+ * changes only when the app passes the new value.
+ */
+export function useShell(): ShellContextValue {
+  const store = useShellStore('useShell');
+  React.useEffect(() => {
+    warnOnce("Shell.useShell is deprecated and is removed in 1.0. Use Shell.Trigger, Shell.useSidebarMode, or a pane's own open/onOpenChange.");
+  }, []);
+  useStoreVersion(store);
+  const { breakpoint, ready } = useBreakpoint();
+  const actions = React.useMemo(() => {
+    const setMode = (name: PaneName) => (mode: PaneMode) => store.entries.get(name)?.setValue(mode === 'collapsed' ? 'closed' : 'open', 'toggle');
+    const setPeekTarget = (target: PaneTarget | null) => setShellPeek(store, target === null ? null : paneName(target));
+    return {
+      setLeftMode: setMode('rail'),
+      setPanelMode: setMode('panel'),
+      setInspectorMode: setMode('inspector'),
+      setBottomMode: setMode('bottom'),
+      setSidebarMode: (mode: SidebarMode) => store.entries.get('sidebar')?.setValue(fromSidebarMode(mode), 'toggle'),
+      setPeekTarget,
+      peekPane: (target: PaneTarget) => setPeekTarget(target),
+      clearPeek: () => setPeekTarget(null),
+      setHasLeft: noop,
+      setHasSidebar: noop,
+      togglePane: (target: PaneTarget) => store.entries.get(paneName(target))?.toggle('toggle'),
+      expandPane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('open', 'toggle'),
+      collapsePane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('closed', 'toggle'),
+    };
+  }, [store]);
+  const value = (name: PaneName) => store.entries.get(name)?.value;
+  const rail = store.entries.get('rail');
+  return {
+    leftMode: toPaneMode(value('rail')),
+    leftControlledOpen: rail?.value === undefined ? undefined : rail.value !== 'closed',
+    panelMode: toPaneMode(value('panel')),
+    sidebarMode: toSidebarMode(value('sidebar')) ?? 'expanded',
+    inspectorMode: toPaneMode(value('inspector')),
+    bottomMode: toPaneMode(value('bottom')),
+    peekTarget: store.peek,
+    hasLeft: store.entries.has('rail'),
+    hasSidebar: store.entries.has('sidebar'),
+    currentBreakpoint: breakpoint,
+    currentBreakpointReady: ready,
+    leftResolvedPresentation: rail?.presentation,
+    ...actions,
+  };
 }