@skygraph/react 0.0.0-placeholder.0 → 0.4.0

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"]}