@kushagradhawan/kookie-ui 0.1.49 → 0.1.51

package/src/components/sheet.css

@@ -12,28 +12,22 @@
 
 /* Logical side anchoring (RTL-aware via logical inset) */
 :where(.rt-SheetContent[data-side='start']) {
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: auto !important;
+  inset-block: 0 !important;
+  inset-inline-start: 0 !important;
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 :where(.rt-SheetContent[data-side='end']) {
-  top: 0 !important;
-  bottom: 0 !important;
-  right: 0 !important;
-  left: auto !important;
+  inset-block: 0 !important;
+  inset-inline-end: 0 !important;
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='top']) {
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: auto !important;
+  inset-block-start: 0 !important;
+  inset-inline: 0 !important;
   width: auto;
   max-width: none;
   height: var(--height, 75vh);
@@ -42,10 +36,8 @@
   border-start-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='bottom']) {
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  top: auto !important;
+  inset-block-end: 0 !important;
+  inset-inline: 0 !important;
   width: auto;
   max-width: none;
   height: var(--height, 75vh);

package/src/components/shell.context.tsx

@@ -54,3 +54,82 @@ export function useShell() {
 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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any);
+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 as any,
+);
+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 as any);
+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 as any);
+export function useComposition() {
+  const ctx = React.useContext(CompositionContext);
+  if (!ctx) throw new Error('useComposition must be used within Shell.Root');
+  return ctx;
+}

package/src/components/shell.css

@@ -74,6 +74,8 @@
 
 .rt-ShellRail[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed panes out of flow to avoid layout blips when exiting peek */
@@ -90,7 +92,6 @@
   flex-direction: column;
   width: var(--rail-size, 64px);
   height: 100%;
-  padding: var(--space-2);
   gap: var(--space-2);
 
   /* Content animation: fade out first, then fade in after width settles */
@@ -128,6 +129,8 @@
 
 .rt-ShellPanel:not([data-visible]) {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed panel out of flow to avoid layout blips when exiting peek */
@@ -188,6 +191,8 @@
 
 .rt-ShellSidebar[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed sidebar out of flow to avoid layout blips when exiting peek */
@@ -218,6 +223,22 @@
   opacity: 1;
 }
 
+/* Sidebar presentation switch sequencing (thin ↔ expanded) */
+.rt-ShellSidebarContent[data-phase='hiding'] {
+  /* Immediately fade out */
+  opacity: 0;
+  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebarContent[data-phase='resizing'] {
+  /* Keep hidden during width transition */
+  opacity: 0;
+}
+.rt-ShellSidebarContent[data-phase='showing'] {
+  /* Fade back in after width settles */
+  opacity: 1;
+  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
   /* Exit animation: fade out content first */
   opacity: 0;
@@ -274,6 +295,8 @@
 
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellInspector[data-mode='collapsed'] {
@@ -327,6 +350,8 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellBottomContent {
@@ -537,13 +562,14 @@
   box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
 }
 
-/* Force content visible during peek */
+/* Peek: expand container first, then fade content in */
 .rt-ShellRail[data-peek] .rt-ShellRailContent,
 .rt-ShellPanel[data-peek] .rt-ShellPanelContent,
 .rt-ShellSidebar[data-peek] .rt-ShellSidebarContent,
 .rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
 .rt-ShellBottom[data-peek] .rt-ShellBottomContent {
   opacity: 1;
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Rail peek: left edge */

package/src/components/shell.hooks.ts

@@ -29,3 +29,38 @@ export function useResponsivePresentation(presentation: ResponsivePresentation):
     return 'fixed';
   }, [presentation, currentBreakpoint]);
 }
+
+/**
+ * Resolve a responsive value (T or responsive map keyed by breakpoints) against the current Shell breakpoint.
+ * If no value is defined for the current breakpoint, search smaller breakpoints down to 'initial'.
+ * Returns undefined when passed a responsive map with no matching key across the chain.
+ */
+export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>> | undefined): T | undefined {
+  const { currentBreakpoint } = useShell();
+
+  return React.useMemo(() => {
+    if (value == null) return undefined;
+    // Primitive value
+    if (typeof value !== 'object') {
+      return value as T;
+    }
+
+    const map = value as Partial<Record<Breakpoint, T>>;
+    if (map[currentBreakpoint as Breakpoint] !== undefined) {
+      return map[currentBreakpoint as Breakpoint] as T;
+    }
+
+    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
+    const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
+
+    for (let i = startIdx + 1; i < order.length; i++) {
+      const bp = order[i];
+      if (map[bp] !== undefined) {
+        return map[bp] as T;
+      }
+    }
+
+    return undefined;
+  }, [value, currentBreakpoint]);
+}