@womp/kookie-ui 0.31.0 → 0.33.0

package/src/components/shell.tsx

@@ -36,16 +36,16 @@ import { usePane, paneAttributes, usePresentationTable } from './_internal/shell
 import { splitHandles, useInitialPaneSize, useResizablePane } from './_internal/shell-resizable.js';
 import {
   FIXED_TABLE,
-  ShellInsetContext,
+  ShellFrameContext,
   ShellStoreContext,
   createShellStore,
   setShellPeek,
   subscribeShellStore,
-  useInsetRegistration,
+  useFrameRegistration,
   usePaneEntry,
   useShellStore,
   warnOnce,
-  type InsetPaneId,
+  type FramePaneId,
 } from './_internal/shell-store.js';
 import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRemovedPaneProps } from './_internal/shell-rest.js';
 import { useShell, useSidebarMode } from './shell.context.js';
@@ -145,20 +145,20 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   const rootRef = React.useRef<HTMLDivElement | null>(null);
   const composedRef = useComposedRefs(ref, rootRef);
 
-  // Inset: the Root paints the backdrop while any pane is inset.
-  const [insetPanes, setInsetPanes] = React.useState<ReadonlySet<InsetPaneId>>(() => new Set());
-  const registerInset = React.useCallback((id: InsetPaneId) => {
-    setInsetPanes((prev) => (prev.has(id) ? prev : new Set(prev).add(id)));
+  // The panes pulled off the frame (`flush={false}`). Only the Rail's is read, for the offset below.
+  const [offFrame, setOffFrame] = React.useState<ReadonlySet<FramePaneId>>(() => new Set());
+  const registerOffFrame = React.useCallback((id: FramePaneId) => {
+    setOffFrame((prev) => (prev.has(id) ? prev : new Set(prev).add(id)));
   }, []);
-  const unregisterInset = React.useCallback((id: InsetPaneId) => {
-    setInsetPanes((prev) => {
+  const unregisterOffFrame = React.useCallback((id: FramePaneId) => {
+    setOffFrame((prev) => {
       if (!prev.has(id)) return prev;
       const next = new Set(prev);
       next.delete(id);
       return next;
     });
   }, []);
-  const insetContext = React.useMemo(() => ({ registerInset, unregisterInset }), [registerInset, unregisterInset]);
+  const frameContext = React.useMemo(() => ({ registerOffFrame, unregisterOffFrame }), [registerOffFrame, unregisterOffFrame]);
 
   const closeOverlays = React.useCallback(() => {
     for (const entry of store.entries.values()) {
@@ -444,10 +444,10 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   };
 
   // A floating Panel sits beside the Rail when the Rail is showing, and
-  // beside its card when the Rail is inset.
+  // beside its card when the Rail is off the frame.
   const rail = store.entries.get('rail');
   const railShown = rail !== undefined && rail.value !== undefined && rail.value !== 'closed';
-  const railOffset = railShown ? (insetPanes.has('rail') ? `calc(${rail.size}px + 2 * var(--shell-inset-gap))` : `${rail.size}px`) : undefined;
+  const railOffset = railShown ? (offFrame.has('rail') ? `calc(${rail.size}px + 2 * var(--shell-gap))` : `${rail.size}px`) : undefined;
 
   // `full` writes no inline height: the stylesheet states it as 100vh with a
   // 100dvh override where supported, and an inline value would beat both.
@@ -459,7 +459,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
       <ShellContentContext.Provider value={false}>
       <ShellWindowContext.Provider value={windowShell}>
       <ShellHeaderHeightContext.Provider value={setHeaderHeight}>
-      <ShellInsetContext.Provider value={insetContext}>
+      <ShellFrameContext.Provider value={frameContext}>
       {/* A Shell inside a portalled surface's Theme starts with no band, like any other. */}
       <PaneBandSizeContext.Provider value={undefined}>
         {/* The Root is not a widget: it hears Escape bubbling up from the panes,
@@ -472,7 +472,6 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           data-height={height === 'auto' && !contained ? 'auto' : undefined}
           data-contained={contained || undefined}
           data-window={windowShell || undefined}
-          data-has-inset={insetPanes.size > 0 || undefined}
           data-overlay-live={liveCount > 0 || undefined}
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
@@ -490,7 +489,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           <div className="kui-ShellScrim" aria-hidden onClick={closeOverlays} />
         </div>
       </PaneBandSizeContext.Provider>
-      </ShellInsetContext.Provider>
+      </ShellFrameContext.Provider>
       </ShellHeaderHeightContext.Provider>
       </ShellWindowContext.Provider>
       </ShellContentContext.Provider>
@@ -504,9 +503,14 @@ Root.displayName = 'Shell.Root';
 
 interface ShellHeaderProps extends React.ComponentPropsWithoutRef<'header'> {
   height?: number;
+  /**
+   * Sets whether the header joins the app frame. The default is `true`: a hairline under it. Set
+   * `flush={false}` to make it a card off the frame.
+   */
+  flush?: boolean;
 }
 
-const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, height = DEFAULT_HEADER_HEIGHT, style, ...props }, ref) => {
+const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, height = DEFAULT_HEADER_HEIGHT, flush = true, style, ...props }, ref) => {
   // Rows that stick beneath the header while the page scrolls need its height. The stylesheet
   // assumes the default, so only another height is told to the Root.
   const setHeaderHeight = React.useContext(ShellHeaderHeightContext);
@@ -520,6 +524,7 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, hei
       {...props}
       ref={ref}
       className={classNames('kui-ShellHeader', className)}
+      data-flush={flush || undefined}
       style={
         {
           ...style,
@@ -541,7 +546,6 @@ interface LeftProps extends React.ComponentPropsWithoutRef<'div'> {
   collapsible?: boolean;
   onExpand?: () => void;
   onCollapse?: () => void;
-  inset?: boolean;
 }
 
 /**
@@ -572,14 +576,19 @@ type RailProps = React.ComponentPropsWithoutRef<'div'> & {
   onExpand?: () => void;
   /** @deprecated Use `onOpenChange`. */
   onCollapse?: () => void;
-  /** When true, adds margin and triggers the gray backdrop on the Shell. */
-  inset?: boolean;
+  /**
+   * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
+   * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
+   * card. It then floats over the content if the content is flush, and otherwise sits on the
+   * Shell's background beside a card content.
+   */
+  flush?: boolean;
 } & (RailControlledProps | RailUncontrolledProps);
 
 const RAIL_PROP_NAMES = { controlled: 'open', default: 'defaultOpen' };
 
 const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
-  const { className, presentation, expandedSize = 64, collapsible: _collapsible, onExpand, onCollapse, children, style, open, defaultOpen, onOpenChange, inset, id, ...domProps } = props;
+  const { className, presentation, expandedSize = 64, collapsible: _collapsible, onExpand, onCollapse, children, style, open, defaultOpen, onOpenChange, flush = true, id, ...domProps } = props;
   const { table, attributes } = usePresentationTable(presentation, 'fixed');
   const pane = usePane({
     name: 'rail',
@@ -595,7 +604,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
     onCollapse,
     size: expandedSize,
   });
-  useInsetRegistration('rail', inset);
+  useFrameRegistration('rail', flush);
   const composedRef = useComposedRefs(ref, pane.setElement);
 
   return (
@@ -606,7 +615,7 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellRail', className)}
       {...paneAttributes(pane, attributes)}
-      data-inset={inset || undefined}
+      data-flush={flush || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={{ ...style, '--rail-size': `${expandedSize}px` } as CSSPropertiesWithVars}
     >
@@ -644,8 +653,13 @@ type PanelPublicProps = PaneBaseProps &
     onSizeChange?: (size: number, meta: PanelSizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;
-    /** When true, adds margin and triggers the gray backdrop on the Shell. */
-    inset?: boolean;
+    /**
+     * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
+     * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
+     * card. It then floats over the content if the content is flush, and otherwise sits on the
+     * Shell's background beside a card content.
+     */
+    flush?: boolean;
   };
 type PanelComponent = React.ForwardRefExoticComponent<PanelPublicProps & React.RefAttributes<HTMLDivElement>> & {
   Handle: HandleComponent;
@@ -688,7 +702,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
     onSizeChange,
     sizeUpdate,
     sizeUpdateMs = 50,
-    inset,
+    flush = true,
     id,
     ...domProps
   } = props;
@@ -713,7 +727,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
     onCollapse,
     size: expandedSize,
   });
-  useInsetRegistration('panel', inset);
+  useFrameRegistration('panel', flush);
 
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
@@ -774,7 +788,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellPanel', className)}
       {...paneAttributes(pane, presentationAttributes)}
-      data-inset={inset || undefined}
+      data-flush={flush || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={
         {
@@ -799,18 +813,22 @@ Panel.Handle = PanelHandle;
 /* ── Content ───────────────────────────────────────────────────────────────── */
 
 interface ShellContentProps extends React.ComponentPropsWithoutRef<'main'> {
-  /** When true, adds margin and triggers the gray backdrop on the Shell. */
-  inset?: boolean;
+  /**
+   * Sets whether the work area joins the app frame. The default is `true`. Set `flush={false}`
+   * to make it a card on the Shell's background; the panes beside it then sit on that background
+   * too, and draw no hairline toward it.
+   */
+  flush?: boolean;
 }
 
 /**
  * The work area. It scrolls as it is; with a `Shell.Scroll` child it becomes a column and the
  * Scroll scrolls instead, so a `Shell.PaneHeader float` beside it stays pinned over the page.
  */
-const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, inset, children, ...props }, ref) => {
-  useInsetRegistration('content', inset);
+const Content = React.forwardRef<HTMLElement, ShellContentProps>(({ className, flush = true, children, ...props }, ref) => {
+  useFrameRegistration('content', flush);
   return (
-    <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-inset={inset || undefined}>
+    <main {...props} ref={ref} className={classNames('kui-ShellContent', className)} data-flush={flush || undefined}>
       {/* Each pane holds its own page store, so a band's title can mirror the page beside it. */}
       <ShellContentContext.Provider value={true}>
         <PageScope>{children}</PageScope>

package/src/styles/tokens/color.css

@@ -8,6 +8,8 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  /* A rule between two regions, such as the hairline between two flush Shell panes. The same role and value as v2's. */
+  --color-border: var(--neutral-6, var(--gray-6));
   /* A background for an app page that holds raised surfaces. No component reads it. */
   --color-ground: var(--neutral-1, var(--gray-1));
 

package/styles.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-border: var(--neutral-6, var(--gray-6));
   --color-ground: var(--neutral-1, var(--gray-1));
   --field-fill: var(--color-surface);
   --field-fill-hover: var(--neutral-2);
@@ -12558,19 +12559,19 @@
 }
 .kui-Link:where(:-moz-any-link,button) {
   cursor: var(--cursor-link);
-  text-decoration-line: none;
+  text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-thickness: min(2px, max(1px, 0.05em));
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--accent-a5);
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--accent-a6);
 }
 .kui-Link:where(:any-link,button) {
   cursor: var(--cursor-link);
-  text-decoration-line: none;
+  text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-thickness: min(2px, max(1px, 0.05em));
-  text-underline-offset: calc(0.025em + 2px);
-  text-decoration-color: var(--accent-a5);
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--accent-a6);
 }
 .kui-Link:where(:disabled,[data-disabled]) {
   cursor: var(--cursor-disabled);
@@ -12578,19 +12579,21 @@
 .kui-Link:where(:focus-visible) {
   border-radius: calc(0.07em * var(--radius-factor));
   outline-color: var(--focus-8);
-  outline-width: 2px;
+  outline-width: var(--focus-ring-width);
   outline-style: solid;
-  outline-offset: 2px;
+  outline-offset: var(--focus-ring-offset);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 :where([data-accent-color]:not(.kui-theme)) .kui-Link:where([data-accent-color='']) {
   color: var(--accent-ink);
 }
-@supports (color: color-mix(in oklab, white, black)) {
-  .kui-Link:where(:-moz-any-link,button) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+@media (hover: hover) {
+  .kui-Link:where(:-moz-any-link,button):where(:hover) {
+    text-decoration-color: currentcolor;
   }
-  .kui-Link:where(:any-link,button) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+  .kui-Link:where(:any-link,button):where(:hover) {
+    text-decoration-color: currentcolor;
   }
 }
 @media (pointer: coarse) {
@@ -12603,44 +12606,6 @@
     outline-offset: -0.6em;
   }
 }
-@media (hover: hover) {
-  .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where(:hover) {
-    text-decoration-line: underline;
-  }
-  .kui-Link:where(:any-link,button):where(.kui-underline-auto):where(:hover) {
-    text-decoration-line: underline;
-  }
-}
-:where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-  text-decoration-line: underline;
-  text-decoration-color: var(--accent-a6);
-}
-:where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-  text-decoration-line: underline;
-  text-decoration-color: var(--accent-a6);
-}
-@supports (color: color-mix(in oklab, white, black)) {
-  :where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:-moz-any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-  }
-  :where([data-accent-color]:not(.kui-theme)) .kui-Link:where(:any-link,button):where(.kui-underline-auto):where([data-accent-color='']) {
-    text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-  }
-}
-@media (hover: hover) {
-  .kui-Link:where(:-moz-any-link,button):where(.kui-underline-hover):where(:hover) {
-    text-decoration-line: underline;
-  }
-  .kui-Link:where(:any-link,button):where(.kui-underline-hover):where(:hover) {
-    text-decoration-line: underline;
-  }
-}
-.kui-Link:where(:-moz-any-link,button):where(.kui-underline-always) {
-  text-decoration-line: underline;
-}
-.kui-Link:where(:any-link,button):where(.kui-underline-always) {
-  text-decoration-line: underline;
-}
 .kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {
   text-decoration-color: transparent;
 }
@@ -16965,7 +16930,7 @@
   }
 }
 .kui-ShellRoot {
-  --shell-inset-gap: var(--space-3);
+  --shell-gap: var(--space-3);
   --shell-rail-offset: 0px;
   --kui-shell-page-top: 0px;
   display: grid;
@@ -17740,51 +17705,102 @@
 .kui-ShellRoot[data-height='auto'] > .kui-ShellPane[data-presentation='overlay'] {
   position: fixed;
 }
-.kui-ShellRoot:has(> [data-inset])::before,
-.kui-ShellRoot[data-has-inset]::before {
-  content: '';
-  grid-row: 2;
-  grid-column: 1 / -1;
-  background: var(--neutral-2);
+.kui-ShellHeader[data-flush],
+.kui-ShellPane[data-flush],
+.kui-ShellContent[data-flush] {
+  border: 0 solid var(--color-border);
+  border-radius: 0;
+}
+.kui-ShellHeader[data-flush] {
+  border-block-end-width: 1px;
+}
+.kui-ShellRail[data-flush],
+.kui-ShellPanel[data-flush],
+.kui-ShellSidebar[data-flush] {
+  border-inline-end-width: 1px;
+}
+.kui-ShellInspector[data-flush] {
+  border-inline-start-width: 1px;
+}
+.kui-ShellBottom[data-flush] {
+  border-block-start-width: 1px;
+}
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellHeader[data-flush] {
+  border-block-end-width: 0;
 }
-.kui-ShellPane[data-inset],
-.kui-ShellContent[data-inset] {
-  margin: var(--shell-inset-gap);
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellSidebar[data-flush],
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellPanel[data-flush],
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellRail[data-flush] {
+  border-inline-end-width: 0;
+}
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellInspector[data-flush] {
+  border-inline-start-width: 0;
+}
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellBottom[data-flush] {
+  border-block-start-width: 0;
+}
+.kui-ShellHeader:not([data-flush]),
+.kui-ShellPane:not([data-flush]),
+.kui-ShellContent:not([data-flush]) {
+  margin: var(--shell-gap);
   border-radius: var(--radius-surface-1);
-  background: var(--color-page);
+  background-color: var(--color-page);
   -webkit-box-shadow: var(--surface-chrome);
           box-shadow: var(--surface-chrome);
 }
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellPanel[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellSidebar[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellSidebar[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellContent[data-inset]) > .kui-ShellInspector[data-inset][data-presentation='fixed'] {
+.kui-ShellHeader:not([data-flush]) {
+  z-index: 1;
+}
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) {
+  background-color: var(--neutral-2);
+}
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellPanel:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellInspector:not([data-flush])[data-presentation='fixed'] {
   -webkit-margin-start: 0;
           margin-inline-start: 0;
 }
-.kui-ShellRoot:has(
-    > .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellContent[data-inset],
-    > .kui-ShellInspector[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])
-  )
-  > .kui-ShellBottom[data-inset] {
+.kui-ShellRoot:has(> .kui-ShellHeader:not([data-flush])) > :is(.kui-ShellPane:not(.kui-ShellBottom), .kui-ShellContent):not([data-flush]),
+.kui-ShellRoot:has(> :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector):not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellContent:not([data-flush])) > .kui-ShellBottom:not([data-flush]) {
   -webkit-margin-before: 0;
           margin-block-start: 0;
 }
+.kui-ShellRoot:has(> .kui-ShellSidebar[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellPanel[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellRail[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]) {
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+}
+.kui-ShellRoot:has(> .kui-ShellInspector[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]) {
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+.kui-ShellRoot:has(> .kui-ShellBottom[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]) {
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+}
+.kui-ShellRoot:has(> .kui-ShellSidebar:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: sidebar-start;
+}
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])):not(:has(> .kui-ShellSidebar[data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: panel-start;
+}
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])):not(:has(> .kui-ShellPanel[data-flush], > .kui-ShellSidebar[data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: rail-start;
+}
+.kui-ShellRoot:has(> .kui-ShellInspector:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-end: inspector-end;
+}
+.kui-ShellRoot:has(> .kui-ShellHeader:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-row-start: header-start;
+}
+.kui-ShellRoot:has(> .kui-ShellBottom:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-row-end: bottom-end;
+}
 @media (max-width: 767.98px) and (pointer: coarse) {
   .kui-ShellRoot[data-window] {
     height: auto;

package/tokens/base.css

@@ -61,6 +61,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-border: var(--neutral-6, var(--gray-6));
   --color-ground: var(--neutral-1, var(--gray-1));
   --field-fill: var(--color-surface);
   --field-fill-hover: var(--neutral-2);

package/tokens.css

@@ -3377,6 +3377,7 @@
   --color-page: white;
   --color-overlay: var(--black-a6);
   --color-surface: white;
+  --color-border: var(--neutral-6, var(--gray-6));
   --color-ground: var(--neutral-1, var(--gray-1));
   --field-fill: var(--color-surface);
   --field-fill-hover: var(--neutral-2);

package/dist/esm/chunk-4B3S2DM7.js

@@ -1,3 +0,0 @@
-"use client";
-import{b as H,d as U,g as D}from"./chunk-XUCR7L4G.js";import{a as V,c as m}from"./chunk-3QWGSRYC.js";import{a as k,b as I,c as N}from"./chunk-LTUW36HM.js";import{a as w,b as B,c as A}from"./chunk-QKCNGEX4.js";import{a as T}from"./chunk-WEBNIUEX.js";import{a as y}from"./chunk-G66WDIIV.js";import{b as M}from"./chunk-VWRPVM5K.js";import{f as E}from"./chunk-NFSW36RG.js";import{o as x}from"./chunk-GHWEXMF6.js";import*as e from"react";import Se from"classnames";import{useComposedRefs as ue}from"radix-ui/internal";var L=t=>t==="collapsed"?"closed":"open",ce=t=>t==="closed"?"collapsed":"expanded";function O(t){if(t===void 0)return;if(typeof t=="string")return L(t);let n={};for(let[r,i]of Object.entries(t))i!==void 0&&(n[r]=L(i));return n}var me={controlled:"state",default:"defaultState"},be={initial:"overlay",sm:"fixed"},_=e.forwardRef((t,n)=>{let{className:r,presentation:i=be,expandedSize:o=288,minSize:s=200,maxSize:d=400,resizable:b=!1,collapsible:$=!0,onExpand:W,onCollapse:j,onResize:q,onResizeStart:F,onResizeEnd:G,snapPoints:l,snapTolerance:K,collapseThreshold:p,paneId:S,persistence:u,children:J,style:Q,state:X,defaultState:Y,onStateChange:Z,size:f,defaultSize:P,onSizeChange:ee,sizeUpdate:ae,sizeUpdateMs:te=50,inset:g,id:ne,...c}=t,{table:h,attributes:ie}=N(i,"fixed"),a=k({name:"sidebar",label:"Sidebar",propNames:me,id:ne,controlled:O(X),defaultValue:O(Y),presentationTable:h,builtIn:H,onChange:(le,pe)=>Z?.(ce(le),{reason:pe}),onExpand:W,onCollapse:j,size:o});x("sidebar",g),e.useEffect(()=>{(l!==void 0||p!==void 0||S!==void 0||u!==void 0)&&void 0},[l,p,S,u]);let z=e.useRef(null),oe=ue(n,a.setElement,z),re=B({name:"sidebar",elementId:a.id,elementRef:z,cssVarName:"--sidebar-size",orientation:"vertical",edge:"end",growth:U,expandedSize:o,minSize:s,maxSize:d,resizable:b,collapsible:$,size:f,defaultSize:P,onSizeChange:ee,sizeUpdate:ae,sizeUpdateMs:te,onResize:q,onResizeStart:F,onResizeEnd:G,snapPoints:l,snapTolerance:K,collapseThreshold:p,paneId:S,persistence:u,overlaying:a.overlaying,overlayingNow:()=>h[y()]==="overlay",requestCollapse:()=>a.setValue("closed","toggle"),requestToggle:()=>a.toggle("toggle")}),{handles:v,content:se}=A(J,m),de=b&&a.value!=="closed"&&!a.overlaying?e.createElement(T.Provider,{value:re},v.length>0?v:e.createElement(V,null)):null,R=a.peeking?`var(--sidebar-size, ${o}px)`:void 0,C=w(f,P,s,d);return e.createElement("div",{...D(c),role:c.role??"navigation",id:a.id,ref:oe,className:Se("kui-ShellPane","kui-ShellSidebar",r),...I(a,ie),"data-inset":g||void 0,tabIndex:a.overlaying?-1:c.tabIndex,style:{...Q,"--sidebar-expanded-size":`${o}px`,...C?{"--sidebar-size":C}:{},"--sidebar-min-size":`${s}px`,"--sidebar-max-size":`${d}px`,...R?{"--peek-sidebar-width":R}:{}}},e.createElement("div",{className:"kui-ShellSidebarContent"},e.createElement(E,null,e.createElement(M,null,se))),de)});_.displayName="Shell.Sidebar";_.Handle=m;export{_ as a};
-//# sourceMappingURL=chunk-4B3S2DM7.js.map

package/dist/esm/chunk-4B3S2DM7.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/_internal/shell-sidebar.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useComposedRefs } from 'radix-ui/internal';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { PaneHandle, SidebarHandle } from './shell-handles.js';\nimport { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';\nimport { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';\nimport { useInsetRegistration, warnOnce, type PaneValue } from './shell-store.js';\nimport { navigationRest, startAnchoredGrowth, withoutRemovedPaneProps } from './shell-rest.js';\nimport { readBreakpoint } from '../../hooks/use-breakpoint.js';\nimport { PaneChromeScope } from './pane-chrome.js';\nimport { PageScope } from './page-scope.js';\nimport type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, Responsive, SidebarMode } from '../shell.types.js';\n\ntype SidebarStateChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };\ntype SidebarControlledProps = { state: Responsive<SidebarMode>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; defaultState?: never };\ntype SidebarUncontrolledProps = { defaultState?: SidebarMode | Partial<Record<Breakpoint, SidebarMode>>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; state?: never };\ntype SidebarPublicProps = PaneBaseProps & {\n  size?: number | string;\n  defaultSize?: number | string;\n  onSizeChange?: (size: number, meta: SizeChangeMeta) => void;\n  sizeUpdate?: 'throttle' | 'debounce';\n  sizeUpdateMs?: number;\n  /** When true, adds margin and triggers the gray backdrop on the Shell. */\n  inset?: boolean;\n} & (SidebarControlledProps | SidebarUncontrolledProps);\n\ntype SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };\n\nconst toValue = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : 'open');\nconst toMode = (value: PaneValue): SidebarMode => (value === 'closed' ? 'collapsed' : 'expanded');\n\nfunction modeToValue(state: Responsive<SidebarMode> | undefined): PaneValue | Partial<Record<Breakpoint, PaneValue>> | undefined {\n  if (state === undefined) return undefined;\n  if (typeof state === 'string') return toValue(state);\n  const map: Partial<Record<Breakpoint, PaneValue>> = {};\n  for (const [bp, mode] of Object.entries(state) as Array<[Breakpoint, SidebarMode | undefined]>) {\n    if (mode !== undefined) map[bp] = toValue(mode);\n  }\n  return map;\n}\n\nconst SIDEBAR_PROP_NAMES = { controlled: 'state', default: 'defaultState' };\n\n/** Since 0.8.0 the Sidebar is in the frame from 768px up, the boundary kookie-ui-v2 uses everywhere. It was 1024px. */\nconst SIDEBAR_DEFAULT_PRESENTATION = { initial: 'overlay', sm: 'fixed' } as const;\n\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((props, ref) => {\n  const {\n    className,\n    presentation = SIDEBAR_DEFAULT_PRESENTATION,\n    expandedSize = 288,\n    minSize = 200,\n    maxSize = 400,\n    resizable = false,\n    collapsible = true,\n    onExpand,\n    onCollapse,\n    onResize,\n    onResizeStart,\n    onResizeEnd,\n    snapPoints,\n    snapTolerance,\n    collapseThreshold,\n    paneId,\n    persistence,\n    children,\n    style,\n    state,\n    defaultState,\n    onStateChange,\n    size,\n    defaultSize,\n    onSizeChange,\n    sizeUpdate,\n    sizeUpdateMs = 50,\n    inset,\n    id,\n    ...domProps\n  } = props;\n\n  const { table, attributes } = usePresentationTable(presentation, 'fixed');\n  const pane = usePane({\n    name: 'sidebar',\n    label: 'Sidebar',\n    propNames: SIDEBAR_PROP_NAMES,\n    id,\n    controlled: modeToValue(state),\n    defaultValue: modeToValue(defaultState),\n    presentationTable: table,\n    builtIn: navigationRest,\n    onChange: (value, reason) => onStateChange?.(toMode(value), { reason }),\n    onExpand,\n    onCollapse,\n    size: expandedSize,\n  });\n  useInsetRegistration('sidebar', inset);\n\n  React.useEffect(() => {\n    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {\n      warnOnce('Shell.Sidebar: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');\n    }\n  }, [snapPoints, collapseThreshold, paneId, persistence]);\n\n  const elementRef = React.useRef<HTMLElement | null>(null);\n  const composedRef = useComposedRefs(ref, pane.setElement, elementRef);\n\n  const resize = useResizablePane({\n    name: 'sidebar',\n    elementId: pane.id,\n    elementRef,\n    cssVarName: '--sidebar-size',\n    orientation: 'vertical',\n    edge: 'end',\n    growth: startAnchoredGrowth,\n    expandedSize,\n    minSize,\n    maxSize,\n    resizable,\n    collapsible,\n    size,\n    defaultSize,\n    onSizeChange,\n    sizeUpdate,\n    sizeUpdateMs,\n    onResize,\n    onResizeStart,\n    onResizeEnd,\n    snapPoints,\n    snapTolerance,\n    collapseThreshold,\n    paneId,\n    persistence,\n    overlaying: pane.overlaying,\n    overlayingNow: () => table[readBreakpoint()] === 'overlay',\n    requestCollapse: () => pane.setValue('closed', 'toggle'),\n    requestToggle: () => pane.toggle('toggle'),\n  });\n\n  const { handles, content } = splitHandles(children, SidebarHandle);\n  const handle =\n    resizable && pane.value !== 'closed' && !pane.overlaying ? (\n      <PaneResizeContext.Provider value={resize}>{handles.length > 0 ? handles : <PaneHandle />}</PaneResizeContext.Provider>\n    ) : null;\n\n  // A peek previews the width the next toggle opens to.\n  const peekWidth = pane.peeking ? `var(--sidebar-size, ${expandedSize}px)` : undefined;\n\n  const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);\n  return (\n    <div\n      {...withoutRemovedPaneProps(domProps)}\n      role={domProps.role ?? 'navigation'}\n      id={pane.id}\n      ref={composedRef}\n      className={classNames('kui-ShellPane', 'kui-ShellSidebar', className)}\n      {...paneAttributes(pane, attributes)}\n      data-inset={inset || undefined}\n      tabIndex={pane.overlaying ? -1 : domProps.tabIndex}\n      style={\n        {\n          ...style,\n          '--sidebar-expanded-size': `${expandedSize}px`,\n          ...(initialSize ? { '--sidebar-size': initialSize } : {}),\n          '--sidebar-min-size': `${minSize}px`,\n          '--sidebar-max-size': `${maxSize}px`,\n          ...(peekWidth ? { '--peek-sidebar-width': peekWidth } : {}),\n        } as CSSPropertiesWithVars\n      }\n    >\n      <div className=\"kui-ShellSidebarContent\">\n        <PaneChromeScope>\n          <PageScope>{content}</PageScope>\n        </PaneChromeScope>\n      </div>\n      {handle}\n    </div>\n  );\n}) as SidebarComponent;\n\nSidebar.displayName = 'Shell.Sidebar';\nSidebar.Handle = SidebarHandle;\n\nexport type { SidebarPublicProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "useComposedRefs", "toValue", "mode", "toMode", "value", "modeToValue", "state", "map", "bp", "SIDEBAR_PROP_NAMES", "SIDEBAR_DEFAULT_PRESENTATION", "Sidebar", "props", "ref", "className", "presentation", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "defaultState", "onStateChange", "size", "defaultSize", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "inset", "id", "domProps", "table", "attributes", "usePresentationTable", "pane", "usePane", "navigationRest", "reason", "useInsetRegistration", "elementRef", "composedRef", "useComposedRefs", "resize", "useResizablePane", "startAnchoredGrowth", "readBreakpoint", "handles", "content", "splitHandles", "SidebarHandle", "handle", "PaneResizeContext", "PaneHandle", "peekWidth", "initialSize", "useInitialPaneSize", "withoutRemovedPaneProps", "classNames", "paneAttributes", "PaneChromeScope", "PageScope"]
-}

package/dist/esm/chunk-AKMRPGNP.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as c,c as M,e as w,g as H}from"./chunk-XUCR7L4G.js";import{a as v,d}from"./chunk-3QWGSRYC.js";import{a as y,b as x,c as O}from"./chunk-LTUW36HM.js";import{a as E,b as T,c as N}from"./chunk-QKCNGEX4.js";import{a as R}from"./chunk-WEBNIUEX.js";import{a as S}from"./chunk-G66WDIIV.js";import{b}from"./chunk-VWRPVM5K.js";import{o as C}from"./chunk-GHWEXMF6.js";import*as e from"react";import pe from"classnames";import{useComposedRefs as le}from"radix-ui/internal";var de={controlled:"open",default:"defaultOpen"},ce={initial:"overlay",sm:"fixed"},U=e.forwardRef((k,A)=>{let{className:B,presentation:V=ce,defaultOpen:L,open:_,onOpenChange:D,expandedSize:o=320,minSize:t=200,maxSize:s=500,resizable:m=!1,collapsible:$=!0,onExpand:q,onCollapse:F,onResize:W,onResizeStart:j,onResizeEnd:G,snapPoints:r,snapTolerance:K,collapseThreshold:a,paneId:i,persistence:p,children:J,style:Q,onSizeChange:X,sizeUpdate:Y,sizeUpdateMs:Z=50,size:u,defaultSize:P,inset:f,id:ee,...l}=k,{table:z,attributes:ne}=O(V,"fixed"),n=y({name:"inspector",label:"Inspector",propNames:de,id:ee,controlled:c(_),defaultValue:c(L),presentationTable:z,builtIn:M,onChange:(ae,ie)=>D?.(ae!=="closed",{reason:ie}),onExpand:q,onCollapse:F,size:o});C("inspector",f),e.useEffect(()=>{(r!==void 0||a!==void 0||i!==void 0||p!==void 0)&&void 0},[r,a,i,p]);let h=e.useRef(null),oe=le(A,n.setElement,h),te=T({name:"inspector",elementId:n.id,elementRef:h,cssVarName:"--inspector-size",orientation:"vertical",edge:"start",growth:w,expandedSize:o,minSize:t,maxSize:s,resizable:m,collapsible:$,size:u,defaultSize:P,onSizeChange:X,sizeUpdate:Y,sizeUpdateMs:Z,onResize:W,onResizeStart:j,onResizeEnd:G,snapPoints:r,snapTolerance:K,collapseThreshold:a,paneId:i,persistence:p,overlaying:n.overlaying,overlayingNow:()=>z[S()]==="overlay",requestCollapse:()=>n.setValue("closed","toggle"),requestToggle:()=>n.toggle("toggle")}),{handles:I,content:se}=N(J,d),re=m&&n.shown!==!1&&!n.overlaying?e.createElement(R.Provider,{value:te},I.length>0?I:e.createElement(v,null)):null,g=E(u,P,t,s);return e.createElement("div",{...H(l),role:l.role??"complementary",id:n.id,ref:oe,className:pe("kui-ShellPane","kui-ShellInspector",B),...x(n,ne),"data-inset":f||void 0,tabIndex:n.overlaying?-1:l.tabIndex,style:{...Q,"--inspector-expanded-size":`${o}px`,...g?{"--inspector-size":g}:{},"--inspector-min-size":`${t}px`,"--inspector-max-size":`${s}px`}},e.createElement("div",{className:"kui-ShellInspectorContent"},e.createElement(b,null,se)),re)});U.displayName="Shell.Inspector";U.Handle=d;export{U as a};
-//# sourceMappingURL=chunk-AKMRPGNP.js.map

package/dist/esm/chunk-AKMRPGNP.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/_internal/shell-inspector.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useComposedRefs } from 'radix-ui/internal';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { InspectorHandle, PaneHandle } from './shell-handles.js';\nimport { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';\nimport { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';\nimport { useInsetRegistration, warnOnce } from './shell-store.js';\nimport { detailRest, endAnchoredGrowth, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';\nimport { PageScope } from './page-scope.js';\nimport { readBreakpoint } from '../../hooks/use-breakpoint.js';\nimport type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps } from '../shell.types.js';\n\ntype InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dismiss' };\ntype InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };\ntype InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };\ntype InspectorSizeControlledProps = { size: number | string; defaultSize?: never };\ntype InspectorSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype InspectorPublicProps = PaneBaseProps &\n  (InspectorControlledProps | InspectorUncontrolledProps) &\n  (InspectorSizeControlledProps | InspectorSizeUncontrolledProps) & {\n    onSizeChange?: (size: number, meta: SizeChangeMeta) => void;\n    sizeUpdate?: 'throttle' | 'debounce';\n    sizeUpdateMs?: number;\n    /** When true, adds margin and triggers the gray backdrop on the Shell. */\n    inset?: boolean;\n  };\n\ntype InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };\n\nconst INSPECTOR_PROP_NAMES = { controlled: 'open', default: 'defaultOpen' };\n\n/** Since 0.8.0 the Inspector is in the frame from 768px up, the boundary kookie-ui-v2 uses everywhere. It was 1280px. */\nconst INSPECTOR_DEFAULT_PRESENTATION = { initial: 'overlay', sm: 'fixed' } as const;\n\nexport const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>((props, ref) => {\n  const {\n    className,\n    presentation = INSPECTOR_DEFAULT_PRESENTATION,\n    defaultOpen,\n    open,\n    onOpenChange,\n    expandedSize = 320,\n    minSize = 200,\n    maxSize = 500,\n    resizable = false,\n    collapsible = true,\n    onExpand,\n    onCollapse,\n    onResize,\n    onResizeStart,\n    onResizeEnd,\n    snapPoints,\n    snapTolerance,\n    collapseThreshold,\n    paneId,\n    persistence,\n    children,\n    style,\n    onSizeChange,\n    sizeUpdate,\n    sizeUpdateMs = 50,\n    size,\n    defaultSize,\n    inset,\n    id,\n    ...domProps\n  } = props;\n\n  const { table, attributes } = usePresentationTable(presentation, 'fixed');\n  const pane = usePane({\n    name: 'inspector',\n    label: 'Inspector',\n    propNames: INSPECTOR_PROP_NAMES,\n    id,\n    controlled: toPaneValue(open),\n    defaultValue: toPaneValue(defaultOpen),\n    presentationTable: table,\n    builtIn: detailRest,\n    onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),\n    onExpand,\n    onCollapse,\n    size: expandedSize,\n  });\n  useInsetRegistration('inspector', inset);\n\n  React.useEffect(() => {\n    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {\n      warnOnce('Shell.Inspector: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');\n    }\n  }, [snapPoints, collapseThreshold, paneId, persistence]);\n\n  const elementRef = React.useRef<HTMLElement | null>(null);\n  const composedRef = useComposedRefs(ref, pane.setElement, elementRef);\n\n  const resize = useResizablePane({\n    name: 'inspector',\n    elementId: pane.id,\n    elementRef,\n    cssVarName: '--inspector-size',\n    orientation: 'vertical',\n    edge: 'start',\n    growth: endAnchoredGrowth,\n    expandedSize,\n    minSize,\n    maxSize,\n    resizable,\n    collapsible,\n    size,\n    defaultSize,\n    onSizeChange,\n    sizeUpdate,\n    sizeUpdateMs,\n    onResize,\n    onResizeStart,\n    onResizeEnd,\n    snapPoints,\n    snapTolerance,\n    collapseThreshold,\n    paneId,\n    persistence,\n    overlaying: pane.overlaying,\n    overlayingNow: () => table[readBreakpoint()] === 'overlay',\n    requestCollapse: () => pane.setValue('closed', 'toggle'),\n    requestToggle: () => pane.toggle('toggle'),\n  });\n\n  const { handles, content } = splitHandles(children, InspectorHandle);\n  const handle = resizable && pane.shown !== false && !pane.overlaying ? <PaneResizeContext.Provider value={resize}>{handles.length > 0 ? handles : <PaneHandle />}</PaneResizeContext.Provider> : null;\n\n  const initialSize = useInitialPaneSize(size, defaultSize, minSize, maxSize);\n  return (\n    <div\n      {...withoutRemovedPaneProps(domProps)}\n      role={domProps.role ?? 'complementary'}\n      id={pane.id}\n      ref={composedRef}\n      className={classNames('kui-ShellPane', 'kui-ShellInspector', className)}\n      {...paneAttributes(pane, attributes)}\n      data-inset={inset || undefined}\n      tabIndex={pane.overlaying ? -1 : domProps.tabIndex}\n      style={\n        {\n          ...style,\n          '--inspector-expanded-size': `${expandedSize}px`,\n          ...(initialSize ? { '--inspector-size': initialSize } : {}),\n          '--inspector-min-size': `${minSize}px`,\n          '--inspector-max-size': `${maxSize}px`,\n        } as CSSPropertiesWithVars\n      }\n    >\n      <div className=\"kui-ShellInspectorContent\">\n        <PageScope>{content}</PageScope>\n      </div>\n      {handle}\n    </div>\n  );\n}) as InspectorComponent;\n\nInspector.displayName = 'Shell.Inspector';\nInspector.Handle = InspectorHandle;\n\nexport type { InspectorPublicProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "useComposedRefs", "INSPECTOR_PROP_NAMES", "INSPECTOR_DEFAULT_PRESENTATION", "Inspector", "props", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "size", "defaultSize", "inset", "id", "domProps", "table", "attributes", "usePresentationTable", "pane", "usePane", "toPaneValue", "detailRest", "value", "reason", "useInsetRegistration", "elementRef", "composedRef", "useComposedRefs", "resize", "useResizablePane", "endAnchoredGrowth", "readBreakpoint", "handles", "content", "splitHandles", "InspectorHandle", "handle", "PaneResizeContext", "PaneHandle", "initialSize", "useInitialPaneSize", "withoutRemovedPaneProps", "classNames", "paneAttributes", "PageScope"]
-}

package/dist/esm/chunk-B7STVZPU.js

@@ -1,3 +0,0 @@
-"use client";
-import{a}from"./chunk-FICBVI4M.js";import{a as s}from"./chunk-BQC2P3SN.js";import{b as n,c as i,d as m}from"./chunk-UJ7JERJ5.js";import{d as p}from"./chunk-HBWBPBSA.js";import{c as t}from"./chunk-OKQAVYW4.js";import{a as r}from"./chunk-CLJ6SEGP.js";import*as e from"react";import L from"classnames";var y=["1","2","3","4","5","6","7","8","9"],D=["auto","always","hover","none"],f={...r,size:{type:"enum",className:"kui-r-size",values:y,responsive:!0},...m,...s,...i,...n,underline:{type:"enum",className:"kui-underline",values:D,default:"auto"},...p};var h=e.forwardRef((l,c)=>{let{children:o,className:P,color:u,asChild:d,...k}=t(l,f);return e.createElement(a,{...k,"data-accent-color":u,ref:c,asChild:!0,className:L("kui-reset","kui-Link",P)},d?o:e.createElement("a",null,o))});h.displayName="Link";export{h as a};
-//# sourceMappingURL=chunk-B7STVZPU.js.map

package/dist/esm/chunk-EFXHBH3A.js

@@ -1,2 +0,0 @@
-import{a as t}from"./chunk-KEWNXANF.js";import{a as o}from"./chunk-SBRPXQWH.js";import{a as s}from"./chunk-SJXV4BWZ.js";import{a as p}from"./chunk-N6KH2EOU.js";import{d as r}from"./chunk-CUNKWFKA.js";import{a as e}from"./chunk-NZJGC6ZW.js";var i=["1","2","3","4","5","6","7","8","9"],n=["auto","always","hover","none"],D={...e,size:{type:"enum",className:"kui-r-size",values:i,responsive:!0},...p,...t,...s,...o,underline:{type:"enum",className:"kui-underline",values:n,default:"auto"},...r};export{D as a};
-//# sourceMappingURL=chunk-EFXHBH3A.js.map

package/dist/esm/chunk-EFXHBH3A.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/link.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';\nimport { leadingTrimPropDef } from '../props/leading-trim.prop.js';\nimport { textWrapPropDef } from '../props/text-wrap.prop.js';\nimport { truncatePropDef } from '../props/truncate.prop.js';\nimport { weightPropDef } from '../props/weight.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;\nconst underline = ['auto', 'always', 'hover', 'none'] as const;\n\nconst linkPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    className: 'kui-r-size',\n    values: sizes,\n    responsive: true,\n  },\n  ...weightPropDef,\n  ...leadingTrimPropDef,\n  ...truncatePropDef,\n  ...textWrapPropDef,\n  underline: { type: 'enum', className: 'kui-underline', values: underline, default: 'auto' },\n  ...accentColorPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  underline: PropDef<(typeof underline)[number]>;\n};\n\nexport { linkPropDefs };\n"],
-  "mappings": "gPASA,IAAMA,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,GAAG,EACpDC,EAAY,CAAC,OAAQ,SAAU,QAAS,MAAM,EAE9CC,EAAe,CACnB,GAAGC,EACH,KAAM,CACJ,KAAM,OACN,UAAW,aACX,OAAQH,EACR,WAAY,EACd,EACA,GAAGI,EACH,GAAGC,EACH,GAAGC,EACH,GAAGC,EACH,UAAW,CAAE,KAAM,OAAQ,UAAW,gBAAiB,OAAQN,EAAW,QAAS,MAAO,EAC1F,GAAGO,CACL",
-  "names": ["sizes", "underline", "linkPropDefs", "asChildPropDef", "weightPropDef", "leadingTrimPropDef", "truncatePropDef", "textWrapPropDef", "accentColorPropDef"]
-}

package/dist/esm/chunk-GHWEXMF6.js

@@ -1,3 +0,0 @@
-"use client";
-import{b as s}from"./chunk-MAA6LEE2.js";import*as o from"react";import{useLayoutEffect as p}from"radix-ui/internal";function l(e){return typeof e=="object"&&e!==null}function d(e,n){let t={},r=null;for(let i of s){if(e!==void 0&&!l(e)){t[i]=e;continue}let a=l(e)?e[i]:void 0;a!==void 0&&(r={value:a}),t[i]=r?r.value:n(i)}return t}function f(e){let n=e.initial;return s.every(t=>e[t]===n)?n:void 0}function T(e,n){let t=f(n);if(t!==void 0)return{[`data-${e}`]:t};let r={};for(let i of s)r[`data-${e}-${i}`]=n[i];return r}function g(e){return typeof e=="object"&&e!==null?JSON.stringify(e):String(e)}var R=d("fixed",()=>"fixed");function y(){return{entries:new Map,listeners:new Set,version:0,peek:null}}function S(e){e.version+=1;for(let n of e.listeners)n()}function c(e,n){return e.listeners.add(n),()=>{e.listeners.delete(n)}}function m(e,n){e.peek!==n&&(e.peek=n,S(e))}var b=o.createContext(null);function I(e){let n=o.useContext(b);if(!n)throw new Error(`${e} must be used within <Shell.Root>`);return n}function k(e,n){let t=o.useCallback(i=>c(e,i),[e]),r=o.useCallback(()=>e.entries.get(n),[e,n]);return o.useSyncExternalStore(t,r,()=>{})}function v(e,n){let t=o.useCallback(r=>c(e,r),[e]);return o.useSyncExternalStore(t,()=>e.peek===n,()=>!1)}var x=o.createContext(null);function E(e,n){let t=o.useContext(x);if(!t)throw new Error("Shell panes must be used within <Shell.Root>");let{registerInset:r,unregisterInset:i}=t;p(()=>{if(n)return r(e),()=>i(e)},[e,n,r,i])}var u=new Set;function w(e){}export{d as a,f as b,T as c,g as d,R as e,y as f,S as g,c as h,m as i,b as j,I as k,k as l,v as m,x as n,E as o,w as p};
-//# sourceMappingURL=chunk-GHWEXMF6.js.map