stablekit.ts 0.2.0

package/dist/index.js

@@ -0,0 +1,816 @@
+// src/components/layout-group.tsx
+import {
+  forwardRef,
+  createContext,
+  useEffect,
+  useInsertionEffect,
+  useMemo,
+  useRef
+} from "react";
+
+// src/styles.css
+var styles_default = `/* stablekit \u2014 layout stability toolkit for React
+ *
+ * CSS class prefix: sk-
+ * All animations use CSS custom properties for themability.
+ * Styles are auto-injected at import time (opt-out via meta tag).
+ */
+
+/* \u2500\u2500 LayoutGroup / LayoutView \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* All children overlap in the same grid cell.
+   Grid auto-sizes to the largest child.
+   Block-level groups use flex-column so content stretches to fill
+   the reserved width. Inline groups (data-inline) skip this \u2014 their
+   children are inline content that shouldn't be forced vertical. */
+.sk-layout-group {
+  display: grid;
+}
+.sk-layout-group[data-inline] {
+  display: inline-grid;
+}
+.sk-layout-group > * {
+  grid-area: 1 / 1;
+}
+.sk-layout-group:not([data-inline]) > * {
+  display: flex;
+  flex-direction: column;
+}
+/* Inline groups: children inherit the parent's inline flow.
+   Without this, grid items default to block and stack content. */
+.sk-layout-group[data-inline] > * {
+  display: inline;
+}
+
+/* Inactive LayoutView hiding \u2014 CSS-driven via data-state attribute.
+   LayoutView sets data-state="active"|"inactive" so consumers can
+   override transitions on .sk-layout-view without specificity fights.
+   [inert] handles accessibility (non-focusable, non-interactive). */
+.sk-layout-view[data-state="inactive"] {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* \u2500\u2500 SizeRatchet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* contain isolates internal reflow from ancestors. */
+.sk-size-ratchet {
+  contain: layout style;
+}
+
+/* \u2500\u2500 Shimmer / Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sk-skeleton-grid {
+  display: grid;
+  gap: var(--sk-skeleton-gap, 0.75rem);
+  contain: layout style;
+}
+
+.sk-skeleton-bone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sk-skeleton-bone-gap, 0.125rem);
+  padding: var(--sk-skeleton-bone-padding, 0.375rem 0.5rem);
+}
+
+.sk-shimmer-line {
+  height: 1lh;
+  border-radius: var(--sk-shimmer-radius, 0.125rem);
+  background: linear-gradient(
+    90deg,
+    var(--sk-shimmer-color, #e5e7eb) 25%,
+    var(--sk-shimmer-highlight, #f3f4f6) 50%,
+    var(--sk-shimmer-color, #e5e7eb) 75%
+  );
+  background-size: 200% 100%;
+  animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
+}
+
+/* Inert ghost inside a shimmer-line \u2014 sizes the shimmer to match
+   content width exactly. Invisible and non-interactive via [inert]. */
+.sk-shimmer-line > [inert] {
+  visibility: hidden;
+}
+
+@keyframes sk-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* \u2500\u2500 MediaSkeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Loading-aware media container.
+   Reserves space via aspect-ratio (set inline by the component).
+   Child constraints enforced via React.cloneElement inline styles. */
+.sk-media {
+  overflow: hidden;
+}
+.sk-media-shimmer {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--sk-shimmer-radius, 0.125rem);
+  background: linear-gradient(
+    90deg,
+    var(--sk-shimmer-color, #e5e7eb) 25%,
+    var(--sk-shimmer-highlight, #f3f4f6) 50%,
+    var(--sk-shimmer-color, #e5e7eb) 75%
+  );
+  background-size: 200% 100%;
+  animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
+  transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
+}
+
+/* \u2500\u2500 Shared easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Decelerate: fast start, gentle finish \u2014 for elements entering view. */
+/* Standard: balanced ease \u2014 for general-purpose transitions. */
+/* Accelerate: gentle start, fast finish \u2014 for elements leaving view. */
+:root {
+  --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
+  --sk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --sk-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+}
+
+/* \u2500\u2500 FadeTransition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sk-fade {
+  --sk-fade-duration: 400ms;
+}
+
+.sk-fade-entering {
+  animation: sk-emerge var(--sk-fade-duration) var(--sk-ease-decelerate) forwards;
+}
+
+.sk-fade-exiting {
+  animation: sk-collapse var(--sk-fade-duration) var(--sk-ease-accelerate) forwards;
+}
+
+@keyframes sk-emerge {
+  from {
+    opacity: 0;
+    transform: translateY(var(--sk-fade-offset-y, -12px)) scale(var(--sk-fade-offset-scale, 0.98));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes sk-collapse {
+  from { opacity: 1; transform: scaleY(1); transform-origin: top; }
+  to   { opacity: 0; transform: scaleY(0); transform-origin: top; }
+}
+
+/* \u2500\u2500 Loading layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Shared by shimmer and content layers inside skeleton components.
+   Both layers permanently occupy the same grid cell; only opacity
+   and interactivity change. CSS transitions handle the crossfade. */
+.sk-loading-layer {
+  grid-area: 1 / 1;
+  transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
+}
+
+/* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* Disables all animations \u2014 shimmer, fade, and loading exit.
+   Layout changes still happen instantly so functionality is preserved. */
+@media (prefers-reduced-motion: reduce) {
+  .sk-fade-entering,
+  .sk-fade-exiting,
+  .sk-shimmer-line,
+  .sk-media-shimmer {
+    animation-duration: 0s !important;
+  }
+  .sk-loading-layer,
+  .sk-media-shimmer {
+    transition-duration: 0s !important;
+  }
+}
+`;
+
+// src/internal/inject-styles.ts
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  if (document.querySelector('meta[name="stablekit-disable-injection"]')) {
+    injected = true;
+    return;
+  }
+  if (document.querySelector("style[data-stablekit]")) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.setAttribute("data-stablekit", "");
+  const nonceMeta = document.querySelector('meta[name="stablekit-nonce"]');
+  if (nonceMeta) {
+    const nonce = nonceMeta.getAttribute("content");
+    if (nonce) style.setAttribute("nonce", nonce);
+  }
+  style.textContent = styles_default;
+  document.head.appendChild(style);
+  injected = true;
+}
+injectStyles();
+
+// src/internal/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    }
+  };
+}
+
+// src/internal/invariant.ts
+function invariant(condition, message) {
+  if (condition) return;
+  if (process.env.NODE_ENV !== "production") {
+    throw new Error(`StableKit: ${message}`);
+  }
+}
+function warning(condition, message) {
+  if (condition) return;
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(`StableKit Warning: ${message}`);
+  }
+}
+
+// src/components/layout-group.tsx
+import { jsx } from "react/jsx-runtime";
+var AxisContext = createContext("both");
+var NO_PROVIDER = /* @__PURE__ */ Symbol("sk-no-layout-group");
+var ActiveValueContext = createContext(NO_PROVIDER);
+var FocusHandoffContext = createContext(null);
+var LayoutGroup = forwardRef(
+  function LayoutGroup2({ axis = "both", value, as: Tag = "div", className, style, children, ...props }, ref) {
+    useInsertionEffect(injectStyles, []);
+    warning(
+      value !== void 0,
+      "<LayoutGroup> rendered without a 'value' prop. All named <LayoutView> children will default to active, which may cause overlapping layouts."
+    );
+    const internalRef = useRef(null);
+    const hadFocusRef = useRef(false);
+    useEffect(() => {
+      const el = internalRef.current;
+      if (!el) return;
+      const onFocusIn = () => {
+        hadFocusRef.current = true;
+      };
+      const onFocusOut = (e) => {
+        const target = e.relatedTarget;
+        if (target && !el.contains(target)) {
+          hadFocusRef.current = false;
+        }
+      };
+      el.addEventListener("focusin", onFocusIn);
+      el.addEventListener("focusout", onFocusOut);
+      return () => {
+        el.removeEventListener("focusin", onFocusIn);
+        el.removeEventListener("focusout", onFocusOut);
+      };
+    }, []);
+    const focusCtx = useMemo(() => ({ hadFocusRef }), []);
+    const merged = className ? `sk-layout-group ${className}` : "sk-layout-group";
+    return /* @__PURE__ */ jsx(AxisContext.Provider, { value: axis, children: /* @__PURE__ */ jsx(ActiveValueContext.Provider, { value, children: /* @__PURE__ */ jsx(FocusHandoffContext.Provider, { value: focusCtx, children: /* @__PURE__ */ jsx(Tag, { ref: mergeRefs(ref, internalRef), className: merged, style, ...props, children }) }) }) });
+  }
+);
+
+// src/components/layout-view.tsx
+import {
+  forwardRef as forwardRef2,
+  useContext,
+  useInsertionEffect as useInsertionEffect2,
+  useLayoutEffect,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LayoutView = forwardRef2(
+  function LayoutView2({ active, name, as: Tag = "div", style, className, children, ...props }, ref) {
+    useInsertionEffect2(injectStyles, []);
+    useContext(AxisContext);
+    const rawActiveValue = useContext(ActiveValueContext);
+    const focusCtx = useContext(FocusHandoffContext);
+    invariant(
+      !(name != null && typeof rawActiveValue === "symbol"),
+      "<LayoutView> with a 'name' prop must be rendered inside a <LayoutGroup> or <LayoutMap>."
+    );
+    const activeValue = typeof rawActiveValue === "symbol" ? void 0 : rawActiveValue;
+    const isActive = active ?? (name != null ? name === activeValue : true);
+    const internalRef = useRef2(null);
+    const prevActiveRef = useRef2(isActive);
+    useLayoutEffect(() => {
+      const wasActive = prevActiveRef.current;
+      prevActiveRef.current = isActive;
+      if (!isActive || wasActive) return;
+      if (!focusCtx?.hadFocusRef.current) return;
+      const current = document.activeElement;
+      if (current && current !== document.body && !current.closest?.("[inert]")) return;
+      internalRef.current?.focus({ preventScroll: true });
+    });
+    const viewClass = className ? `sk-layout-view ${className}` : "sk-layout-view";
+    return /* @__PURE__ */ jsx2(
+      Tag,
+      {
+        ref: mergeRefs(ref, internalRef),
+        className: viewClass,
+        "data-state": isActive ? "active" : "inactive",
+        tabIndex: isActive ? -1 : void 0,
+        inert: !isActive || void 0,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/state-swap.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function StateSwap({
+  state,
+  true: onTrue,
+  false: onFalse,
+  as: Tag = "span",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(LayoutGroup, { as: Tag, value: state ? "true" : "false", axis: "both", "data-inline": true, ...props, children: [
+    /* @__PURE__ */ jsx3(LayoutView, { as: "span", name: "true", children: onTrue }),
+    /* @__PURE__ */ jsx3(LayoutView, { as: "span", name: "false", children: onFalse })
+  ] });
+}
+
+// src/components/layout-map.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function LayoutMap({ value, map, ...props }) {
+  return /* @__PURE__ */ jsx4(LayoutGroup, { value, ...props, children: Object.entries(map).map(([key, node]) => /* @__PURE__ */ jsx4(LayoutView, { name: key, children: node }, key)) });
+}
+
+// src/components/size-ratchet.tsx
+import { forwardRef as forwardRef3, useInsertionEffect as useInsertionEffect3 } from "react";
+
+// src/primitives/use-stable-slot.ts
+import { useState, useCallback, useEffect as useEffect2, useRef as useRef3 } from "react";
+var RATCHET_FLOOR = -Infinity;
+function useStableSlot(options = {}) {
+  const { axis = "both", resetKey } = options;
+  const [style, setStyle] = useState({});
+  const maxRef = useRef3({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
+  const observerRef = useRef3(null);
+  const prevResetKeyRef = useRef3(resetKey);
+  useEffect2(() => {
+    if (prevResetKeyRef.current !== resetKey) {
+      prevResetKeyRef.current = resetKey;
+      maxRef.current = { w: RATCHET_FLOOR, h: RATCHET_FLOOR };
+      setStyle({});
+    }
+  }, [resetKey]);
+  const ref = useCallback(
+    (el) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          let w;
+          let h;
+          if (entry.borderBoxSize?.length) {
+            const box = entry.borderBoxSize[0];
+            w = box.inlineSize;
+            h = box.blockSize;
+          } else {
+            const rect = entry.target.getBoundingClientRect();
+            w = rect.width;
+            h = rect.height;
+          }
+          const max = maxRef.current;
+          let grew = false;
+          if ((axis === "width" || axis === "both") && w > max.w) {
+            max.w = w;
+            grew = true;
+          }
+          if ((axis === "height" || axis === "both") && h > max.h) {
+            max.h = h;
+            grew = true;
+          }
+          if (grew) {
+            const next = {};
+            if (axis === "width" || axis === "both") next.minWidth = max.w;
+            if (axis === "height" || axis === "both") next.minHeight = max.h;
+            setStyle(next);
+          }
+        }
+      });
+      observer.observe(el, { box: "border-box" });
+      observerRef.current = observer;
+    },
+    [axis]
+  );
+  return { ref, style };
+}
+
+// src/components/size-ratchet.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SizeRatchet = forwardRef3(
+  function SizeRatchet2({ axis = "height", resetKey, as: Tag = "div", className, style, children, ...props }, fwdRef) {
+    useInsertionEffect3(injectStyles, []);
+    const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis, resetKey });
+    const merged = className ? `sk-size-ratchet ${className}` : "sk-size-ratchet";
+    return /* @__PURE__ */ jsx5(
+      Tag,
+      {
+        ref: mergeRefs(ratchetRef, fwdRef),
+        className: merged,
+        style: { ...ratchetStyle, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/stable-counter.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var GHOST_STYLE = {
+  visibility: "hidden",
+  gridArea: "1 / 1",
+  pointerEvents: "none"
+};
+var VALUE_STYLE = {
+  gridArea: "1 / 1"
+};
+var StableCounter = forwardRef4(
+  function StableCounter2({ value, reserve, as: Tag = "span", style, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      Tag,
+      {
+        ref,
+        className,
+        style: { ...style, display: "inline-grid" },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", style: GHOST_STYLE, children: reserve }),
+          /* @__PURE__ */ jsx6("span", { style: VALUE_STYLE, children: value })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/stable-field.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var GHOST_STYLE2 = {
+  visibility: "hidden",
+  gridArea: "1 / 1",
+  pointerEvents: "none"
+};
+var ERROR_STYLE = {
+  gridArea: "1 / 1"
+};
+var ERROR_HIDDEN_STYLE = {
+  gridArea: "1 / 1",
+  visibility: "hidden"
+};
+var StableField = forwardRef5(
+  function StableField2({ error, reserve, children, style, className, ...props }, ref) {
+    const hasError = error != null && error !== false && error !== "";
+    return /* @__PURE__ */ jsxs3("div", { ref, className, style, ...props, children: [
+      children,
+      /* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", style: GHOST_STYLE2, children: reserve }),
+        /* @__PURE__ */ jsx7(
+          "span",
+          {
+            role: hasError ? "alert" : void 0,
+            style: hasError ? ERROR_STYLE : ERROR_HIDDEN_STYLE,
+            children: hasError ? error : null
+          }
+        )
+      ] })
+    ] });
+  }
+);
+
+// src/components/loading-boundary.tsx
+import {
+  forwardRef as forwardRef6,
+  useInsertionEffect as useInsertionEffect4
+} from "react";
+
+// src/components/loading-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LoadingStateContext = createContext2(false);
+function useLoadingState() {
+  return useContext2(LoadingStateContext);
+}
+function LoadingContext({ loading, children }) {
+  return /* @__PURE__ */ jsx8(LoadingStateContext.Provider, { value: loading, children });
+}
+
+// src/components/loading-boundary.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var LoadingBoundary = forwardRef6(
+  function LoadingBoundary2({ loading, exitDuration, as: Tag = "div", className, style, children, ...props }, ref) {
+    useInsertionEffect4(injectStyles, []);
+    const merged = {
+      ...style,
+      "--sk-loading-exit-duration": `${exitDuration}ms`
+    };
+    return /* @__PURE__ */ jsx9(SizeRatchet, { ref, axis: "height", as: Tag, className, style: merged, ...props, children: /* @__PURE__ */ jsx9(LoadingContext, { loading, children }) });
+  }
+);
+
+// src/components/text-skeleton.tsx
+import { useInsertionEffect as useInsertionEffect5 } from "react";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function TextSkeleton({ loading, as: Tag = "span", className, style, children, ...props }) {
+  useInsertionEffect5(injectStyles, []);
+  const contextLoading = useLoadingState();
+  const isLoading = loading ?? contextLoading;
+  return /* @__PURE__ */ jsxs4(Tag, { className, style: { ...style, display: "inline-grid" }, ...props, children: [
+    /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: "sk-shimmer-line sk-loading-layer",
+        "aria-hidden": "true",
+        style: { opacity: isLoading ? 1 : 0 },
+        children: /* @__PURE__ */ jsx10("span", { inert: true, children })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: "sk-loading-layer",
+        style: { opacity: isLoading ? 0 : 1 },
+        inert: isLoading || void 0,
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/stable-text.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function StableText({
+  as: Tag = "p",
+  loading,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(Tag, { ...props, children: /* @__PURE__ */ jsx11(TextSkeleton, { loading, children }) });
+}
+
+// src/components/media-skeleton.tsx
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useInsertionEffect as useInsertionEffect6,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var CHILD_STYLE = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+function MediaSkeleton({
+  aspectRatio,
+  loading,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  useInsertionEffect6(injectStyles, []);
+  const contextLoading = useLoadingState();
+  const isLoading = loading ?? contextLoading;
+  const [mediaReady, setMediaReady] = useState2(false);
+  const childRef = useRef4(null);
+  useEffect3(() => {
+    if (isLoading) setMediaReady(false);
+  }, [isLoading]);
+  useEffect3(() => {
+    const el = childRef.current;
+    if (el instanceof HTMLImageElement && el.complete && el.naturalWidth > 0) {
+      setMediaReady(true);
+    }
+  });
+  const handleLoad = useCallback2(() => setMediaReady(true), []);
+  const showShimmer = isLoading || !mediaReady;
+  const containerStyle = {
+    position: "relative",
+    overflow: "hidden",
+    aspectRatio,
+    ...style
+  };
+  const containerClass = showShimmer ? className ? `sk-media sk-media-loading ${className}` : "sk-media sk-media-loading" : className ? `sk-media ${className}` : "sk-media";
+  const child = Children.only(children);
+  const existingOnLoad = child.props.onLoad;
+  const clonedChild = isValidElement(child) ? cloneElement(child, {
+    ref: childRef,
+    onLoad: (e) => {
+      handleLoad();
+      existingOnLoad?.(e);
+    },
+    style: {
+      ...CHILD_STYLE,
+      opacity: showShimmer ? 0 : 1,
+      transition: "opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate)",
+      ...child.props.style
+    }
+  }) : child;
+  return /* @__PURE__ */ jsxs5("div", { className: containerClass, style: containerStyle, ...props, children: [
+    /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: "sk-media-shimmer",
+        "aria-hidden": "true",
+        style: { opacity: showShimmer ? 1 : 0 }
+      }
+    ),
+    clonedChild
+  ] });
+}
+
+// src/components/collection-skeleton.tsx
+import {
+  forwardRef as forwardRef8,
+  useInsertionEffect as useInsertionEffect8
+} from "react";
+
+// src/components/skeleton-grid.tsx
+import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var SkeletonGrid = forwardRef7(
+  function SkeletonGrid2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect7(injectStyles, []);
+    const merged = className ? `sk-skeleton-grid ${className}` : "sk-skeleton-grid";
+    const count = columns ? rows * columns : rows;
+    const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs6("div", { className: "sk-skeleton-bone", children: [
+      /* @__PURE__ */ jsx13("div", { className: "sk-shimmer-line" }),
+      /* @__PURE__ */ jsx13("div", { className: "sk-shimmer-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)` } : void 0;
+    return /* @__PURE__ */ jsx13(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
+// src/components/collection-skeleton.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function CollectionSkeletonInner({
+  items,
+  loading,
+  renderItem,
+  stubCount,
+  exitDuration,
+  as: Tag = "div",
+  className,
+  style,
+  ...props
+}, ref) {
+  useInsertionEffect8(injectStyles, []);
+  const merged = {
+    ...style,
+    display: "grid",
+    "--sk-loading-exit-duration": `${exitDuration}ms`
+  };
+  return /* @__PURE__ */ jsxs7(SizeRatchet, { ref, axis: "height", as: Tag, className, style: merged, ...props, children: [
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className: "sk-loading-layer",
+        "aria-hidden": "true",
+        style: { opacity: loading ? 1 : 0 },
+        children: /* @__PURE__ */ jsx14(SkeletonGrid, { rows: stubCount })
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className: "sk-loading-layer",
+        style: { opacity: loading ? 0 : 1 },
+        inert: loading || void 0,
+        children: items.map(renderItem)
+      }
+    )
+  ] });
+}
+var CollectionSkeleton = forwardRef8(CollectionSkeletonInner);
+
+// src/components/fade-transition.tsx
+import {
+  forwardRef as forwardRef9,
+  useInsertionEffect as useInsertionEffect9
+} from "react";
+
+// src/primitives/use-presence.ts
+import {
+  useState as useState3,
+  useEffect as useEffect4,
+  useCallback as useCallback3
+} from "react";
+function usePresence(show) {
+  const [mounted, setMounted] = useState3(show);
+  const [phase, setPhase] = useState3(show ? "entered" : "exiting");
+  useEffect4(() => {
+    if (show) {
+      setMounted(true);
+      setPhase("entering");
+    } else if (mounted) {
+      setPhase("exiting");
+    }
+  }, [show]);
+  const onAnimationEnd = useCallback3(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (phase === "entering") setPhase("entered");
+      if (phase === "exiting") setMounted(false);
+    },
+    [phase]
+  );
+  return { mounted, phase, onAnimationEnd };
+}
+
+// src/components/fade-transition.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var FadeTransition = forwardRef9(
+  function FadeTransition2({ show, as: Tag = "div", className, style, children, ...props }, fwdRef) {
+    useInsertionEffect9(injectStyles, []);
+    const { mounted, phase, onAnimationEnd } = usePresence(show);
+    if (!mounted) return null;
+    const phaseClass = phase === "entering" ? "sk-fade-entering" : phase === "exiting" ? "sk-fade-exiting" : "";
+    const merged = ["sk-fade", phaseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx15(
+      Tag,
+      {
+        ref: fwdRef,
+        className: merged,
+        style,
+        onAnimationEnd,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/create-primitive.tsx
+import { createElement } from "react";
+function createPrimitive(tag, baseClass, variants) {
+  const variantKeys = new Set(variants ? Object.keys(variants) : []);
+  function Primitive(props) {
+    const htmlProps = { className: baseClass };
+    for (const [key, value] of Object.entries(props)) {
+      if (variantKeys.has(key)) {
+        htmlProps[`data-${key}`] = value;
+      } else {
+        htmlProps[key] = value;
+      }
+    }
+    return createElement(tag, htmlProps);
+  }
+  return Primitive;
+}
+export {
+  CollectionSkeleton,
+  FadeTransition,
+  LayoutGroup,
+  LayoutMap,
+  LayoutView,
+  LoadingBoundary,
+  LoadingContext,
+  MediaSkeleton,
+  SizeRatchet,
+  StableCounter,
+  StableField,
+  StableText,
+  StateSwap,
+  TextSkeleton,
+  createPrimitive,
+  useLoadingState
+};