@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Layer/useLayer.js

@@ -0,0 +1,281 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useLayer.tsx
+ * @input Uses React hooks, Popover API, CSS anchor positioning, typography tokens
+ * @output Exports useLayer hook for layer positioning and visibility
+ * @position Core layer utility; used by useHoverCard, useTooltip, etc.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/Layer.doc.mjs
+ * - /packages/core/src/Layer/index.ts
+ */
+import React, { useCallback, useId, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { typographyVars } from "../theme/tokens.stylex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    keoZOQ: "xdj266r",
+    k1K539: "xat24cr",
+    keTefX: "x1lziwak",
+    k71WvV: "x14z9mp",
+    kLKAdn: "xexx8yu",
+    kGO01o: "x18d9i69",
+    kZCmMZ: "x1c1uobl",
+    kwRFfy: "xyri2b",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kVQacm: "x1rea2x4",
+    kMv6JI: "x9ynric",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  fixed: {
+    kVAEAm: "xixxii4",
+    $$css: true
+  }
+};
+
+/**
+ * Position placement relative to anchor
+ */
+
+/**
+ * Alignment along the placement axis
+ */
+
+/**
+ * Render props for context mode (anchor positioning)
+ */
+
+/**
+ * Render props for fixed mode (manual coordinates)
+ */
+
+/**
+ * Base options shared by both modes
+ */
+
+/**
+ * Options for context mode (CSS anchor positioning)
+ */
+
+/**
+ * Options for fixed mode (manual positioning)
+ */
+
+/**
+ * Return type for context mode
+ */
+
+/**
+ * Return type for fixed mode
+ */
+
+/**
+ * Map placement and alignment to CSS position-area value.
+ */
+function getPositionArea(placement = 'above', alignment = 'center') {
+  const placementMap = {
+    above: 'top',
+    below: 'bottom',
+    start: 'left',
+    end: 'right'
+  };
+  const cssPlacement = placementMap[placement];
+
+  // For above/below, alignment is horizontal
+  if (placement === 'above' || placement === 'below') {
+    if (alignment === 'start') {
+      return `${cssPlacement} span-right`;
+    }
+    if (alignment === 'end') {
+      return `${cssPlacement} span-left`;
+    }
+    return cssPlacement; // center
+  }
+
+  // For start/end, alignment is vertical
+  if (alignment === 'start') {
+    return `${cssPlacement} span-bottom`;
+  }
+  if (alignment === 'end') {
+    return `${cssPlacement} span-top`;
+  }
+  return `${cssPlacement} center`;
+}
+
+/**
+ * Core layer hook that handles popover behavior and positioning.
+ *
+ * Supports two positioning modes with type-safe render props:
+ * - `context`: CSS anchor positioning relative to a trigger element
+ * - `fixed`: Fixed positioning at specified coordinates
+ *
+ * @example
+ * ```
+ * const layer = useLayer({ mode: 'context' });
+ * <button ref={layer.ref}>Trigger</button>
+ * {layer.render(<Content />, { placement: 'above', alignment: 'center' })}
+ * ```
+ */
+
+export function useLayer(options) {
+  const {
+    mode,
+    onShow,
+    onHide,
+    lightDismiss = false
+  } = options;
+  const id = useId();
+  const anchorId = `--astryx-layer-${id.replace(/:/g, '')}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  // Ref mirrors isOpen for synchronous reads inside show/hide.
+  // State drives re-renders; the ref lets the imperative calls avoid
+  // stale-closure reads of the previous isOpen value.
+  const isOpenRef = useRef(false);
+  const show = useCallback(() => {
+    if (popoverRef.current && !isOpenRef.current) {
+      popoverRef.current.showPopover();
+      isOpenRef.current = true;
+      setIsOpen(true);
+      onShow?.();
+    }
+  }, [onShow]);
+  const hide = useCallback(() => {
+    if (isOpenRef.current) {
+      popoverRef.current?.hidePopover();
+      isOpenRef.current = false;
+      setIsOpen(false);
+      onHide?.();
+    }
+  }, [onHide]);
+
+  // Ref for trigger element (context mode only)
+  const ref = mode === 'context' ? el => {
+    // Cleanup previous element
+    if (triggerRef.current) {
+      triggerRef.current.style.anchorName = '';
+    }
+    if (el) {
+      el.style.anchorName = anchorId;
+    }
+    triggerRef.current = el;
+  } : undefined;
+
+  // Reconcile browser-initiated closes (light-dismiss, popover="auto" stack
+  // eviction). These are the only cases where the DOM mutates without going
+  // through our show/hide — we sync React state back to match.
+  //
+  // No "open" case: the browser never spontaneously opens a popover. Opens
+  // only happen via showPopover() which we always call from show().
+  //
+  // The isOpenRef guard prevents double-firing: when our hide() already set
+  // the ref to false, the subsequent toggle event (which the browser fires
+  // as a side-effect of hidePopover) sees false and skips.
+  const handleToggle = useCallback(e => {
+    const toggleEvent = e;
+    if (toggleEvent.newState === 'closed' && isOpenRef.current) {
+      isOpenRef.current = false;
+      setIsOpen(false);
+      onHide?.();
+    }
+  }, [onHide]);
+
+  // Ref callback for popover element — sets up toggle listener
+  const popoverRefCallback = useCallback(el => {
+    popoverRef.current = el;
+    if (el) {
+      el.addEventListener('toggle', handleToggle);
+    }
+  }, [handleToggle]);
+
+  // Render function for context mode
+  const renderContext = useCallback((children, props) => {
+    const {
+      placement = 'above',
+      alignment = 'center',
+      xstyle,
+      className: extraClassName,
+      style: extraStyle
+    } = props || {};
+
+    // CSS anchor positioning (dynamic, not in StyleX)
+    const anchorStyle = {
+      positionAnchor: anchorId,
+      positionArea: getPositionArea(placement, alignment),
+      positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline'
+    };
+    const stylexResult = stylex.props(styles.base, xstyle);
+    const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
+    return /*#__PURE__*/_jsx("div", {
+      ref: popoverRefCallback,
+      id: id,
+      popover: lightDismiss ? 'auto' : 'manual',
+      className: combinedClassName,
+      style: {
+        ...stylexResult.style,
+        ...anchorStyle,
+        ...extraStyle
+      },
+      children: children
+    });
+  }, [anchorId, id, lightDismiss, popoverRefCallback]);
+
+  // Render function for fixed mode
+  const renderFixed = useCallback((children, props) => {
+    const {
+      x,
+      y,
+      xstyle,
+      className: extraClassName,
+      style: extraStyle
+    } = props;
+
+    // Dynamic position values
+    const positionStyle = {
+      top: y,
+      left: x
+    };
+    const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
+    const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
+    return /*#__PURE__*/_jsx("div", {
+      ref: popoverRefCallback,
+      id: id,
+      popover: lightDismiss ? 'auto' : 'manual',
+      className: combinedClassName,
+      style: {
+        ...stylexResult.style,
+        ...positionStyle,
+        ...extraStyle
+      },
+      children: children
+    });
+  }, [popoverRefCallback, id, lightDismiss]);
+  if (mode === 'context') {
+    return {
+      ref: ref,
+      anchorId,
+      show,
+      hide,
+      isOpen,
+      id,
+      render: renderContext
+    };
+  }
+  return {
+    ref: undefined,
+    show,
+    hide,
+    isOpen,
+    id,
+    render: renderFixed
+  };
+}

package/dist/Layout/Layout.d.ts

@@ -0,0 +1,137 @@
+/**
+ * @file Layout.tsx
+ * @input Uses React, stack/stackItem utilities, LayoutAreaContext, LayoutSlotsContext
+ * @output Exports Layout component and LayoutProps, LayoutHeight types
+ * @position Page shell and app layout — use for any page with a header, sidebar, or content area.
+ *   Building a page with a sidebar? Use Layout with start/end slots.
+ *   Need a header + scrollable content? Use Layout with header + content slots.
+ *   Manages padding collapse, scroll containment, and responsive slot sizing automatically.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /apps/storybook/stories/Layout.stories.tsx
+ * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { SpacingStep } from '../utils/types';
+/**
+ * Height behavior for the layout.
+ * - `fill`: Layout fills container height, content scrolls internally (default)
+ * - `auto`: Layout grows with content, container/page scrolls
+ */
+export type LayoutHeight = 'fill' | 'auto';
+export interface LayoutProps extends Omit<BaseProps, 'content'> {
+    /**
+     * Ref forwarded to the root DOM element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Main content area (center).
+     */
+    content?: ReactNode;
+    /**
+     * Maximum width of the content within each slot (header, content, footer,
+     * panels). Dividers remain full-bleed. Content is centered with
+     * `margin-inline: auto` when narrower than the available space.
+     *
+     * Accepts any pixel value. Common page widths from internal patterns:
+     * - `640` — forms, settings, text-focused pages
+     * - `960` — content pages, component demos, wider layouts
+     */
+    contentWidth?: number;
+    /**
+     * End panel slot (right in LTR, left in RTL).
+     */
+    end?: ReactNode;
+    /**
+     * Footer slot.
+     */
+    footer?: ReactNode;
+    /**
+     * Header slot.
+     */
+    header?: ReactNode;
+    /**
+     * Controls the height behavior:
+     * - `fill`: Layout fills container height, content scrolls internally (default)
+     * - `auto`: Layout grows with content, container/page scrolls
+     * @default 'fill'
+     */
+    height?: LayoutHeight;
+    /**
+     * Padding at the layout's outer edges using the spacing scale.
+     * Controls both `--layout-padding-outer-x` and `--layout-padding-outer-y`.
+     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+     */
+    padding?: SpacingStep;
+    /**
+     * Start panel slot (left in LTR, right in RTL).
+     */
+    start?: ReactNode;
+    /**
+     * Default divider visibility for LayoutHeader and LayoutFooter children.
+     * When set, headers/footers that don't explicitly pass `hasDivider` will use this value.
+     * When not set, nested layouts inherit from their parent context.
+     */
+    defaultHasDividers?: boolean;
+    /**
+     * CSS class name(s) appended to the root element.
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the root element.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Page shell with header, sidebar(s), content, and footer slots.
+ * Use this for full-page layouts, app shells, dashboard layouts, or any UI
+ * that needs a header bar, side navigation, scrollable content area, or action footer.
+ * Can be used standalone for page-level layouts, or inside a container
+ * (Card, Section) for content-level layouts.
+ *
+ * Handles padding collapse between adjacent slots, scroll containment in the
+ * content area, and automatic RTL support via CSS logical properties.
+ *
+ * Structure:
+ * ```
+ * ┌─────────────────────────────────────────┐
+ * │                 header                  │
+ * ├──────┬─────────────────────────┬────────┤
+ * │      │                         │        │
+ * │start │        content          │  end   │
+ * │      │                         │        │
+ * ├──────┴─────────────────────────┴────────┤
+ * │                 footer                  │
+ * └─────────────────────────────────────────┘
+ * ```
+ *
+ * When to use Layout vs raw flexbox:
+ * - Page with a sidebar → Layout with `start` slot
+ * - Dashboard with header + scrollable body → Layout with `header` + `content`
+ * - Settings page with nav panel → Layout with `start` + `content`
+ * - Simple vertical stack of items → use VStack instead
+ *
+ * @example
+ * ```
+ * <Layout
+ *   header={<LayoutHeader hasDivider>App Name</LayoutHeader>}
+ *   start={
+ *     <LayoutPanel hasDivider width={240} role="navigation">
+ *       <Navigation />
+ *     </LayoutPanel>
+ *   }
+ *   content={
+ *     <LayoutContent role="main">
+ *       <MainContent />
+ *     </LayoutContent>
+ *   }
+ * />
+ * ```
+ */
+export declare function Layout({ content, contentWidth, defaultHasDividers, end, footer, header, height, padding, ref, start, xstyle, className, style, }: LayoutProps): import("react").JSX.Element;
+export declare namespace Layout {
+    var displayName: string;
+}
+//# sourceMappingURL=Layout.d.ts.map

package/dist/Layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/Layout/Layout.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAQ9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAOhD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAgD3C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,YAAY,EACZ,kBAAkB,EAClB,GAAG,EACH,MAAM,EACN,MAAM,EACN,MAAe,EACf,OAAO,EACP,GAAG,EACH,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,WAAW,+BAuEb;yBArFe,MAAM"}

package/dist/Layout/Layout.js

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Layout.tsx
+ * @input Uses React, stack/stackItem utilities, LayoutAreaContext, LayoutSlotsContext
+ * @output Exports Layout component and LayoutProps, LayoutHeight types
+ * @position Page shell and app layout — use for any page with a header, sidebar, or content area.
+ *   Building a page with a sidebar? Use Layout with start/end slots.
+ *   Need a header + scrollable content? Use Layout with header + content slots.
+ *   Manages padding collapse, scroll containment, and responsive slot sizing automatically.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Layout/Layout.doc.mjs
+ * - /apps/storybook/stories/Layout.stories.tsx
+ * - /packages/cli/templates/blocks/components/Layout/ (showcase blocks)
+ */
+import { useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { LayoutAreaContext } from "./LayoutAreaContext.js";
+import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
+import { LayoutDividerContext } from "./LayoutDividerContext.js";
+import { stack } from "../Stack/stack.stylex.js";
+import { stackItem } from "../Stack/stackItem.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { layoutPaddingOuterXVarStyles, layoutPaddingOuterYVarStyles } from "./padding.stylex.js";
+
+/**
+ * Height behavior for the layout.
+ * - `fill`: Layout fills container height, content scrolls internally (default)
+ * - `auto`: Layout grows with content, container/page scrolls
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  layoutOuter: {
+    keTefX: "xojxgvx",
+    k71WvV: "x1fcf3bl",
+    keoZOQ: "x1sa9bsh",
+    k1K539: "x6h7pi7",
+    $$css: true
+  },
+  layoutInner: {
+    "--container-padding-inline-start": "xrhngw9",
+    "--container-padding-inline-end": "xjsfl84",
+    "--container-padding-block-start": "x1047aw6",
+    "--container-padding-block-end": "xax9j7h",
+    $$css: true
+  },
+  fill: {
+    kZKoxP: "x12qplqi",
+    kskxy: "xenllk4",
+    $$css: true
+  },
+  auto: {
+    kAzted: "x1us19tq",
+    $$css: true
+  },
+  middle: {
+    kUk6DE: "x98rzlu",
+    kAzted: "x2lwn1j",
+    $$css: true
+  },
+  fullBleed: {
+    "--layout-padding-outer-x": "x1wbjvqu",
+    "--layout-padding-outer-y": "xzxxx64",
+    $$css: true
+  }
+};
+const _temp = {
+  "--layout-content-width": "x4906uf",
+  "$$css": true
+};
+const _temp2 = {
+  kzqmXN: "xh8yej3",
+  kUOVxO: "xvueqy4",
+  "$$css": true
+};
+const dynamicStyles = {
+  contentWidthVar: width => [_temp, {
+    "--x---layout-content-width": `${width}px` != null ? `${width}px` : undefined
+  }],
+  contentWidth: width => [_temp2, {
+    ks0D6T: width != null ? "xf68679" : width,
+    $$css: true
+  }, {
+    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }]
+};
+/**
+ * Helper component to wrap content in layout area context.
+ */
+function AreaProvider({
+  area,
+  children
+}) {
+  if (children == null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(LayoutAreaContext, {
+    value: area,
+    children: children
+  });
+}
+
+/**
+ * Page shell with header, sidebar(s), content, and footer slots.
+ * Use this for full-page layouts, app shells, dashboard layouts, or any UI
+ * that needs a header bar, side navigation, scrollable content area, or action footer.
+ * Can be used standalone for page-level layouts, or inside a container
+ * (Card, Section) for content-level layouts.
+ *
+ * Handles padding collapse between adjacent slots, scroll containment in the
+ * content area, and automatic RTL support via CSS logical properties.
+ *
+ * Structure:
+ * ```
+ * ┌─────────────────────────────────────────┐
+ * │                 header                  │
+ * ├──────┬─────────────────────────┬────────┤
+ * │      │                         │        │
+ * │start │        content          │  end   │
+ * │      │                         │        │
+ * ├──────┴─────────────────────────┴────────┤
+ * │                 footer                  │
+ * └─────────────────────────────────────────┘
+ * ```
+ *
+ * When to use Layout vs raw flexbox:
+ * - Page with a sidebar → Layout with `start` slot
+ * - Dashboard with header + scrollable body → Layout with `header` + `content`
+ * - Settings page with nav panel → Layout with `start` + `content`
+ * - Simple vertical stack of items → use VStack instead
+ *
+ * @example
+ * ```
+ * <Layout
+ *   header={<LayoutHeader hasDivider>App Name</LayoutHeader>}
+ *   start={
+ *     <LayoutPanel hasDivider width={240} role="navigation">
+ *       <Navigation />
+ *     </LayoutPanel>
+ *   }
+ *   content={
+ *     <LayoutContent role="main">
+ *       <MainContent />
+ *     </LayoutContent>
+ *   }
+ * />
+ * ```
+ */
+const _temp3 = {
+  "x-default-marker": "x-default-marker",
+  $$css: true
+};
+export function Layout({
+  content,
+  contentWidth,
+  defaultHasDividers,
+  end,
+  footer,
+  header,
+  height = 'fill',
+  padding,
+  ref,
+  start,
+  xstyle,
+  className,
+  style
+}) {
+  const isFill = height === 'fill';
+  const dividerCtxValue = useMemo(() => defaultHasDividers != null ? {
+    defaultHasDividers
+  } : null, [defaultHasDividers]);
+
+  // Memoize slots info to avoid unnecessary re-renders
+  const hasHeader = header != null;
+  const hasFooter = footer != null;
+  const hasStart = start != null;
+  const hasEnd = end != null;
+  const slotsValue = useMemo(() => ({
+    hasHeader,
+    hasFooter,
+    hasStart,
+    hasEnd
+  }), [hasHeader, hasFooter, hasStart, hasEnd]);
+  const tree = /*#__PURE__*/_jsx(LayoutSlotsContext, {
+    value: slotsValue,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      ...mergeProps(themeProps('layout', {
+        height
+      }), stylex.props(styles.layoutOuter, isFill ? styles.fill : styles.auto, xstyle), className, style),
+      children: /*#__PURE__*/_jsxs("div", {
+        ...stylex.props(_temp3, styles.layoutInner, ...stack({
+          direction: 'vertical'
+        }), isFill ? styles.fill : styles.auto, padding === 0 && styles.fullBleed, padding != null && layoutPaddingOuterXVarStyles[padding], padding != null && layoutPaddingOuterYVarStyles[padding], contentWidth != null && dynamicStyles.contentWidthVar(contentWidth)),
+        children: [/*#__PURE__*/_jsx(AreaProvider, {
+          area: "header",
+          children: header
+        }), /*#__PURE__*/_jsxs("div", {
+          ...stylex.props(...stack({
+            direction: 'horizontal'
+          }), styles.middle, contentWidth != null && dynamicStyles.contentWidth(contentWidth)),
+          children: [/*#__PURE__*/_jsx(AreaProvider, {
+            area: "start",
+            children: start
+          }), /*#__PURE__*/_jsx("div", {
+            ...stylex.props(...stackItem({
+              size: 'fill'
+            })),
+            children: /*#__PURE__*/_jsx(AreaProvider, {
+              area: "content",
+              children: content
+            })
+          }), /*#__PURE__*/_jsx(AreaProvider, {
+            area: "end",
+            children: end
+          })]
+        }), /*#__PURE__*/_jsx(AreaProvider, {
+          area: "footer",
+          children: footer
+        })]
+      })
+    })
+  });
+  if (dividerCtxValue != null) {
+    return /*#__PURE__*/_jsx(LayoutDividerContext, {
+      value: dividerCtxValue,
+      children: tree
+    });
+  }
+  return tree;
+}
+Layout.displayName = 'Layout';

package/dist/Layout/LayoutAreaContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Layout area type representing which slot a component is rendered in.
+ * Used by content area components to detect their position and adjust styling.
+ */
+export type LayoutArea = 'header' | 'footer' | 'content' | 'start' | 'end' | null;
+/**
+ * Context for detecting which layout area a component is rendered in.
+ * Content area components use this to:
+ * - Auto-position dividers correctly
+ * - Apply correct semantic elements
+ * - Adjust internal spacing
+ */
+export declare const LayoutAreaContext: import("react").Context<LayoutArea>;
+//# sourceMappingURL=LayoutAreaContext.d.ts.map

package/dist/Layout/LayoutAreaContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutAreaContext.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutAreaContext.ts"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,OAAO,GACP,KAAK,GACL,IAAI,CAAC;AAET;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,qCAAkC,CAAC"}