stablekit.ts 0.2.0

package/dist/index.cjs

@@ -0,0 +1,823 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CollectionSkeleton: () => CollectionSkeleton,
+  FadeTransition: () => FadeTransition,
+  LayoutGroup: () => LayoutGroup,
+  LayoutMap: () => LayoutMap,
+  LayoutView: () => LayoutView,
+  LoadingBoundary: () => LoadingBoundary,
+  LoadingContext: () => LoadingContext,
+  MediaSkeleton: () => MediaSkeleton,
+  SizeRatchet: () => SizeRatchet,
+  StableCounter: () => StableCounter,
+  StableField: () => StableField,
+  StableText: () => StableText,
+  StateSwap: () => StateSwap,
+  TextSkeleton: () => TextSkeleton,
+  createPrimitive: () => createPrimitive,
+  useLoadingState: () => useLoadingState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/layout-group.tsx
+var import_react = require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+var AxisContext = (0, import_react.createContext)("both");
+var NO_PROVIDER = /* @__PURE__ */ Symbol("sk-no-layout-group");
+var ActiveValueContext = (0, import_react.createContext)(NO_PROVIDER);
+var FocusHandoffContext = (0, import_react.createContext)(null);
+var LayoutGroup = (0, import_react.forwardRef)(
+  function LayoutGroup2({ axis = "both", value, as: Tag = "div", className, style, children, ...props }, ref) {
+    (0, import_react.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 = (0, import_react.useRef)(null);
+    const hadFocusRef = (0, import_react.useRef)(false);
+    (0, import_react.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 = (0, import_react.useMemo)(() => ({ hadFocusRef }), []);
+    const merged = className ? `sk-layout-group ${className}` : "sk-layout-group";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AxisContext.Provider, { value: axis, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveValueContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusHandoffContext.Provider, { value: focusCtx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ref: mergeRefs(ref, internalRef), className: merged, style, ...props, children }) }) }) });
+  }
+);
+
+// src/components/layout-view.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LayoutView = (0, import_react2.forwardRef)(
+  function LayoutView2({ active, name, as: Tag = "div", style, className, children, ...props }, ref) {
+    (0, import_react2.useInsertionEffect)(injectStyles, []);
+    (0, import_react2.useContext)(AxisContext);
+    const rawActiveValue = (0, import_react2.useContext)(ActiveValueContext);
+    const focusCtx = (0, import_react2.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 = (0, import_react2.useRef)(null);
+    const prevActiveRef = (0, import_react2.useRef)(isActive);
+    (0, import_react2.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__ */ (0, import_jsx_runtime2.jsx)(
+      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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StateSwap({
+  state,
+  true: onTrue,
+  false: onFalse,
+  as: Tag = "span",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(LayoutGroup, { as: Tag, value: state ? "true" : "false", axis: "both", "data-inline": true, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayoutView, { as: "span", name: "true", children: onTrue }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayoutView, { as: "span", name: "false", children: onFalse })
+  ] });
+}
+
+// src/components/layout-map.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function LayoutMap({ value, map, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutGroup, { value, ...props, children: Object.entries(map).map(([key, node]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutView, { name: key, children: node }, key)) });
+}
+
+// src/components/size-ratchet.tsx
+var import_react4 = require("react");
+
+// src/primitives/use-stable-slot.ts
+var import_react3 = require("react");
+var RATCHET_FLOOR = -Infinity;
+function useStableSlot(options = {}) {
+  const { axis = "both", resetKey } = options;
+  const [style, setStyle] = (0, import_react3.useState)({});
+  const maxRef = (0, import_react3.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
+  const observerRef = (0, import_react3.useRef)(null);
+  const prevResetKeyRef = (0, import_react3.useRef)(resetKey);
+  (0, import_react3.useEffect)(() => {
+    if (prevResetKeyRef.current !== resetKey) {
+      prevResetKeyRef.current = resetKey;
+      maxRef.current = { w: RATCHET_FLOOR, h: RATCHET_FLOOR };
+      setStyle({});
+    }
+  }, [resetKey]);
+  const ref = (0, import_react3.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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SizeRatchet = (0, import_react4.forwardRef)(
+  function SizeRatchet2({ axis = "height", resetKey, as: Tag = "div", className, style, children, ...props }, fwdRef) {
+    (0, import_react4.useInsertionEffect)(injectStyles, []);
+    const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis, resetKey });
+    const merged = className ? `sk-size-ratchet ${className}` : "sk-size-ratchet";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Tag,
+      {
+        ref: mergeRefs(ratchetRef, fwdRef),
+        className: merged,
+        style: { ...ratchetStyle, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/stable-counter.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var GHOST_STYLE = {
+  visibility: "hidden",
+  gridArea: "1 / 1",
+  pointerEvents: "none"
+};
+var VALUE_STYLE = {
+  gridArea: "1 / 1"
+};
+var StableCounter = (0, import_react5.forwardRef)(
+  function StableCounter2({ value, reserve, as: Tag = "span", style, className, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Tag,
+      {
+        ref,
+        className,
+        style: { ...style, display: "inline-grid" },
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", style: GHOST_STYLE, children: reserve }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: VALUE_STYLE, children: value })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/stable-field.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("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 = (0, import_react6.forwardRef)(
+  function StableField2({ error, reserve, children, style, className, ...props }, ref) {
+    const hasError = error != null && error !== false && error !== "";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className, style, ...props, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "grid" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", style: GHOST_STYLE2, children: reserve }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            role: hasError ? "alert" : void 0,
+            style: hasError ? ERROR_STYLE : ERROR_HIDDEN_STYLE,
+            children: hasError ? error : null
+          }
+        )
+      ] })
+    ] });
+  }
+);
+
+// src/components/loading-boundary.tsx
+var import_react8 = require("react");
+
+// src/components/loading-context.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var LoadingStateContext = (0, import_react7.createContext)(false);
+function useLoadingState() {
+  return (0, import_react7.useContext)(LoadingStateContext);
+}
+function LoadingContext({ loading, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingStateContext.Provider, { value: loading, children });
+}
+
+// src/components/loading-boundary.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var LoadingBoundary = (0, import_react8.forwardRef)(
+  function LoadingBoundary2({ loading, exitDuration, as: Tag = "div", className, style, children, ...props }, ref) {
+    (0, import_react8.useInsertionEffect)(injectStyles, []);
+    const merged = {
+      ...style,
+      "--sk-loading-exit-duration": `${exitDuration}ms`
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SizeRatchet, { ref, axis: "height", as: Tag, className, style: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LoadingContext, { loading, children }) });
+  }
+);
+
+// src/components/text-skeleton.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TextSkeleton({ loading, as: Tag = "span", className, style, children, ...props }) {
+  (0, import_react9.useInsertionEffect)(injectStyles, []);
+  const contextLoading = useLoadingState();
+  const isLoading = loading ?? contextLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tag, { className, style: { ...style, display: "inline-grid" }, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "span",
+      {
+        className: "sk-shimmer-line sk-loading-layer",
+        "aria-hidden": "true",
+        style: { opacity: isLoading ? 1 : 0 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { inert: true, children })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "span",
+      {
+        className: "sk-loading-layer",
+        style: { opacity: isLoading ? 0 : 1 },
+        inert: isLoading || void 0,
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/stable-text.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function StableText({
+  as: Tag = "p",
+  loading,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tag, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextSkeleton, { loading, children }) });
+}
+
+// src/components/media-skeleton.tsx
+var import_react10 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CHILD_STYLE = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+function MediaSkeleton({
+  aspectRatio,
+  loading,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  (0, import_react10.useInsertionEffect)(injectStyles, []);
+  const contextLoading = useLoadingState();
+  const isLoading = loading ?? contextLoading;
+  const [mediaReady, setMediaReady] = (0, import_react10.useState)(false);
+  const childRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    if (isLoading) setMediaReady(false);
+  }, [isLoading]);
+  (0, import_react10.useEffect)(() => {
+    const el = childRef.current;
+    if (el instanceof HTMLImageElement && el.complete && el.naturalWidth > 0) {
+      setMediaReady(true);
+    }
+  });
+  const handleLoad = (0, import_react10.useCallback)(() => 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 = import_react10.Children.only(children);
+  const existingOnLoad = child.props.onLoad;
+  const clonedChild = (0, import_react10.isValidElement)(child) ? (0, import_react10.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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: containerClass, style: containerStyle, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: "sk-media-shimmer",
+        "aria-hidden": "true",
+        style: { opacity: showShimmer ? 1 : 0 }
+      }
+    ),
+    clonedChild
+  ] });
+}
+
+// src/components/collection-skeleton.tsx
+var import_react12 = require("react");
+
+// src/components/skeleton-grid.tsx
+var import_react11 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SkeletonGrid = (0, import_react11.forwardRef)(
+  function SkeletonGrid2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react11.useInsertionEffect)(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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "sk-skeleton-bone", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "sk-shimmer-line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "sk-shimmer-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)` } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
+// src/components/collection-skeleton.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CollectionSkeletonInner({
+  items,
+  loading,
+  renderItem,
+  stubCount,
+  exitDuration,
+  as: Tag = "div",
+  className,
+  style,
+  ...props
+}, ref) {
+  (0, import_react12.useInsertionEffect)(injectStyles, []);
+  const merged = {
+    ...style,
+    display: "grid",
+    "--sk-loading-exit-duration": `${exitDuration}ms`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SizeRatchet, { ref, axis: "height", as: Tag, className, style: merged, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "sk-loading-layer",
+        "aria-hidden": "true",
+        style: { opacity: loading ? 1 : 0 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SkeletonGrid, { rows: stubCount })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "sk-loading-layer",
+        style: { opacity: loading ? 0 : 1 },
+        inert: loading || void 0,
+        children: items.map(renderItem)
+      }
+    )
+  ] });
+}
+var CollectionSkeleton = (0, import_react12.forwardRef)(CollectionSkeletonInner);
+
+// src/components/fade-transition.tsx
+var import_react14 = require("react");
+
+// src/primitives/use-presence.ts
+var import_react13 = require("react");
+function usePresence(show) {
+  const [mounted, setMounted] = (0, import_react13.useState)(show);
+  const [phase, setPhase] = (0, import_react13.useState)(show ? "entered" : "exiting");
+  (0, import_react13.useEffect)(() => {
+    if (show) {
+      setMounted(true);
+      setPhase("entering");
+    } else if (mounted) {
+      setPhase("exiting");
+    }
+  }, [show]);
+  const onAnimationEnd = (0, import_react13.useCallback)(
+    (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
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FadeTransition = (0, import_react14.forwardRef)(
+  function FadeTransition2({ show, as: Tag = "div", className, style, children, ...props }, fwdRef) {
+    (0, import_react14.useInsertionEffect)(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__ */ (0, import_jsx_runtime15.jsx)(
+      Tag,
+      {
+        ref: fwdRef,
+        className: merged,
+        style,
+        onAnimationEnd,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/create-primitive.tsx
+var import_react15 = require("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 (0, import_react15.createElement)(tag, htmlProps);
+  }
+  return Primitive;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollectionSkeleton,
+  FadeTransition,
+  LayoutGroup,
+  LayoutMap,
+  LayoutView,
+  LoadingBoundary,
+  LoadingContext,
+  MediaSkeleton,
+  SizeRatchet,
+  StableCounter,
+  StableField,
+  StableText,
+  StateSwap,
+  TextSkeleton,
+  createPrimitive,
+  useLoadingState
+});