@alexgorbatchev/shadcn 0.0.22 → 0.0.24

package/dist/index.js

@@ -4,7 +4,7 @@ import {
 import {
   buttonVariants2,
   Button2
-} from "./chunk-73rkr9ct.js";
+} from "./chunk-btz12z1j.js";
 import {
   DensityContext,
   useDensity
@@ -80,7 +80,7 @@ import {
   DialogFooter2,
   DialogTitle2,
   DialogDescription2
-} from "./chunk-70vndezn.js";
+} from "./chunk-rg7c7wxt.js";
 import {
   Slider2
 } from "./chunk-644cnngf.js";
@@ -116,7 +116,7 @@ import {
   InputGroupText2,
   InputGroupInput2,
   InputGroupTextarea2
-} from "./chunk-1jeg5z55.js";
+} from "./chunk-8zhqkj8r.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -131,7 +131,7 @@ import {
   useDropTarget2,
   DropTarget2,
   Kanban2
-} from "./chunk-kbg2e95b.js";
+} from "./chunk-nx21zbg9.js";
 import {
   badgeVariants2,
   Badge2
@@ -174,7 +174,7 @@ import {
   AvatarBadge2,
   AvatarGroup2,
   AvatarGroupCount2
-} from "./chunk-gg39sggp.js";
+} from "./chunk-hyq4nwg2.js";
 import {
   Progress2,
   ProgressTrack2,
@@ -244,7 +244,7 @@ import {
   SidebarMenuSub2,
   SidebarMenuSubItem2,
   SidebarMenuSubButton2
-} from "./chunk-dq7kr5y0.js";
+} from "./chunk-82wxsc8p.js";
 import {
   Toolbar2,
   ToolbarButton2,
@@ -252,7 +252,7 @@ import {
   ToolbarInput2,
   ToolbarGroup2,
   ToolbarSeparator2
-} from "./chunk-21wbz345.js";
+} from "./chunk-z1dkx9dm.js";
 // src/components/ButtonLink.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -923,51 +923,171 @@ function DensityProvider({
     children: element
   });
 }
-// src/components/ThemeProvider.tsx
-import { useMemo } from "react";
-import { useIsomorphicLayoutEffect, useTernaryDarkMode } from "usehooks-ts";
-
-// src/components/ScrollGuard.tsx
+// src/hooks/useDocumentGuard.ts
 import { useEffect } from "react";
+var registrations = new WeakMap;
+function useDocumentGuard(observe, ownerDocument) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production")
+      return;
+    const target = ownerDocument ?? document;
+    let observers = registrations.get(target);
+    if (!observers) {
+      observers = new Map;
+      registrations.set(target, observers);
+    }
+    let registration = observers.get(observe);
+    if (!registration) {
+      registration = { users: 0, disconnect: observe(target) };
+      observers.set(observe, registration);
+    }
+    registration.users++;
+    return () => {
+      registration.users--;
+      if (!registration.users) {
+        registration.disconnect();
+        observers.delete(observe);
+        if (!observers.size)
+          registrations.delete(target);
+      }
+    };
+  }, [observe, ownerDocument]);
+}
 
-// src/utils/observeScrollGuards.ts
-function throwViolation(error) {
-  throw error;
+// src/utils/getLayoutAnimations.ts
+function getLayoutAnimations(root) {
+  const document2 = root.ownerDocument ?? root;
+  const view = document2.defaultView;
+  if (!view)
+    return [];
+  const boundaries = [...root.querySelectorAll("[data-layout-boundary]")];
+  if (root instanceof view.Element && root.hasAttribute("data-layout-boundary"))
+    boundaries.push(root);
+  return document2.getAnimations().filter((animation) => {
+    if (animation.playState !== "running" || animation.effect?.getComputedTiming().iterations === Infinity)
+      return false;
+    const target = animation.effect instanceof view.KeyframeEffect ? animation.effect.target : null;
+    return target instanceof view.Element && boundaries.some((boundary) => boundary.contains(target) || target.contains(boundary));
+  });
 }
-function getViolation(element, view) {
-  if (!element.getClientRects().length)
-    return;
+
+// src/utils/collectLayoutViolations.ts
+function identify(element) {
+  const slot = element.getAttribute("data-slot");
+  const name = element.getAttribute("aria-label") ?? element.textContent?.trim().slice(0, 60);
+  return `${element.localName}${element.id ? `#${element.id}` : slot ? `[data-slot="${slot}"]` : ""}${name ? ` "${name}"` : ""}`;
+}
+function isHidden(element, view) {
+  if (element.closest('[inert], [data-layout-exclude]:not([data-layout-exclude=""])'))
+    return true;
+  if (!element.checkVisibility({ visibilityProperty: true, opacityProperty: true }))
+    return true;
   const style = view.getComputedStyle(element);
-  if (style.visibility !== "visible")
-    return;
-  const axes = [];
-  if (["auto", "scroll"].includes(style.overflowX) && element.scrollWidth > element.clientWidth) {
-    axes.push(`horizontal: ${element.scrollWidth}px > ${element.clientWidth}px`);
-  }
-  if (["auto", "scroll"].includes(style.overflowY) && element.scrollHeight > element.clientHeight) {
-    axes.push(`vertical: ${element.scrollHeight}px > ${element.clientHeight}px`);
+  return style.clip === "rect(0px, 0px, 0px, 0px)" || style.clipPath === "inset(50%)";
+}
+function collectLayoutViolations(root, tolerance = 1) {
+  const document2 = root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument;
+  const view = document2.defaultView;
+  if (!view)
+    return [];
+  const boundaries = [...root.querySelectorAll("[data-layout-boundary]")];
+  if (root instanceof view.Element && root.hasAttribute("data-layout-boundary"))
+    boundaries.unshift(root);
+  const violations = [];
+  for (const boundary of boundaries) {
+    if (isHidden(boundary, view))
+      continue;
+    const bounds = boundary.getBoundingClientRect();
+    const axis = boundary.getAttribute("data-layout-boundary");
+    for (const element of [boundary, ...boundary.querySelectorAll("*")]) {
+      if (isHidden(element, view) || element.parentElement?.closest("svg"))
+        continue;
+      let checkX = axis !== "y";
+      let checkY = axis !== "x";
+      const isControl = element.matches("button, a[href], input, select, textarea, [tabindex], [role=button]");
+      const elementBounds = element.getBoundingClientRect();
+      const limits = { left: bounds.left, right: bounds.right, top: bounds.top, bottom: bounds.bottom };
+      if (isControl) {
+        limits.left = Math.max(limits.left, elementBounds.left);
+        limits.right = Math.min(limits.right, elementBounds.right);
+        limits.top = Math.max(limits.top, elementBounds.top);
+        limits.bottom = Math.min(limits.bottom, elementBounds.bottom);
+      }
+      let ancestor = element === boundary ? null : element.parentElement;
+      let hidden = false;
+      while (ancestor && ancestor !== boundary) {
+        if (isHidden(ancestor, view)) {
+          hidden = true;
+          break;
+        }
+        const style = view.getComputedStyle(ancestor);
+        if (isControl) {
+          const clip = ancestor.getBoundingClientRect();
+          if (["hidden", "clip"].includes(style.overflowX)) {
+            limits.left = Math.max(limits.left, clip.left);
+            limits.right = Math.min(limits.right, clip.right);
+          }
+          if (["hidden", "clip"].includes(style.overflowY)) {
+            limits.top = Math.max(limits.top, clip.top);
+            limits.bottom = Math.min(limits.bottom, clip.bottom);
+          }
+        }
+        if (["auto", "scroll"].includes(style.overflowX))
+          checkX = false;
+        if (["auto", "scroll"].includes(style.overflowY))
+          checkY = false;
+        ancestor = ancestor.parentElement;
+      }
+      if (hidden)
+        continue;
+      const rectangles = [...element.getClientRects()];
+      const style = view.getComputedStyle(element);
+      if (style.textOverflow !== "ellipsis") {
+        for (const child of element.childNodes) {
+          if (child.nodeType !== Node.TEXT_NODE || !child.textContent?.trim())
+            continue;
+          const range = document2.createRange();
+          range.selectNodeContents(child);
+          rectangles.push(...range.getClientRects());
+        }
+      }
+      for (const edge of ["left", "right", "top", "bottom"]) {
+        if (edge === "left" || edge === "right" ? !checkX : !checkY)
+          continue;
+        const overflow = Math.max(0, ...rectangles.map((rect) => edge === "left" || edge === "top" ? limits[edge] - rect[edge] : rect[edge] - limits[edge]));
+        if (overflow <= tolerance)
+          continue;
+        violations.push({
+          boundary,
+          element,
+          edge,
+          overflow,
+          message: `${identify(element)} exceeds ${identify(boundary)} ${edge} edge by ${Math.round(overflow * 100) / 100}px`
+        });
+      }
+    }
   }
-  if (!axes.length)
-    return;
-  const slot = element.getAttribute("data-slot");
-  const identity = element.id ? ` id="${element.id}"` : slot ? ` data-slot="${slot}"` : "";
-  return `<${element.localName}${identity}> (${axes.join(", ")})`;
+  return violations;
 }
-function observeScrollGuards(ownerDocument, reportViolation = throwViolation) {
+
+// src/utils/observeLayoutChanges.ts
+function observeLayoutChanges(ownerDocument, selector, checkLayout) {
   const view = ownerDocument.defaultView;
   if (!view)
     return () => {};
+  let isConnected = true;
   let frame;
   let needsRefresh = true;
   let guarded = [];
   const observed = new Set;
-  const reported = new WeakSet;
   const schedule = () => {
+    if (!isConnected)
+      return;
     frame ??= view.requestAnimationFrame(check);
   };
   const resizeObserver = new view.ResizeObserver(schedule);
   const refresh = () => {
-    guarded = [...ownerDocument.querySelectorAll('[data-scroll="none"]')];
+    guarded = [...ownerDocument.querySelectorAll(selector)];
     const targets = new Set(guarded.flatMap((element) => [element, ...element.querySelectorAll("*")]));
     for (const element of observed) {
       if (!targets.has(element)) {
@@ -987,22 +1107,10 @@ function observeScrollGuards(ownerDocument, reportViolation = throwViolation) {
     frame = undefined;
     if (needsRefresh)
       refresh();
-    const violations = [];
-    for (const element of guarded) {
-      const violation = getViolation(element, view);
-      if (!violation) {
-        reported.delete(element);
-      } else if (!reported.has(element)) {
-        reported.add(element);
-        violations.push(violation);
-      }
-    }
-    if (violations.length) {
-      reportViolation(new Error(`[shadcn] Scrolling is forbidden by data-scroll="none": ${violations.join("; ")}. ` + "Move scrolling content into a nested ScrollArea or another explicit scroll viewport."));
-    }
+    checkLayout(guarded, schedule);
   };
   const mutations = new view.MutationObserver((records) => {
-    needsRefresh ||= records.some((record) => record.type === "childList" || record.attributeName === "data-scroll");
+    needsRefresh ||= records.some((record) => record.type === "childList" || record.type === "attributes");
     schedule();
   });
   mutations.observe(ownerDocument.documentElement, {
@@ -1012,17 +1120,20 @@ function observeScrollGuards(ownerDocument, reportViolation = throwViolation) {
     attributes: true
   });
   view.addEventListener("resize", schedule);
+  ownerDocument.addEventListener("scroll", schedule, true);
   ownerDocument.addEventListener("load", schedule, true);
   ownerDocument.addEventListener("transitionend", schedule, true);
   ownerDocument.addEventListener("animationend", schedule, true);
   ownerDocument.fonts.addEventListener("loadingdone", schedule);
   schedule();
   return () => {
+    isConnected = false;
     mutations.disconnect();
     resizeObserver.disconnect();
     if (frame !== undefined)
       view.cancelAnimationFrame(frame);
     view.removeEventListener("resize", schedule);
+    ownerDocument.removeEventListener("scroll", schedule, true);
     ownerDocument.removeEventListener("load", schedule, true);
     ownerDocument.removeEventListener("transitionend", schedule, true);
     ownerDocument.removeEventListener("animationend", schedule, true);
@@ -1030,28 +1141,92 @@ function observeScrollGuards(ownerDocument, reportViolation = throwViolation) {
   };
 }
 
+// src/utils/observeLayoutGuards.ts
+function throwViolation(error) {
+  throw error;
+}
+function observeLayoutGuards(document2, report = throwViolation) {
+  const pending = new WeakSet;
+  let previous = "";
+  return observeLayoutChanges(document2, "[data-layout-boundary]", (_elements, schedule) => {
+    const animations = getLayoutAnimations(document2);
+    for (const animation of animations) {
+      if (pending.has(animation))
+        continue;
+      pending.add(animation);
+      const settled = () => {
+        pending.delete(animation);
+        schedule();
+      };
+      animation.finished.then(settled, settled);
+    }
+    if (animations.length)
+      return;
+    const message = collectLayoutViolations(document2).map((violation) => violation.message).join("; ");
+    const hasChanged = message !== previous;
+    previous = message;
+    if (message && hasChanged)
+      report(new Error(`[shadcn] Layout containment: ${message}`));
+  });
+}
+
+// src/components/LayoutGuard.tsx
+"use client";
+function LayoutGuard({ ownerDocument }) {
+  useDocumentGuard(observeLayoutGuards, ownerDocument);
+  return null;
+}
+
+// src/components/ThemeProvider.tsx
+import { useMemo } from "react";
+import { useIsomorphicLayoutEffect, useTernaryDarkMode } from "usehooks-ts";
+
+// src/utils/observeScrollGuards.ts
+function throwViolation2(error) {
+  throw error;
+}
+function getViolation(element, view) {
+  if (!element.getClientRects().length)
+    return;
+  const style = view.getComputedStyle(element);
+  if (style.visibility !== "visible")
+    return;
+  const axes = [];
+  if (["auto", "scroll"].includes(style.overflowX) && element.scrollWidth > element.clientWidth) {
+    axes.push(`horizontal: ${element.scrollWidth}px > ${element.clientWidth}px`);
+  }
+  if (["auto", "scroll"].includes(style.overflowY) && element.scrollHeight > element.clientHeight) {
+    axes.push(`vertical: ${element.scrollHeight}px > ${element.clientHeight}px`);
+  }
+  if (!axes.length)
+    return;
+  const slot = element.getAttribute("data-slot");
+  const identity = element.id ? ` id="${element.id}"` : slot ? ` data-slot="${slot}"` : "";
+  return `<${element.localName}${identity}> (${axes.join(", ")})`;
+}
+function observeScrollGuards(ownerDocument, reportViolation = throwViolation2) {
+  const reported = new WeakSet;
+  return observeLayoutChanges(ownerDocument, '[data-scroll="none"]', (guarded) => {
+    const view = ownerDocument.defaultView;
+    const violations = [];
+    for (const element of guarded) {
+      const violation = getViolation(element, view);
+      if (!violation)
+        reported.delete(element);
+      else if (!reported.has(element)) {
+        reported.add(element);
+        violations.push(violation);
+      }
+    }
+    if (violations.length)
+      reportViolation(new Error('[shadcn] Scrolling is forbidden by data-scroll="none": ' + violations.join("; ") + ". " + "Move scrolling content into a nested ScrollArea or another explicit scroll viewport."));
+  });
+}
+
 // src/components/ScrollGuard.tsx
 "use client";
-var registrations = new WeakMap;
 function ScrollGuard({ ownerDocument }) {
-  useEffect(() => {
-    if (process.env.NODE_ENV === "production")
-      return;
-    const target = ownerDocument ?? document;
-    let registration = registrations.get(target);
-    if (!registration) {
-      registration = { users: 0, disconnect: observeScrollGuards(target) };
-      registrations.set(target, registration);
-    }
-    registration.users++;
-    return () => {
-      registration.users--;
-      if (!registration.users) {
-        registration.disconnect();
-        registrations.delete(target);
-      }
-    };
-  }, [ownerDocument]);
+  useDocumentGuard(observeScrollGuards, ownerDocument);
   return null;
 }
 
@@ -1089,6 +1264,7 @@ function ThemePalette({
     value,
     children: [
       /* @__PURE__ */ jsx10(ScrollGuard, {}),
+      /* @__PURE__ */ jsx10(LayoutGuard, {}),
       children
     ]
   });
@@ -4075,6 +4251,7 @@ export {
   Kbd2 as Kbd,
   KbdGroup2 as KbdGroup,
   Label2 as Label,
+  LayoutGuard,
   Marker,
   MarkerContent,
   MarkerIcon,
@@ -4247,6 +4424,7 @@ export {
   buttonGroupVariants,
   buttonVariants2 as buttonVariants,
   cn2 as cn,
+  collectLayoutViolations,
   createToastManager,
   markerVariants,
   navigationMenuTriggerStyle,

package/dist/utils/collectLayoutViolations.d.ts

@@ -0,0 +1,13 @@
+export interface ILayoutViolation {
+    boundary: Element;
+    element: Element;
+    edge: "left" | "right" | "top" | "bottom";
+    overflow: number;
+    message: string;
+}
+/** Checks marked boundaries in the supplied root, including the root itself.
+ * data-layout-boundary="x" or "y" checks only that axis; an empty value checks both.
+ * Native scroll viewports permit displacement along their scrolling axes.
+ * data-layout-exclude requires a descriptive reason and excludes an intentional escape.
+ */
+export declare function collectLayoutViolations(root: Document | Element, tolerance?: number): ILayoutViolation[];

package/dist/utils/getLayoutAnimations.d.ts

@@ -0,0 +1,2 @@
+/** Finite animations affecting marked boundaries, including animated ancestors. */
+export declare function getLayoutAnimations(root: Document | Element): Animation[];

package/dist/utils/observeLayoutChanges.d.ts

@@ -0,0 +1,2 @@
+/** Batch document, portal, font and geometry changes into animation-frame checks. */
+export declare function observeLayoutChanges(ownerDocument: Document, selector: string, checkLayout: (elements: Element[], schedule: () => void) => void): () => void;

package/dist/utils/observeLayoutGuards.d.ts

@@ -0,0 +1,2 @@
+/** Observe marked boundaries, including portals, after finite animations settle. */
+export declare function observeLayoutGuards(document: Document, report?: (error: Error) => void): () => void;

package/dist/utils/observeScrollGuards.d.ts

@@ -1,4 +1,3 @@
 type ReportViolation = (error: Error) => void;
-/** Observe the current document, including portals. Descendant scroll viewports remain independent. */
 export declare function observeScrollGuards(ownerDocument: Document, reportViolation?: ReportViolation): () => void;
 export {};

package/llms/components/actions/Button.md

@@ -29,7 +29,7 @@ Button
 {
     variant: {
         control: "select",
-        options: ["default", "outline", "secondary", "ghost", "destructive", "success", "warning", "link"],
+        options: ["default", "outline", "secondary", "ghost", "destructive", "success", "warning", "link", "pad"],
     },
     size: {
         control: "select",
@@ -119,6 +119,22 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Pad
+
+```tsx
+{
+    args: { variant: "pad", size: "content" }
+}
+```
+
+### DisabledPad
+
+```tsx
+{
+    args: { variant: "pad", size: "content", disabled: true }
+}
+```
+
 ### Disabled
 
 ```tsx

package/llms/components/data-display/Avatar.md

@@ -27,7 +27,7 @@ Avatar
 ## Story controls
 
 ```tsx
-{ size: { control: "select", options: ["default", "sm", "lg", "preview"] } }
+{ size: { control: "select", options: ["default", "sm", "lg", "preview", "full"] } }
 ```
 
 ## Default render
@@ -67,6 +67,19 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### FullWidth
+
+```tsx
+{
+    args: { size: "full", shape: "square" },
+    decorators: [
+        (Story) => (<div data-testid="Avatar--container" className="w-52">
+        <Story />
+      </div>),
+    ]
+}
+```
+
 ### Square
 
 ```tsx

package/llms/components/navigation/Sidebar.md

@@ -17,7 +17,7 @@ import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupActio
 import type { Input } from "@base-ui/react/input";
 import type { ComponentProps, ReactElement } from "react";
 import { useRef, useState } from "react";
-import { FileIcon, HomeIcon, PlusIcon } from "lucide-react";
+import { FileIcon, HomeIcon, PlusIcon, SettingsIcon } from "lucide-react";
 ```
 
 ## Default component
@@ -48,7 +48,7 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 
 ```tsx
 {
-    render: () => <WorkspaceLayout />
+    render: (args) => <WorkspaceLayout {...args}/>
 }
 ```
 
@@ -217,7 +217,16 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 {
     render: (args) => (<SidebarProvider>
       <Sidebar {...args} aria-label="Loading projects">
-        <SidebarHeader>Loading projects</SidebarHeader>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton disabled>
+                <HomeIcon aria-hidden/>
+                <span>Loading projects</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
         <SidebarContent>
           <SidebarMenu>
             <SidebarMenuItem>
@@ -250,7 +259,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
                 <SidebarGroupContent>
                   <SidebarMenu>
                     <SidebarMenuItem>
-                      <SidebarMenuButton render={<a href="#folder"/>}>Folder link</SidebarMenuButton>
+                      <SidebarMenuButton render={<a href="#folder"/>}>
+                        <FileIcon aria-hidden/>
+                        <span>Folder link</span>
+                      </SidebarMenuButton>
                     </SidebarMenuItem>
                   </SidebarMenu>
                 </SidebarGroupContent>
@@ -328,3 +340,31 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 ```tsx
 {}
 ```
+
+### WorkspaceMenusCompactRight
+
+```tsx
+{
+    render: (args) => <WorkspaceLayout {...args}/>,
+    args: { side: "right" },
+    globals: { density: "compact", theme: "light" }
+}
+```
+
+### RightCompactDensity
+
+```tsx
+{
+    args: { side: "right" },
+    globals: { density: "compact", theme: "light" }
+}
+```
+
+### RightComfortableDensity
+
+```tsx
+{
+    args: { side: "right" },
+    globals: { density: "comfortable", theme: "light" }
+}
+```

package/llms/components/providers/LayoutGuard.md

@@ -0,0 +1,24 @@
+# LayoutGuard
+
+ThemeProvider installs LayoutGuard in development. Mark a surface with data-layout-boundary="" to check both axes, or "x" / "y" for one axis. collectLayoutViolations(root, tolerance = 1) returns elements, edges, pixel overflow, and diagnostic messages for browser assertions. Checks include text ranges and clipped controls. Native scroll viewports permit displacement on their scrolling axes. Hidden/inert content and screen-reader labels are excluded; ellipsis text is allowed. Use data-layout-exclude="reason" only for intentional escape such as an edge-mounted resize rail. Portals are independent: mark their own surfaces. Finite layout animations settle before development errors; production installs no observer. Check every meaningful interaction state in tests. Axis-aligned DOM geometry does not measure shadows, pseudo-elements, or painted SVG paths.
+
+Story: @alexgorbatchev/shadcn/components/providers/LayoutGuard
+Source: src/components/stories/providers/LayoutGuard.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/LayoutGuard.stories.tsx)
+
+## Public imports
+
+```tsx
+import { LayoutGuard } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+LayoutGuard
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.

package/llms.txt

@@ -457,6 +457,7 @@ Generated from the public package exports and Storybook sources.
 
 - [DensityProvider](./llms/components/providers/DensityProvider.md)
 - [DirectionProvider](./llms/components/providers/DirectionProvider.md)
+- [LayoutGuard](./llms/components/providers/LayoutGuard.md): ThemeProvider installs LayoutGuard in development. Mark a surface with data-layout-boundary="" to check both axes, or "x" / "y" for one axis. collectLayoutViolations(root, tolerance = 1) returns elements, edges, pixel overflow, and diagnostic messages for browser assertions. Checks include text ranges and clipped controls. Native scroll viewports permit displacement on their scrolling axes. Hidden/inert content and screen-reader labels are excluded; ellipsis text is allowed. Use data-layout-exclude="reason" only for intentional escape such as an edge-mounted resize rail. Portals are independent: mark their own surfaces. Finite layout animations settle before development errors; production installs no observer. Check every meaningful interaction state in tests. Axis-aligned DOM geometry does not measure shadows, pseudo-elements, or painted SVG paths.
 - [PortalProvider](./llms/components/providers/PortalProvider.md)
 - [ScrollGuard](./llms/components/providers/ScrollGuard.md): ThemeProvider mounts ScrollGuard automatically in development. Mark any HTML element with data-scroll="none" to reject accidental scrolling on that element. Place intentional scrolling in a nested ScrollArea or native scroll viewport. Errors identify the offending element and axis. Production builds install no observers.
 - [ThemeProvider](./llms/components/providers/ThemeProvider.md): The preview decorator owns one document-wide ThemeProvider. These controls change its persisted preference. The theme toolbar can force a palette on any other story.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {