@skygraph/react 0.0.0-placeholder.0 → 0.5.0

package/dist/chunk-2OCEO636.js

@@ -0,0 +1,91 @@
+// src/components/ConfigProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var SgConfigContext = createContext({});
+function ConfigProvider({ children, ...config }) {
+  const parent = useContext(SgConfigContext);
+  const merged = useMemo(
+    () => ({
+      size: config.size ?? parent.size,
+      disabled: config.disabled ?? parent.disabled,
+      bordered: config.bordered ?? parent.bordered,
+      locale: config.locale ? parent.locale ? { ...parent.locale, ...config.locale } : config.locale : parent.locale
+    }),
+    [config.size, config.disabled, config.bordered, config.locale, parent]
+  );
+  return /* @__PURE__ */ jsx(SgConfigContext.Provider, { value: merged, children });
+}
+function useConfig() {
+  return useContext(SgConfigContext);
+}
+
+// src/components/ui/Spin.tsx
+import React2 from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Spin({
+  spinning = true,
+  size: sizeProp,
+  delay,
+  tip,
+  fullscreen,
+  indicator,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const resolvedSize = sizeProp ?? config.size ?? "middle";
+  const [visible, setVisible] = React2.useState(delay ? false : spinning);
+  React2.useEffect(() => {
+    if (!delay) {
+      setVisible(spinning);
+      return;
+    }
+    if (spinning) {
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [spinning, delay]);
+  if (!visible && !children) return null;
+  if (!visible && children) return /* @__PURE__ */ jsx2(Fragment, { children });
+  const spinSizeClass = resolvedSize === "middle" ? "default" : resolvedSize;
+  const spinClasses = unstyled ? className ?? "" : ["sg-spin", `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(" ");
+  const spinElement = indicator ?? /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: spinClasses,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": config.locale?.spin?.loading ?? "Loading"
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-fullscreen-inner", children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }) });
+  }
+  if (!children) {
+    return /* @__PURE__ */ jsxs("span", { className: unstyled ? "" : "sg-spin-standalone", style, children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-container", style, children: [
+    /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-overlay", children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: visible ? unstyled ? "" : "sg-spin-blur" : "", children })
+  ] });
+}
+
+export {
+  ConfigProvider,
+  useConfig,
+  Spin
+};
+//# sourceMappingURL=chunk-2OCEO636.js.map

package/dist/chunk-2OCEO636.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ConfigProvider.tsx","../src/components/ui/Spin.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { SizeType, SgLocale } from '../types'\n\n/**\n * Global Skygraph component configuration merged through React context.\n *\n * По `prefixCls`: сознательно НЕ входит в публичный API до реализации\n * (вариант A в `docs/styling-plan.md`, фаза 4). На практике все корневые классы\n * имеют стабильный префикс `.sg-*`; если нужна изоляция — используйте изолированный\n * скоуп на хосте (шадоу-рут/отдельный контейнер со своими токенами).\n */\nexport interface SgConfig {\n  /** Default size token for nested components. */\n  size?: SizeType\n  /** Disables interactions for nested components when true. */\n  disabled?: boolean\n  /** Enables bordered styling for nested components when true. */\n  bordered?: boolean\n  /** Locale messages shallow-merged with the parent provider when set. */\n  locale?: SgLocale\n}\n\nconst SgConfigContext = createContext<SgConfig>({})\n\n/** Props for `ConfigProvider`, extending `SgConfig` with React children. */\nexport interface ConfigProviderProps extends SgConfig {\n  /** Tree of components that consume merged configuration from this provider. */\n  children: React.ReactNode\n}\n\n/**\n * Merges Skygraph configuration with any parent provider and exposes it via context.\n * Descendants read values through `useConfig` or `useConfigWithDefaults`.\n */\nexport function ConfigProvider({ children, ...config }: ConfigProviderProps) {\n  const parent = useContext(SgConfigContext)\n\n  const merged = useMemo<SgConfig>(\n    () => ({\n      size: config.size ?? parent.size,\n      disabled: config.disabled ?? parent.disabled,\n      bordered: config.bordered ?? parent.bordered,\n      locale: config.locale\n        ? parent.locale\n          ? { ...parent.locale, ...config.locale }\n          : config.locale\n        : parent.locale,\n    }),\n    [config.size, config.disabled, config.bordered, config.locale, parent],\n  )\n\n  return <SgConfigContext.Provider value={merged}>{children}</SgConfigContext.Provider>\n}\n\n/** Returns the merged `SgConfig` from the nearest ancestor `ConfigProvider`. */\nexport function useConfig(): SgConfig {\n  return useContext(SgConfigContext)\n}\n\n/**\n * Resolves effective `size` and `disabled` from props, context, and explicit defaults.\n * Returns the original props plus `resolvedSize` and `resolvedDisabled` for consumers.\n */\nexport function useConfigWithDefaults<T extends Record<string, unknown>>(\n  props: T,\n  defaults: { size?: SizeType; disabled?: boolean; bordered?: boolean },\n): T & { resolvedSize: SizeType; resolvedDisabled: boolean } {\n  const config = useContext(SgConfigContext)\n\n  return useMemo(() => {\n    const resolvedSize =\n      (props as Record<string, unknown>).size as SizeType | undefined ??\n      config.size ??\n      defaults.size ??\n      'middle'\n    const resolvedDisabled =\n      ((props as Record<string, unknown>).disabled as boolean | undefined) ??\n      config.disabled ??\n      defaults.disabled ??\n      false\n\n    return { ...props, resolvedSize, resolvedDisabled }\n  }, [props, config.size, config.disabled, defaults.size, defaults.disabled])\n}\n","import React from 'react'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, SizableProps } from '../../types'\n\n/** Props for loading spinner, overlay, and optional content blur. */\nexport interface SpinProps extends BaseComponentProps, SizableProps {\n  /** When `true`, shows the loading state (subject to `delay`). @default true */\n  spinning?: boolean\n  /** Milliseconds to wait before showing the spinner after `spinning` becomes true. */\n  delay?: number\n  /** Optional text below the indicator. */\n  tip?: string\n  /** When `true`, covers the viewport instead of inline or wrapping children. */\n  fullscreen?: boolean\n  /** Custom spinner node; defaults to a styled status element. */\n  indicator?: React.ReactNode\n  /** When set, shows an overlay with blur on this content while loading. */\n  children?: React.ReactNode\n}\n\n/**\n * Loading indicator with optional delay, tip, fullscreen mode, and child overlay.\n */\nexport function Spin({\n  spinning = true,\n  size: sizeProp,\n  delay,\n  tip,\n  fullscreen,\n  indicator,\n  children,\n  className,\n  style,\n  unstyled,\n}: SpinProps) {\n  const config = useConfig()\n  const resolvedSize = sizeProp ?? config.size ?? 'middle'\n\n  const [visible, setVisible] = React.useState(delay ? false : spinning)\n\n  React.useEffect(() => {\n    if (!delay) {\n      setVisible(spinning)\n      return\n    }\n\n    if (spinning) {\n      const timer = setTimeout(() => setVisible(true), delay)\n      return () => clearTimeout(timer)\n    }\n\n    setVisible(false)\n  }, [spinning, delay])\n\n  if (!visible && !children) return null\n  if (!visible && children) return <>{children}</>\n\n  const spinSizeClass = resolvedSize === 'middle' ? 'default' : resolvedSize\n  const spinClasses = unstyled\n    ? (className ?? '')\n    : ['sg-spin', `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(' ')\n\n  const spinElement = indicator ?? (\n    <span\n      className={spinClasses}\n      style={style}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={config.locale?.spin?.loading ?? 'Loading'}\n    />\n  )\n\n  if (fullscreen) {\n    return (\n      <div className={unstyled ? '' : 'sg-spin-fullscreen'}>\n        <div className={unstyled ? '' : 'sg-spin-fullscreen-inner'}>\n          {spinElement}\n          {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n        </div>\n      </div>\n    )\n  }\n\n  if (!children) {\n    return (\n      <span className={unstyled ? '' : 'sg-spin-standalone'} style={style}>\n        {spinElement}\n        {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n      </span>\n    )\n  }\n\n  return (\n    <div className={unstyled ? '' : 'sg-spin-container'} style={style}>\n      <div className={unstyled ? '' : 'sg-spin-overlay'}>\n        {spinElement}\n        {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n      </div>\n      <div className={visible ? (unstyled ? '' : 'sg-spin-blur') : ''}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAgB,eAAe,YAAY,eAAe;AAmDjD;AA7BT,IAAM,kBAAkB,cAAwB,CAAC,CAAC;AAY3C,SAAS,eAAe,EAAE,UAAU,GAAG,OAAO,GAAwB;AAC3E,QAAM,SAAS,WAAW,eAAe;AAEzC,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,MAAM,OAAO,QAAQ,OAAO;AAAA,MAC5B,UAAU,OAAO,YAAY,OAAO;AAAA,MACpC,UAAU,OAAO,YAAY,OAAO;AAAA,MACpC,QAAQ,OAAO,SACX,OAAO,SACL,EAAE,GAAG,OAAO,QAAQ,GAAG,OAAO,OAAO,IACrC,OAAO,SACT,OAAO;AAAA,IACb;AAAA,IACA,CAAC,OAAO,MAAM,OAAO,UAAU,OAAO,UAAU,OAAO,QAAQ,MAAM;AAAA,EACvE;AAEA,SAAO,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,QAAS,UAAS;AAC5D;AAGO,SAAS,YAAsB;AACpC,SAAO,WAAW,eAAe;AACnC;;;ACzDA,OAAOA,YAAW;AAuDiB,0BAAAC,MAoB3B,YApB2B;AAhC5B,SAAS,KAAK;AAAA,EACnB,WAAW;AAAA,EACX,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,YAAY,OAAO,QAAQ;AAEhD,QAAM,CAAC,SAAS,UAAU,IAAIC,OAAM,SAAS,QAAQ,QAAQ,QAAQ;AAErE,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAO;AACV,iBAAW,QAAQ;AACnB;AAAA,IACF;AAEA,QAAI,UAAU;AACZ,YAAM,QAAQ,WAAW,MAAM,WAAW,IAAI,GAAG,KAAK;AACtD,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAEA,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,MAAI,CAAC,WAAW,CAAC,SAAU,QAAO;AAClC,MAAI,CAAC,WAAW,SAAU,QAAO,gBAAAD,KAAA,YAAG,UAAS;AAE7C,QAAM,gBAAgB,iBAAiB,WAAW,YAAY;AAC9D,QAAM,cAAc,WACf,aAAa,KACd,CAAC,WAAW,WAAW,aAAa,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/E,QAAM,cAAc,aAClB,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,OAAO,QAAQ,MAAM,WAAW;AAAA;AAAA,EAC9C;AAGF,MAAI,YAAY;AACd,WACE,gBAAAA,KAAC,SAAI,WAAW,WAAW,KAAK,sBAC9B,+BAAC,SAAI,WAAW,WAAW,KAAK,4BAC7B;AAAA;AAAA,MACA,OAAO,gBAAAA,KAAC,SAAI,WAAW,WAAW,KAAK,eAAgB,eAAI;AAAA,OAC9D,GACF;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,WACE,qBAAC,UAAK,WAAW,WAAW,KAAK,sBAAsB,OACpD;AAAA;AAAA,MACA,OAAO,gBAAAA,KAAC,SAAI,WAAW,WAAW,KAAK,eAAgB,eAAI;AAAA,OAC9D;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,WAAW,KAAK,qBAAqB,OACnD;AAAA,yBAAC,SAAI,WAAW,WAAW,KAAK,mBAC7B;AAAA;AAAA,MACA,OAAO,gBAAAA,KAAC,SAAI,WAAW,WAAW,KAAK,eAAgB,eAAI;AAAA,OAC9D;AAAA,IACA,gBAAAA,KAAC,SAAI,WAAW,UAAW,WAAW,KAAK,iBAAkB,IAAK,UAAS;AAAA,KAC7E;AAEJ;","names":["React","jsx","React"]}

package/dist/chunk-BNMJSYI2.js

@@ -0,0 +1,54 @@
+import {
+  useVirtualScroll
+} from "./chunk-SEQI65CF.js";
+
+// src/components/complex/VirtualList/VirtualList.tsx
+import React, { forwardRef, useImperativeHandle } from "react";
+import { jsx } from "react/jsx-runtime";
+function VirtualListInner(props, ref) {
+  const {
+    data,
+    itemHeight,
+    overscan,
+    renderItem,
+    className,
+    style,
+    itemKey
+  } = props;
+  const { range, containerRef, scrollToIndex } = useVirtualScroll({
+    itemCount: data.length,
+    itemHeight,
+    overscan
+  });
+  useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        overflow: "auto",
+        position: "relative",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { height: range.totalHeight, position: "relative" }, children: range.visibleItems.map((vi) => {
+        const item = data[vi.index];
+        const key = itemKey ? itemKey(item, vi.index) : vi.index;
+        const itemStyle = {
+          position: "absolute",
+          top: vi.offsetTop,
+          left: 0,
+          right: 0,
+          height: vi.height
+        };
+        return /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, vi.index, itemStyle) }, key);
+      }) })
+    }
+  );
+}
+var VirtualList = forwardRef(VirtualListInner);
+
+export {
+  VirtualList
+};
+//# sourceMappingURL=chunk-BNMJSYI2.js.map

package/dist/chunk-BNMJSYI2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/complex/VirtualList/VirtualList.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle } from 'react'\nimport { useVirtualScroll } from '../../../hooks/useVirtualScroll'\nimport type { VirtualItem } from '@skygraph/core'\n\n/** Props for the virtualized fixed-height item list. */\nexport interface VirtualListProps<T = unknown> {\n  /** Full dataset; only visible indices are rendered. */\n  data: T[]\n  /** Fixed row height or per-index height resolver in pixels. */\n  itemHeight: number | ((index: number) => number)\n  /** Extra rows rendered above and below the viewport. */\n  overscan?: number\n  /** Renders one item with absolute positioning styles applied by the list. */\n  renderItem: (item: T, index: number, style: React.CSSProperties) => React.ReactNode\n  /** Scrolling container class name. */\n  className?: string\n  /** Scrolling container inline style. */\n  style?: React.CSSProperties\n  /** Stable React key for each item; defaults to row index. */\n  itemKey?: (item: T, index: number) => React.Key\n}\n\n/** Imperative API for `VirtualList`. */\nexport interface VirtualListRef {\n  /**\n   * Scrolls so the item at `index` is visible.\n   * @param align - Where to place the item in the viewport.\n   */\n  scrollToIndex: (index: number, align?: 'start' | 'center' | 'end') => void\n}\n\nfunction VirtualListInner<T>(\n  props: VirtualListProps<T>,\n  ref: React.ForwardedRef<VirtualListRef>,\n) {\n  const {\n    data,\n    itemHeight,\n    overscan,\n    renderItem,\n    className,\n    style,\n    itemKey,\n  } = props\n\n  const { range, containerRef, scrollToIndex } = useVirtualScroll({\n    itemCount: data.length,\n    itemHeight,\n    overscan,\n  })\n\n  useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex])\n\n  return (\n    <div\n      ref={containerRef as React.RefObject<HTMLDivElement>}\n      className={className}\n      style={{\n        overflow: 'auto',\n        position: 'relative',\n        ...style,\n      }}\n    >\n      <div style={{ height: range.totalHeight, position: 'relative' }}>\n        {range.visibleItems.map((vi: VirtualItem) => {\n          const item = data[vi.index]\n          const key = itemKey ? itemKey(item, vi.index) : vi.index\n          const itemStyle: React.CSSProperties = {\n            position: 'absolute',\n            top: vi.offsetTop,\n            left: 0,\n            right: 0,\n            height: vi.height,\n          }\n          return (\n            <React.Fragment key={key}>\n              {renderItem(item, vi.index, itemStyle)}\n            </React.Fragment>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Virtualized scroll container: mounts row content only for items near the viewport.\n * Forwards a ref with `scrollToIndex` for programmatic scrolling.\n */\nexport const VirtualList = forwardRef(VirtualListInner) as <T>(\n  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListRef> },\n) => React.ReactElement\n"],"mappings":";;;;;AAAA,OAAO,SAAS,YAAY,2BAA2B;AA2E3C;AA5CZ,SAAS,iBACP,OACA,KACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,OAAO,cAAc,cAAc,IAAI,iBAAiB;AAAA,IAC9D,WAAW,KAAK;AAAA,IAChB;AAAA,IACA;AAAA,EACF,CAAC;AAED,sBAAoB,KAAK,OAAO,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MAEA,8BAAC,SAAI,OAAO,EAAE,QAAQ,MAAM,aAAa,UAAU,WAAW,GAC3D,gBAAM,aAAa,IAAI,CAAC,OAAoB;AAC3C,cAAM,OAAO,KAAK,GAAG,KAAK;AAC1B,cAAM,MAAM,UAAU,QAAQ,MAAM,GAAG,KAAK,IAAI,GAAG;AACnD,cAAM,YAAiC;AAAA,UACrC,UAAU;AAAA,UACV,KAAK,GAAG;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ,GAAG;AAAA,QACb;AACA,eACE,oBAAC,MAAM,UAAN,EACE,qBAAW,MAAM,GAAG,OAAO,SAAS,KADlB,GAErB;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;AAMO,IAAM,cAAc,WAAW,gBAAgB;","names":[]}

package/dist/chunk-FSV73JI4.js

@@ -0,0 +1,58 @@
+import {
+  Spin,
+  useConfig
+} from "./chunk-2OCEO636.js";
+
+// src/components/ui/Checkbox.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  defaultChecked,
+  disabled: disabledProp,
+  loading,
+  indeterminate,
+  onChange,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-checkbox",
+    disabled || loading ? "sg-checkbox-disabled" : "",
+    loading ? "sg-checkbox-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { className: wrapperClass, style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        "aria-checked": checked,
+        className: unstyled ? "" : "sg-checkbox-input",
+        checked,
+        defaultChecked,
+        disabled: disabled || loading,
+        onChange: (e) => onChange?.(e.target.checked)
+      }
+    ),
+    !unstyled && /* @__PURE__ */ jsx("span", { className: "sg-checkbox-box", "aria-hidden": true }),
+    children && /* @__PURE__ */ jsx("span", { className: unstyled ? "" : "sg-checkbox-label", children }),
+    loading && /* @__PURE__ */ jsx(Spin, { size: "small", unstyled })
+  ] });
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-FSV73JI4.js.map

package/dist/chunk-FSV73JI4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Checkbox.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, InteractiveProps } from '../../types'\nimport { Spin } from './Spin'\n\n/** Props for the Checkbox component. */\nexport interface CheckboxProps extends BaseComponentProps, InteractiveProps {\n  /** Controlled checked state. */\n  checked?: boolean\n  /** Uncontrolled initial checked state. */\n  defaultChecked?: boolean\n  /** Renders the native checkbox in indeterminate state. */\n  indeterminate?: boolean\n  /** Called when the checked state changes. */\n  onChange?: (checked: boolean) => void\n  /** Label content beside the control. */\n  children?: React.ReactNode\n}\n\n/** Labeled checkbox with indeterminate support and optional loading state. */\nexport function Checkbox({\n  checked,\n  defaultChecked,\n  disabled: disabledProp,\n  loading,\n  indeterminate,\n  onChange,\n  children,\n  className,\n  style,\n  unstyled,\n}: CheckboxProps) {\n  const config = useConfig()\n  const disabled = disabledProp ?? config.disabled ?? false\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate ?? false\n    }\n  }, [indeterminate])\n\n  const wrapperClass = unstyled\n    ? (className ?? '')\n    : [\n        'sg-checkbox',\n        disabled || loading ? 'sg-checkbox-disabled' : '',\n        loading ? 'sg-checkbox-loading' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n  return (\n    <label className={wrapperClass} style={style}>\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        aria-checked={checked}\n        className={unstyled ? '' : 'sg-checkbox-input'}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled || loading}\n        onChange={(e) => onChange?.(e.target.checked)}\n      />\n      {!unstyled && <span className=\"sg-checkbox-box\" aria-hidden />}\n      {children && <span className={unstyled ? '' : 'sg-checkbox-label'}>{children}</span>}\n      {loading && <Spin size=\"small\" unstyled={unstyled} />}\n    </label>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAO,WAAW;AAuDd,SACE,KADF;AAnCG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,gBAAgB,OAAO,YAAY;AAEpD,QAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,gBAAgB,iBAAiB;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,eAAe,WAChB,aAAa,KACd;AAAA,IACE;AAAA,IACA,YAAY,UAAU,yBAAyB;AAAA,IAC/C,UAAU,wBAAwB;AAAA,IAClC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEf,SACE,qBAAC,WAAM,WAAW,cAAc,OAC9B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,WAAW,WAAW,KAAK;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,OAAO;AAAA;AAAA,IAC9C;AAAA,IACC,CAAC,YAAY,oBAAC,UAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,IAC3D,YAAY,oBAAC,UAAK,WAAW,WAAW,KAAK,qBAAsB,UAAS;AAAA,IAC5E,WAAW,oBAAC,QAAK,MAAK,SAAQ,UAAoB;AAAA,KACrD;AAEJ;","names":[]}

package/dist/chunk-GJDDPZH7.js

@@ -0,0 +1,226 @@
+// src/hooks/useHistory.ts
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { createHistory } from "@skygraph/core";
+function useHistory(core, options) {
+  const [, forceUpdate] = useState(0);
+  const historyRef = useRef(null);
+  const optionsRef = useRef(options);
+  if (!historyRef.current) {
+    historyRef.current = createHistory(core, optionsRef.current);
+  }
+  const tick = useCallback(() => forceUpdate((n) => n + 1), []);
+  const undo = useCallback(() => {
+    historyRef.current.undo();
+    tick();
+  }, [tick]);
+  const redo = useCallback(() => {
+    historyRef.current.redo();
+    tick();
+  }, [tick]);
+  const jumpTo = useCallback(
+    (index) => {
+      historyRef.current.jumpTo(index);
+      tick();
+    },
+    [tick]
+  );
+  const clear = useCallback(() => {
+    historyRef.current.clear();
+    tick();
+  }, [tick]);
+  useEffect(() => {
+    return () => {
+      historyRef.current?.destroy();
+    };
+  }, []);
+  const h = historyRef.current;
+  return useMemo(
+    () => ({
+      history: h,
+      canUndo: h.canUndo,
+      canRedo: h.canRedo,
+      cursor: h.cursor,
+      entries: h.entries,
+      undo,
+      redo,
+      jumpTo,
+      clear
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [h, h.cursor, h.entries.length, undo, redo, jumpTo, clear]
+  );
+}
+
+// src/components/devtools/HistoryPanel.tsx
+import { useState as useState2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = {
+  root: {
+    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
+    fontSize: 12,
+    border: "1px solid var(--sg-border, #d9d9d9)",
+    borderRadius: 8,
+    background: "var(--sg-bg-elevated, #fff)",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    borderBottom: "1px solid var(--sg-border, #d9d9d9)",
+    fontWeight: 600,
+    fontSize: 13
+  },
+  controls: {
+    display: "flex",
+    gap: 4
+  },
+  btn: {
+    padding: "2px 8px",
+    border: "1px solid var(--sg-border, #d9d9d9)",
+    borderRadius: 4,
+    background: "var(--sg-bg, #fafafa)",
+    cursor: "pointer",
+    fontSize: 11
+  },
+  btnDisabled: {
+    opacity: 0.4,
+    cursor: "not-allowed"
+  },
+  list: {
+    maxHeight: 300,
+    overflowY: "auto",
+    margin: 0,
+    padding: 0,
+    listStyle: "none"
+  },
+  entry: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "4px 12px",
+    cursor: "pointer",
+    borderBottom: "1px solid var(--sg-border-light, #f0f0f0)",
+    transition: "background 0.15s"
+  },
+  entryActive: {
+    background: "var(--sg-primary-bg, #e6f4ff)",
+    fontWeight: 600
+  },
+  entryFuture: {
+    opacity: 0.5
+  },
+  badge: {
+    display: "inline-block",
+    padding: "1px 6px",
+    borderRadius: 4,
+    fontSize: 10,
+    background: "var(--sg-primary-bg, #e6f4ff)",
+    color: "var(--sg-primary, #1677ff)"
+  },
+  patches: {
+    padding: "4px 12px 8px 32px",
+    background: "var(--sg-bg-subtle, #fafafa)",
+    fontSize: 11,
+    lineHeight: 1.6
+  },
+  empty: {
+    padding: "24px 12px",
+    textAlign: "center",
+    color: "var(--sg-text-tertiary, #999)"
+  }
+};
+function HistoryPanel({ history, className, style }) {
+  const { entries, cursor, canUndo, canRedo, undo, redo, jumpTo, clear } = history;
+  const [expanded, setExpanded] = useState2(null);
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.root, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Time-Travel (",
+        entries.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.controls, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles.btn, ...canUndo ? {} : styles.btnDisabled },
+            disabled: !canUndo,
+            onClick: undo,
+            children: "Undo"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles.btn, ...canRedo ? {} : styles.btnDisabled },
+            disabled: !canRedo,
+            onClick: redo,
+            children: "Redo"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { style: styles.btn, onClick: clear, children: "Clear" })
+      ] })
+    ] }),
+    entries.length === 0 ? /* @__PURE__ */ jsx("div", { style: styles.empty, children: "No history yet" }) : /* @__PURE__ */ jsx("ul", { style: styles.list, children: entries.map((entry, i) => {
+      const isCurrent = i === cursor;
+      const isFuture = i > cursor;
+      return /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              ...styles.entry,
+              ...isCurrent ? styles.entryActive : {},
+              ...isFuture ? styles.entryFuture : {}
+            },
+            onClick: () => jumpTo(i),
+            onDoubleClick: () => setExpanded(expanded === i ? null : i),
+            children: [
+              /* @__PURE__ */ jsx("span", { style: styles.badge, children: i }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                entry.patches.length,
+                " write",
+                entry.patches.length !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto", fontSize: 10, opacity: 0.6 }, children: formatTime(entry.timestamp) })
+            ]
+          }
+        ),
+        expanded === i && /* @__PURE__ */ jsx("div", { style: styles.patches, children: entry.patches.map((p, pi) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("code", { children: p.path }),
+          ":",
+          " ",
+          /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: formatValue(p.oldValue) }),
+          " \u2192 ",
+          /* @__PURE__ */ jsx("span", { children: formatValue(p.value) })
+        ] }, pi)) })
+      ] }, i);
+    }) })
+  ] });
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  return d.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatValue(v) {
+  if (v === void 0) return "undefined";
+  if (v === null) return "null";
+  if (typeof v === "string") return `"${v}"`;
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+
+export {
+  useHistory,
+  HistoryPanel
+};
+//# sourceMappingURL=chunk-GJDDPZH7.js.map

package/dist/chunk-GJDDPZH7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useHistory.ts","../src/components/devtools/HistoryPanel.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef, useMemo } from 'react'\nimport type { Core } from '@skygraph/core'\nimport { createHistory } from '@skygraph/core'\nimport type { HistoryPlugin, HistoryOptions } from '@skygraph/core'\n\nexport interface UseHistoryReturn {\n  history: HistoryPlugin\n  canUndo: boolean\n  canRedo: boolean\n  cursor: number\n  entries: HistoryPlugin['entries']\n  undo: () => void\n  redo: () => void\n  jumpTo: (index: number) => void\n  clear: () => void\n}\n\nexport function useHistory(core: Core, options?: HistoryOptions): UseHistoryReturn {\n  const [, forceUpdate] = useState(0)\n  const historyRef = useRef<HistoryPlugin | null>(null)\n  const optionsRef = useRef(options)\n\n  if (!historyRef.current) {\n    historyRef.current = createHistory(core, optionsRef.current)\n  }\n\n  const tick = useCallback(() => forceUpdate((n) => n + 1), [])\n\n  const undo = useCallback(() => {\n    historyRef.current!.undo()\n    tick()\n  }, [tick])\n\n  const redo = useCallback(() => {\n    historyRef.current!.redo()\n    tick()\n  }, [tick])\n\n  const jumpTo = useCallback(\n    (index: number) => {\n      historyRef.current!.jumpTo(index)\n      tick()\n    },\n    [tick],\n  )\n\n  const clear = useCallback(() => {\n    historyRef.current!.clear()\n    tick()\n  }, [tick])\n\n  useEffect(() => {\n    return () => {\n      historyRef.current?.destroy()\n    }\n  }, [])\n\n  const h = historyRef.current\n\n  return useMemo(\n    () => ({\n      history: h,\n      canUndo: h.canUndo,\n      canRedo: h.canRedo,\n      cursor: h.cursor,\n      entries: h.entries,\n      undo,\n      redo,\n      jumpTo,\n      clear,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [h, h.cursor, h.entries.length, undo, redo, jumpTo, clear],\n  )\n}\n","import React, { useState } from 'react'\nimport type { UseHistoryReturn } from '../../hooks/useHistory'\nimport type { BaseComponentProps } from '../../types'\n\n/** Props for the devtools time-travel history panel (base layout props come from `BaseComponentProps`). */\nexport interface HistoryPanelProps extends BaseComponentProps {\n  /** History controller from `useHistory` (entries, cursor, undo/redo, jump, clear). */\n  history: UseHistoryReturn\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n  root: {\n    fontFamily: 'ui-monospace, \"Cascadia Code\", \"Fira Code\", monospace',\n    fontSize: 12,\n    border: '1px solid var(--sg-border, #d9d9d9)',\n    borderRadius: 8,\n    background: 'var(--sg-bg-elevated, #fff)',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 12px',\n    borderBottom: '1px solid var(--sg-border, #d9d9d9)',\n    fontWeight: 600,\n    fontSize: 13,\n  },\n  controls: {\n    display: 'flex',\n    gap: 4,\n  },\n  btn: {\n    padding: '2px 8px',\n    border: '1px solid var(--sg-border, #d9d9d9)',\n    borderRadius: 4,\n    background: 'var(--sg-bg, #fafafa)',\n    cursor: 'pointer',\n    fontSize: 11,\n  },\n  btnDisabled: {\n    opacity: 0.4,\n    cursor: 'not-allowed',\n  },\n  list: {\n    maxHeight: 300,\n    overflowY: 'auto' as const,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  entry: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '4px 12px',\n    cursor: 'pointer',\n    borderBottom: '1px solid var(--sg-border-light, #f0f0f0)',\n    transition: 'background 0.15s',\n  },\n  entryActive: {\n    background: 'var(--sg-primary-bg, #e6f4ff)',\n    fontWeight: 600,\n  },\n  entryFuture: {\n    opacity: 0.5,\n  },\n  badge: {\n    display: 'inline-block',\n    padding: '1px 6px',\n    borderRadius: 4,\n    fontSize: 10,\n    background: 'var(--sg-primary-bg, #e6f4ff)',\n    color: 'var(--sg-primary, #1677ff)',\n  },\n  patches: {\n    padding: '4px 12px 8px 32px',\n    background: 'var(--sg-bg-subtle, #fafafa)',\n    fontSize: 11,\n    lineHeight: 1.6,\n  },\n  empty: {\n    padding: '24px 12px',\n    textAlign: 'center' as const,\n    color: 'var(--sg-text-tertiary, #999)',\n  },\n}\n\n/**\n * Time-travel UI listing history entries with undo/redo controls and expandable patch details.\n */\nexport function HistoryPanel({ history, className, style }: HistoryPanelProps) {\n  const { entries, cursor, canUndo, canRedo, undo, redo, jumpTo, clear } = history\n  const [expanded, setExpanded] = useState<number | null>(null)\n\n  return (\n    <div className={className} style={{ ...styles.root, ...style }}>\n      <div style={styles.header}>\n        <span>Time-Travel ({entries.length})</span>\n        <div style={styles.controls}>\n          <button\n            style={{ ...styles.btn, ...(canUndo ? {} : styles.btnDisabled) }}\n            disabled={!canUndo}\n            onClick={undo}\n          >\n            Undo\n          </button>\n          <button\n            style={{ ...styles.btn, ...(canRedo ? {} : styles.btnDisabled) }}\n            disabled={!canRedo}\n            onClick={redo}\n          >\n            Redo\n          </button>\n          <button style={styles.btn} onClick={clear}>\n            Clear\n          </button>\n        </div>\n      </div>\n\n      {entries.length === 0 ? (\n        <div style={styles.empty}>No history yet</div>\n      ) : (\n        <ul style={styles.list}>\n          {entries.map((entry, i) => {\n            const isCurrent = i === cursor\n            const isFuture = i > cursor\n\n            return (\n              <li key={i}>\n                <div\n                  style={{\n                    ...styles.entry,\n                    ...(isCurrent ? styles.entryActive : {}),\n                    ...(isFuture ? styles.entryFuture : {}),\n                  }}\n                  onClick={() => jumpTo(i)}\n                  onDoubleClick={() => setExpanded(expanded === i ? null : i)}\n                >\n                  <span style={styles.badge}>{i}</span>\n                  <span>\n                    {entry.patches.length} write{entry.patches.length !== 1 ? 's' : ''}\n                  </span>\n                  <span style={{ marginLeft: 'auto', fontSize: 10, opacity: 0.6 }}>\n                    {formatTime(entry.timestamp)}\n                  </span>\n                </div>\n\n                {expanded === i && (\n                  <div style={styles.patches}>\n                    {entry.patches.map((p, pi) => (\n                      <div key={pi}>\n                        <code>{p.path}</code>:{' '}\n                        <span style={{ opacity: 0.5 }}>{formatValue(p.oldValue)}</span>\n                        {' → '}\n                        <span>{formatValue(p.value)}</span>\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nfunction formatTime(ts: number): string {\n  const d = new Date(ts)\n  return d.toLocaleTimeString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  })\n}\n\nfunction formatValue(v: unknown): string {\n  if (v === undefined) return 'undefined'\n  if (v === null) return 'null'\n  if (typeof v === 'string') return `\"${v}\"`\n  try {\n    return JSON.stringify(v)\n  } catch {\n    return String(v)\n  }\n}\n"],"mappings":"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","names":["useState"]}