mvc-kit 2.13.1 → 2.14.0

package/agent-config/lib/install-claude.mjs

@@ -1,37 +1,36 @@
-import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, copyFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
+import { cpSync, mkdirSync, readdirSync, statSync } from 'node:fs';
+import { join, dirname, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const SKILLS_DIR = join(__dirname, '..', 'claude-code', 'skills');
-const AGENTS_DIR = join(__dirname, '..', 'claude-code', 'agents');
-
-const AUTO_HEADER = '<!-- Auto-generated by mvc-kit. Updated on npm install/update. Do not edit. -->';
-
-function stripFrontmatter(content) {
-  const match = content.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/);
-  return match ? match[1].trim() : content.trim();
-}
-
-/** Insert auto-generated header after YAML frontmatter (preserves parsing). */
-function addHeader(content) {
-  const match = content.match(/^(---\n[\s\S]*?\n---\n)([\s\S]*)$/);
-  if (match) {
-    return match[1] + '\n' + AUTO_HEADER + '\n\n' + match[2].trim() + '\n';
-  }
-  return AUTO_HEADER + '\n\n' + content;
-}
-
-function ensureDir(dir) {
-  if (!existsSync(dir)) {
-    mkdirSync(dir, { recursive: true });
+const SOURCE_DIR = join(__dirname, '..', 'claude-code');
+
+const SKILL_NAMES = ['mvc-kit', 'mvc-kit-review', 'mvc-kit-scaffold'];
+const AGENT_FILES = ['mvc-kit-architect.md'];
+
+function listFilesRecursive(dir) {
+  const out = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      for (const nested of listFilesRecursive(full)) {
+        out.push(join(entry, nested));
+      }
+    } else {
+      out.push(entry);
+    }
   }
+  return out;
 }
 
 /**
  * Install Claude Code integration files into a project's .claude/ directory.
  *
+ * Source directories under `agent-config/claude-code/` are copied verbatim —
+ * no frontmatter rewriting, no header injection. Source files are authored
+ * in their final installed form.
+ *
  * Creates:
  *   .claude/skills/mvc-kit/            — Framework reference skill + supporting docs
  *   .claude/skills/mvc-kit-review/     — Code review skill + checklist
@@ -39,109 +38,33 @@ function ensureDir(dir) {
  *   .claude/agents/mvc-kit-architect.md — Architecture planning agent
  *
  * @param {string} projectRoot — Absolute path to the consuming project's root
- * @returns {{ files: string[] }} — List of created/updated file paths (relative to projectRoot)
+ * @returns {{ files: string[] }} — List of installed file paths (relative to projectRoot)
  */
 export function installClaude(projectRoot) {
   const claudeDir = join(projectRoot, '.claude');
-  const guideDir = join(claudeDir, 'skills', 'mvc-kit');
-  const reviewDir = join(claudeDir, 'skills', 'mvc-kit-review');
-  const scaffoldDir = join(claudeDir, 'skills', 'mvc-kit-scaffold');
-  const templatesDir = join(scaffoldDir, 'templates');
-  const agentsDir = join(claudeDir, 'agents');
+  const skillsDest = join(claudeDir, 'skills');
+  const agentsDest = join(claudeDir, 'agents');
 
-  ensureDir(guideDir);
-  ensureDir(reviewDir);
-  ensureDir(scaffoldDir);
-  ensureDir(templatesDir);
-  ensureDir(agentsDir);
+  mkdirSync(skillsDest, { recursive: true });
+  mkdirSync(agentsDest, { recursive: true });
 
   const files = [];
 
-  // ─── 1. Guide skill — framework reference (model-invocable, auto-loaded) ───
-
-  const guideSkill = readFileSync(join(SKILLS_DIR, 'guide', 'SKILL.md'), 'utf-8');
-  const guideBody = stripFrontmatter(guideSkill)
-    // Remove the "Supporting Files" section — replaced with colocated file references below
-    .replace(/\n## Supporting Files[\s\S]*$/, '');
-
-  const GUIDE_FRONTMATTER = `---
-name: mvc-kit
-description: "mvc-kit framework reference — class roles, architecture rules, React hooks, and decision framework. Loaded on-demand when working with mvc-kit code."
-user-invocable: false
----`;
-
-  const skillContent = GUIDE_FRONTMATTER + '\n\n' + AUTO_HEADER + '\n\n' + guideBody + `
-
-## Supporting Files
-
-- [api-reference.md](api-reference.md) — Full API reference for all classes and hooks
-- [patterns.md](patterns.md) — Prescribed patterns with code examples
-- [anti-patterns.md](anti-patterns.md) — Anti-patterns to reject with fixes
-- [recipes.md](recipes.md) — Composition recipes for real-world features
-- [testing.md](testing.md) — Testing patterns (teardownAll, async assertions, memoization verification)
-
-### Per-Class Documentation (in \`node_modules/mvc-kit/src/\`)
-
-For deep dives on any specific class or hook, search for the \`.md\` file by name:
-
-- **Core:** \`ViewModel.md\`, \`Model.md\`, \`Collection.md\`, \`PersistentCollection.md\`, \`Resource.md\`, \`Service.md\`, \`EventBus.md\`, \`Channel.md\`, \`Controller.md\`, \`Trackable.md\`, \`singleton.md\`
-- **Helpers:** \`Sorting.md\`, \`Pagination.md\`, \`Selection.md\`, \`Feed.md\`, \`Pending.md\`, \`produceDraft.md\`
-- **React hooks:** \`react/use-local.md\`, \`react/use-instance.md\`, \`react/use-singleton.md\`, \`react/use-model.md\`, \`react/use-event-bus.md\`, \`react/use-teardown.md\`
-- **Components:** \`react/components/DataTable.md\`, \`react/components/CardList.md\`, \`react/components/InfiniteScroll.md\`
-`;
-
-  writeFileSync(join(guideDir, 'SKILL.md'), skillContent, 'utf-8');
-  files.push('.claude/skills/mvc-kit/SKILL.md');
-
-  // Copy supporting files alongside SKILL.md
-  const guideSupportFiles = ['api-reference.md', 'patterns.md', 'anti-patterns.md', 'recipes.md', 'testing.md'];
-  for (const file of guideSupportFiles) {
-    const src = join(SKILLS_DIR, 'guide', file);
-    if (existsSync(src)) {
-      copyFileSync(src, join(guideDir, file));
-      files.push(`.claude/skills/mvc-kit/${file}`);
+  for (const skill of SKILL_NAMES) {
+    const src = join(SOURCE_DIR, 'skills', skill);
+    const dest = join(skillsDest, skill);
+    cpSync(src, dest, { recursive: true, force: true });
+    for (const rel of listFilesRecursive(src)) {
+      files.push(`.claude/skills/${skill}/${rel}`);
     }
   }
 
-  // ─── 2. Review skill — code review with checklist ──────────────────────────
-
-  const reviewSkill = readFileSync(join(SKILLS_DIR, 'review', 'SKILL.md'), 'utf-8');
-  writeFileSync(join(reviewDir, 'SKILL.md'), addHeader(reviewSkill), 'utf-8');
-  files.push('.claude/skills/mvc-kit-review/SKILL.md');
-
-  copyFileSync(
-    join(SKILLS_DIR, 'review', 'checklist.md'),
-    join(reviewDir, 'checklist.md'),
-  );
-  files.push('.claude/skills/mvc-kit-review/checklist.md');
-
-  // ─── 3. Scaffold skill — code generation with templates ────────────────────
-
-  const scaffoldSkill = readFileSync(join(SKILLS_DIR, 'scaffold', 'SKILL.md'), 'utf-8');
-  writeFileSync(join(scaffoldDir, 'SKILL.md'), addHeader(scaffoldSkill), 'utf-8');
-  files.push('.claude/skills/mvc-kit-scaffold/SKILL.md');
-
-  const templatesSrc = join(SKILLS_DIR, 'scaffold', 'templates');
-  if (existsSync(templatesSrc)) {
-    for (const file of readdirSync(templatesSrc)) {
-      if (file.endsWith('.md')) {
-        copyFileSync(join(templatesSrc, file), join(templatesDir, file));
-        files.push(`.claude/skills/mvc-kit-scaffold/templates/${file}`);
-      }
-    }
+  for (const agent of AGENT_FILES) {
+    const src = join(SOURCE_DIR, 'agents', agent);
+    const dest = join(agentsDest, agent);
+    cpSync(src, dest, { force: true });
+    files.push(`.claude/agents/${agent}`);
   }
 
-  // ─── 4. Architect agent ────────────────────────────────────────────────────
-
-  let architectAgent = readFileSync(join(AGENTS_DIR, 'mvc-kit-architect.md'), 'utf-8');
-  // The source agent preloads "mvc-kit-guide" (the source skill name).
-  // In the installed context the guide skill is named "mvc-kit", so fix the reference.
-  architectAgent = architectAgent.replace(
-    /^(\s*- )mvc-kit-guide$/m,
-    '$1mvc-kit',
-  );
-  writeFileSync(join(agentsDir, 'mvc-kit-architect.md'), addHeader(architectAgent), 'utf-8');
-  files.push('.claude/agents/mvc-kit-architect.md');
-
   return { files };
 }

package/dist/react/components/DataTable.cjs

@@ -74,20 +74,16 @@ function DataTable({ items, columns, keyOf = defaultKeyOf, pageSize, sort, onSor
 	if (error && renderError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderError(error) });
 	if (items.length === 0 && renderEmpty) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderEmpty() });
 	const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
-	let resolvedSorts;
-	let resolvedOnSort;
-	if (sort) {
-		const resolved = resolveSortProp(sort, onSort);
-		resolvedSorts = resolved.sorts;
-		resolvedOnSort = resolved.onSort;
-	}
+	const resolvedSort = sort ? resolveSortProp(sort, onSort) : void 0;
+	const resolvedSorts = resolvedSort?.sorts;
+	const resolvedOnSort = resolvedSort?.onSort;
 	let displayItems = items;
 	let paginationInfo;
 	if (pagination) paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
 	else if (pageSize && !pagination) displayItems = items.slice(0, pageSize);
 	const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
-	const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
-	const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
+	const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
+	const someSelected = !!resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "data-table",
 		className,

package/dist/react/components/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  let resolvedSorts: readonly SortDescriptor[] | undefined;\n  let resolvedOnSort: ((key: string) => void) | undefined;\n  if (sort) {\n    const resolved = resolveSortProp(sort, onSort);\n    resolvedSorts = resolved.sorts;\n    resolvedOnSort = resolved.onSort;\n  }\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection!.selected.has(k));\n  const someSelected = resolvedSelection && allKeys.some(k => resolvedSelection!.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection!.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort!(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort!(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection!.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  const resolvedSort = sort ? resolveSortProp(sort, onSort) : undefined;\n  const resolvedSorts = resolvedSort?.sorts;\n  const resolvedOnSort = resolvedSort?.onSort;\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection.selected.has(k));\n  const someSelected = !!resolvedSelection && allKeys.some(k => resolvedSelection.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/react/components/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AA0EpD,kDAAkD;AAClD,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,eAAe;IACxD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,IAAI,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,aAAa,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,KAAK,SAAS,CAAC;IAC3E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IAEvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,OAAO,EACP,KAAoB,EACpB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAuHnB"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/react/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,MAAM,EACN,eAAe,EACf,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AA0EpD,kDAAkD;AAClD,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,eAAe;IACxD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,IAAI,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,aAAa,CAAC;IACjD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,KAAK,SAAS,CAAC;IAC3E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IAEvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,OAAO,EACP,KAAoB,EACpB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAmHnB"}

package/dist/react/components/DataTable.js

@@ -74,20 +74,16 @@ function DataTable({ items, columns, keyOf = defaultKeyOf, pageSize, sort, onSor
 	if (error && renderError) return /* @__PURE__ */ jsx(Fragment, { children: renderError(error) });
 	if (items.length === 0 && renderEmpty) return /* @__PURE__ */ jsx(Fragment, { children: renderEmpty() });
 	const resolvedSelection = selection ? resolveSelectionProp(selection) : void 0;
-	let resolvedSorts;
-	let resolvedOnSort;
-	if (sort) {
-		const resolved = resolveSortProp(sort, onSort);
-		resolvedSorts = resolved.sorts;
-		resolvedOnSort = resolved.onSort;
-	}
+	const resolvedSort = sort ? resolveSortProp(sort, onSort) : void 0;
+	const resolvedSorts = resolvedSort?.sorts;
+	const resolvedOnSort = resolvedSort?.onSort;
 	let displayItems = items;
 	let paginationInfo;
 	if (pagination) paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);
 	else if (pageSize && !pagination) displayItems = items.slice(0, pageSize);
 	const allKeys = resolvedSelection ? displayItems.map((item) => keyOf(item)) : [];
-	const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
-	const someSelected = resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
+	const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every((k) => resolvedSelection.selected.has(k));
+	const someSelected = !!resolvedSelection && allKeys.some((k) => resolvedSelection.selected.has(k));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "data-table",
 		className,

package/dist/react/components/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  let resolvedSorts: readonly SortDescriptor[] | undefined;\n  let resolvedOnSort: ((key: string) => void) | undefined;\n  if (sort) {\n    const resolved = resolveSortProp(sort, onSort);\n    resolvedSorts = resolved.sorts;\n    resolvedOnSort = resolved.onSort;\n  }\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection!.selected.has(k));\n  const someSelected = resolvedSelection && allKeys.some(k => resolvedSelection!.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection!.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort!(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort!(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection!.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/react/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  Column,\n  SortHeaderProps,\n  SelectionState,\n  SelectionHelper,\n  PaginationState,\n  PaginationHelper,\n  PaginationInfo,\n  SortingHelper,\n  AsyncStateProps,\n} from './types';\nimport { isSelectionHelper, isPaginationHelper, isSortingHelper } from './types';\nimport type { SortDescriptor } from '../../Sorting';\n\n// ── Prop resolution helpers ──\n\ninterface ResolvedSelection {\n  selected: ReadonlySet<any>;\n  onToggle: (key: any) => void;\n  onToggleAll: (allKeys: any[]) => void;\n}\n\nfunction resolveSelectionProp(selection: SelectionState | SelectionHelper): ResolvedSelection {\n  if (isSelectionHelper(selection)) {\n    return {\n      selected: selection.selected,\n      onToggle: (key) => selection.toggle(key),\n      onToggleAll: (allKeys) => selection.toggleAll(allKeys),\n    };\n  }\n  return {\n    selected: selection.selected,\n    onToggle: selection.onToggle,\n    onToggleAll: (allKeys) => selection.onToggleAll(allKeys),\n  };\n}\n\nfunction resolveSortProp(\n  sort: readonly SortDescriptor[] | SortingHelper,\n  onSort?: (key: string) => void,\n): { sorts: readonly SortDescriptor[]; onSort: ((key: string) => void) | undefined } {\n  if (isSortingHelper(sort)) {\n    return { sorts: sort.sorts, onSort: (key) => sort.toggle(key) };\n  }\n  return { sorts: sort, onSort };\n}\n\nfunction resolvePaginationProp(\n  pagination: PaginationState | PaginationHelper,\n  pageSize?: number,\n  paginationTotal?: number,\n): PaginationInfo {\n  if (isPaginationHelper(pagination)) {\n    const total = paginationTotal ?? 0;\n    const ps = pagination.pageSize;\n    const pageCount = Math.max(1, Math.ceil(total / ps));\n    const page = pagination.page;\n    return {\n      page,\n      pageCount,\n      total,\n      pageSize: ps,\n      hasPrev: page > 1,\n      hasNext: page < pageCount,\n      goToPage: (p) => pagination.setPage(p),\n      goPrev: () => pagination.setPage(page - 1),\n      goNext: () => pagination.setPage(page + 1),\n    };\n  }\n  const total = pagination.total;\n  const ps = pageSize ?? 10;\n  const pageCount = Math.max(1, Math.ceil(total / ps));\n  const page = pagination.page;\n  return {\n    page,\n    pageCount,\n    total,\n    pageSize: ps,\n    hasPrev: page > 1,\n    hasNext: page < pageCount,\n    goToPage: pagination.onPageChange,\n    goPrev: () => pagination.onPageChange(page - 1),\n    goNext: () => pagination.onPageChange(page + 1),\n  };\n}\n\n/** Props for the DataTable headless component. */\nexport interface DataTableProps<T> extends AsyncStateProps {\n  items: T[];\n  columns: Column<T>[];\n  keyOf?: (item: T) => string | number;\n  pageSize?: number;\n\n  // Controlled state — accepts object-literal OR helper instance\n  sort?: readonly SortDescriptor[] | SortingHelper;\n  onSort?: (key: string) => void;\n  selection?: SelectionState | SelectionHelper;\n  pagination?: PaginationState | PaginationHelper;\n  paginationTotal?: number;\n\n  // Render slots\n  renderEmpty?: () => ReactNode;\n  renderLoading?: () => ReactNode;\n  renderError?: (error: string) => ReactNode;\n  renderSortIndicator?: (props: SortHeaderProps) => ReactNode;\n  renderRow?: (item: T, index: number, defaultCells: ReactNode) => ReactNode;\n  renderPagination?: (info: PaginationInfo) => ReactNode;\n\n  className?: string;\n  'aria-label'?: string;\n}\n\nconst defaultKeyOf = (item: any) => item.id;\n\nfunction getAriaSortValue(key: string, sorts: readonly SortDescriptor[] | undefined): 'ascending' | 'descending' | 'none' {\n  if (!sorts) return 'none';\n  const desc = sorts.find(s => s.key === key);\n  if (!desc) return 'none';\n  return desc.direction === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * Headless data table with sort headers, selection checkboxes, and pagination slots.\n * Renders semantic HTML (`<table>`) with data attributes for styling.\n * Accepts Sorting/Selection/Pagination helpers directly via duck-typing.\n */\nexport function DataTable<T>({\n  items,\n  columns,\n  keyOf = defaultKeyOf,\n  pageSize,\n  sort,\n  onSort,\n  selection,\n  loading,\n  error,\n  pagination,\n  paginationTotal,\n  renderEmpty,\n  renderLoading,\n  renderError,\n  renderSortIndicator,\n  renderRow,\n  renderPagination,\n  className,\n  'aria-label': ariaLabel,\n}: DataTableProps<T>) {\n  if (loading && renderLoading) return <>{renderLoading()}</>;\n  if (error && renderError) return <>{renderError(error)}</>;\n  if (items.length === 0 && renderEmpty) return <>{renderEmpty()}</>;\n\n  // ── Resolve props ──\n  const resolvedSelection = selection ? resolveSelectionProp(selection) : undefined;\n\n  const resolvedSort = sort ? resolveSortProp(sort, onSort) : undefined;\n  const resolvedSorts = resolvedSort?.sorts;\n  const resolvedOnSort = resolvedSort?.onSort;\n\n  let displayItems = items;\n  let paginationInfo: PaginationInfo | undefined;\n  if (pagination) {\n    paginationInfo = resolvePaginationProp(pagination, pageSize, paginationTotal);\n  } else if (pageSize && !pagination) {\n    displayItems = items.slice(0, pageSize);\n  }\n\n  // Selection: check indeterminate state\n  const allKeys = resolvedSelection ? displayItems.map(item => keyOf(item)) : [];\n  const allSelected = !!resolvedSelection && allKeys.length > 0 && allKeys.every(k => resolvedSelection.selected.has(k));\n  const someSelected = !!resolvedSelection && allKeys.some(k => resolvedSelection.selected.has(k));\n\n  return (\n    <div data-component=\"data-table\" className={className}>\n      <table role=\"grid\" aria-label={ariaLabel}>\n        <thead>\n          <tr>\n            {resolvedSelection && (\n              <th data-column=\"select\">\n                <input\n                  type=\"checkbox\"\n                  checked={!!allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = !!someSelected && !allSelected;\n                  }}\n                  onChange={() => resolvedSelection.onToggleAll(allKeys)}\n                  aria-label=\"Select all\"\n                />\n              </th>\n            )}\n            {columns.map((col) => {\n              const isSortable = col.sortable && resolvedOnSort;\n              const sortDesc = resolvedSorts?.find(s => s.key === col.key);\n              const isActive = !!sortDesc;\n              const sortIndex = resolvedSorts ? resolvedSorts.findIndex(s => s.key === col.key) : -1;\n\n              return (\n                <th\n                  key={col.key}\n                  data-sortable={isSortable ? '' : undefined}\n                  data-sorted={isActive ? '' : undefined}\n                  data-align={col.align}\n                  style={col.width ? { width: col.width } : undefined}\n                  aria-sort={isSortable ? getAriaSortValue(col.key, resolvedSorts) : undefined}\n                >\n                  {isSortable ? (\n                    <button type=\"button\" onClick={() => resolvedOnSort(col.key)}>\n                      {col.header}\n                      {renderSortIndicator?.({\n                        active: isActive,\n                        direction: sortDesc?.direction ?? 'asc',\n                        index: sortIndex,\n                        onToggle: () => resolvedOnSort(col.key),\n                      })}\n                    </button>\n                  ) : (\n                    col.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {displayItems.map((item, index) => {\n            const key = keyOf(item);\n            const isSelected = resolvedSelection?.selected.has(key);\n\n            const cells = (\n              <>\n                {resolvedSelection && (\n                  <td data-column=\"select\">\n                    <input\n                      type=\"checkbox\"\n                      checked={!!isSelected}\n                      onChange={() => resolvedSelection.onToggle(key)}\n                      aria-label={`Select row ${key}`}\n                    />\n                  </td>\n                )}\n                {columns.map((col) => (\n                  <td\n                    key={col.key}\n                    data-align={col.align}\n                  >\n                    {col.render(item, index)}\n                  </td>\n                ))}\n              </>\n            );\n\n            return (\n              <tr key={key} data-selected={isSelected ? '' : undefined}>\n                {renderRow ? renderRow(item, index, cells) : cells}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      {paginationInfo && renderPagination?.(paginationInfo)}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/react/use-instance.cjs

@@ -1,5 +1,6 @@
 let react = require("react");
 //#region src/react/use-instance.ts
+var __DEV__ = typeof __MVC_KIT_DEV__ !== "undefined" && __MVC_KIT_DEV__;
 function hasAsyncSubscription(obj) {
 	return obj !== null && typeof obj === "object" && typeof obj.subscribeAsync === "function";
 }
@@ -13,22 +14,23 @@ var SERVER_SNAPSHOT = () => 0;
 * trigger React re-renders.
 */
 function useInstance(subscribable) {
+	if (__DEV__ && !subscribable) throw new Error("useInstance: received an undefined/null subscribable. Make sure the instance is created synchronously (in a parent ViewModel's constructor or as a singleton) before the component that calls useInstance renders. If it's created in onInit(), guard the component with `if (!vm.child) return <Spinner />` first.");
 	const ref = (0, react.useRef)(null);
 	if (!ref.current || ref.current.subscribable !== subscribable) {
 		const version = { current: ref.current?.version ?? 0 };
-		ref.current = {
+		const entry = {
 			version: version.current,
 			subscribable,
 			subscribe: (onStoreChange) => {
 				const unsub1 = subscribable.subscribe(() => {
 					version.current++;
-					ref.current.version = version.current;
+					entry.version = version.current;
 					onStoreChange();
 				});
 				let unsub2;
 				if (hasAsyncSubscription(subscribable)) unsub2 = subscribable.subscribeAsync(() => {
 					version.current++;
-					ref.current.version = version.current;
+					entry.version = version.current;
 					onStoreChange();
 				});
 				return () => {
@@ -38,6 +40,7 @@ function useInstance(subscribable) {
 			},
 			getSnapshot: () => version.current
 		};
+		ref.current = entry;
 	}
 	(0, react.useSyncExternalStore)(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);
 	return subscribable.state;

package/dist/react/use-instance.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-instance.cjs","names":[],"sources":["../../src/react/use-instance.ts"],"sourcesContent":["import { useSyncExternalStore, useRef } from 'react';\nimport type { Subscribable } from '../types';\n\nfunction hasAsyncSubscription(obj: unknown): obj is { subscribeAsync(cb: () => void): () => void } {\n  return (\n    obj !== null &&\n    typeof obj === 'object' &&\n    typeof (obj as any).subscribeAsync === 'function'\n  );\n}\n\nconst SERVER_SNAPSHOT = () => 0;\n\ninterface InstanceRef<S> {\n  version: number;\n  subscribable: Subscribable<S>;\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => number;\n}\n\n/**\n * Subscribe to an existing Subscribable instance.\n * No ownership - caller manages the instance lifecycle.\n *\n * If the instance has a `subscribeAsync` method (duck-typed),\n * a combined subscription ensures async state changes also\n * trigger React re-renders.\n */\nexport function useInstance<S>(subscribable: Subscribable<S>): S {\n  const ref = useRef<InstanceRef<S> | null>(null);\n\n  if (!ref.current || ref.current.subscribable !== subscribable) {\n    const version = { current: ref.current?.version ?? 0 };\n    ref.current = {\n      version: version.current,\n      subscribable,\n      subscribe: (onStoreChange: () => void) => {\n        const unsub1 = subscribable.subscribe(() => {\n          version.current++;\n          ref.current!.version = version.current;\n          onStoreChange();\n        });\n        let unsub2: (() => void) | undefined;\n        if (hasAsyncSubscription(subscribable)) {\n          unsub2 = subscribable.subscribeAsync(() => {\n            version.current++;\n            ref.current!.version = version.current;\n            onStoreChange();\n          });\n        }\n        return () => { unsub1(); unsub2?.(); };\n      },\n      getSnapshot: () => version.current,\n    };\n  }\n\n  useSyncExternalStore(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);\n\n  return subscribable.state;\n}\n"],"mappings":";;AAGA,SAAS,qBAAqB,KAAqE;AACjG,QACE,QAAQ,QACR,OAAO,QAAQ,YACf,OAAQ,IAAY,mBAAmB;;AAI3C,IAAM,wBAAwB;;;;;;;;;AAiB9B,SAAgB,YAAe,cAAkC;CAC/D,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;AAE/C,KAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,iBAAiB,cAAc;EAC7D,MAAM,UAAU,EAAE,SAAS,IAAI,SAAS,WAAW,GAAG;AACtD,MAAI,UAAU;GACZ,SAAS,QAAQ;GACjB;GACA,YAAY,kBAA8B;IACxC,MAAM,SAAS,aAAa,gBAAgB;AAC1C,aAAQ;AACR,SAAI,QAAS,UAAU,QAAQ;AAC/B,oBAAe;MACf;IACF,IAAI;AACJ,QAAI,qBAAqB,aAAa,CACpC,UAAS,aAAa,qBAAqB;AACzC,aAAQ;AACR,SAAI,QAAS,UAAU,QAAQ;AAC/B,oBAAe;MACf;AAEJ,iBAAa;AAAE,aAAQ;AAAE,eAAU;;;GAErC,mBAAmB,QAAQ;GAC5B;;AAGH,EAAA,GAAA,MAAA,sBAAqB,IAAI,QAAQ,WAAW,IAAI,QAAQ,aAAa,gBAAgB;AAErF,QAAO,aAAa"}
+{"version":3,"file":"use-instance.cjs","names":[],"sources":["../../src/react/use-instance.ts"],"sourcesContent":["import { useSyncExternalStore, useRef } from 'react';\nimport type { Subscribable } from '../types';\n\nconst __DEV__ = typeof __MVC_KIT_DEV__ !== 'undefined' && __MVC_KIT_DEV__;\n\nfunction hasAsyncSubscription(obj: unknown): obj is { subscribeAsync(cb: () => void): () => void } {\n  return (\n    obj !== null &&\n    typeof obj === 'object' &&\n    typeof (obj as any).subscribeAsync === 'function'\n  );\n}\n\nconst SERVER_SNAPSHOT = () => 0;\n\ninterface InstanceRef<S> {\n  version: number;\n  subscribable: Subscribable<S>;\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => number;\n}\n\n/**\n * Subscribe to an existing Subscribable instance.\n * No ownership - caller manages the instance lifecycle.\n *\n * If the instance has a `subscribeAsync` method (duck-typed),\n * a combined subscription ensures async state changes also\n * trigger React re-renders.\n */\nexport function useInstance<S>(subscribable: Subscribable<S>): S {\n  if (__DEV__ && !subscribable) {\n    throw new Error(\n      'useInstance: received an undefined/null subscribable. ' +\n      'Make sure the instance is created synchronously (in a parent ViewModel\\'s constructor or as a singleton) ' +\n      'before the component that calls useInstance renders. ' +\n      'If it\\'s created in onInit(), guard the component with `if (!vm.child) return <Spinner />` first.',\n    );\n  }\n  const ref = useRef<InstanceRef<S> | null>(null);\n\n  if (!ref.current || ref.current.subscribable !== subscribable) {\n    const version = { current: ref.current?.version ?? 0 };\n    const entry: InstanceRef<S> = {\n      version: version.current,\n      subscribable,\n      subscribe: (onStoreChange: () => void) => {\n        const unsub1 = subscribable.subscribe(() => {\n          version.current++;\n          entry.version = version.current;\n          onStoreChange();\n        });\n        let unsub2: (() => void) | undefined;\n        if (hasAsyncSubscription(subscribable)) {\n          unsub2 = subscribable.subscribeAsync(() => {\n            version.current++;\n            entry.version = version.current;\n            onStoreChange();\n          });\n        }\n        return () => { unsub1(); unsub2?.(); };\n      },\n      getSnapshot: () => version.current,\n    };\n    ref.current = entry;\n  }\n\n  useSyncExternalStore(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);\n\n  return subscribable.state;\n}\n"],"mappings":";;AAGA,IAAM,UAAU,OAAO,oBAAoB,eAAe;AAE1D,SAAS,qBAAqB,KAAqE;AACjG,QACE,QAAQ,QACR,OAAO,QAAQ,YACf,OAAQ,IAAY,mBAAmB;;AAI3C,IAAM,wBAAwB;;;;;;;;;AAiB9B,SAAgB,YAAe,cAAkC;AAC/D,KAAI,WAAW,CAAC,aACd,OAAM,IAAI,MACR,sTAID;CAEH,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;AAE/C,KAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,iBAAiB,cAAc;EAC7D,MAAM,UAAU,EAAE,SAAS,IAAI,SAAS,WAAW,GAAG;EACtD,MAAM,QAAwB;GAC5B,SAAS,QAAQ;GACjB;GACA,YAAY,kBAA8B;IACxC,MAAM,SAAS,aAAa,gBAAgB;AAC1C,aAAQ;AACR,WAAM,UAAU,QAAQ;AACxB,oBAAe;MACf;IACF,IAAI;AACJ,QAAI,qBAAqB,aAAa,CACpC,UAAS,aAAa,qBAAqB;AACzC,aAAQ;AACR,WAAM,UAAU,QAAQ;AACxB,oBAAe;MACf;AAEJ,iBAAa;AAAE,aAAQ;AAAE,eAAU;;;GAErC,mBAAmB,QAAQ;GAC5B;AACD,MAAI,UAAU;;AAGhB,EAAA,GAAA,MAAA,sBAAqB,IAAI,QAAQ,WAAW,IAAI,QAAQ,aAAa,gBAAgB;AAErF,QAAO,aAAa"}

package/dist/react/use-instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-instance.d.ts","sourceRoot":"","sources":["../../src/react/use-instance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAmB7C;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CA+B/D"}
+{"version":3,"file":"use-instance.d.ts","sourceRoot":"","sources":["../../src/react/use-instance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqB7C;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAwC/D"}

package/dist/react/use-instance.js

@@ -1,5 +1,6 @@
 import { useRef, useSyncExternalStore } from "react";
 //#region src/react/use-instance.ts
+var __DEV__ = typeof __MVC_KIT_DEV__ !== "undefined" && __MVC_KIT_DEV__;
 function hasAsyncSubscription(obj) {
 	return obj !== null && typeof obj === "object" && typeof obj.subscribeAsync === "function";
 }
@@ -13,22 +14,23 @@ var SERVER_SNAPSHOT = () => 0;
 * trigger React re-renders.
 */
 function useInstance(subscribable) {
+	if (__DEV__ && !subscribable) throw new Error("useInstance: received an undefined/null subscribable. Make sure the instance is created synchronously (in a parent ViewModel's constructor or as a singleton) before the component that calls useInstance renders. If it's created in onInit(), guard the component with `if (!vm.child) return <Spinner />` first.");
 	const ref = useRef(null);
 	if (!ref.current || ref.current.subscribable !== subscribable) {
 		const version = { current: ref.current?.version ?? 0 };
-		ref.current = {
+		const entry = {
 			version: version.current,
 			subscribable,
 			subscribe: (onStoreChange) => {
 				const unsub1 = subscribable.subscribe(() => {
 					version.current++;
-					ref.current.version = version.current;
+					entry.version = version.current;
 					onStoreChange();
 				});
 				let unsub2;
 				if (hasAsyncSubscription(subscribable)) unsub2 = subscribable.subscribeAsync(() => {
 					version.current++;
-					ref.current.version = version.current;
+					entry.version = version.current;
 					onStoreChange();
 				});
 				return () => {
@@ -38,6 +40,7 @@ function useInstance(subscribable) {
 			},
 			getSnapshot: () => version.current
 		};
+		ref.current = entry;
 	}
 	useSyncExternalStore(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);
 	return subscribable.state;

package/dist/react/use-instance.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-instance.js","names":[],"sources":["../../src/react/use-instance.ts"],"sourcesContent":["import { useSyncExternalStore, useRef } from 'react';\nimport type { Subscribable } from '../types';\n\nfunction hasAsyncSubscription(obj: unknown): obj is { subscribeAsync(cb: () => void): () => void } {\n  return (\n    obj !== null &&\n    typeof obj === 'object' &&\n    typeof (obj as any).subscribeAsync === 'function'\n  );\n}\n\nconst SERVER_SNAPSHOT = () => 0;\n\ninterface InstanceRef<S> {\n  version: number;\n  subscribable: Subscribable<S>;\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => number;\n}\n\n/**\n * Subscribe to an existing Subscribable instance.\n * No ownership - caller manages the instance lifecycle.\n *\n * If the instance has a `subscribeAsync` method (duck-typed),\n * a combined subscription ensures async state changes also\n * trigger React re-renders.\n */\nexport function useInstance<S>(subscribable: Subscribable<S>): S {\n  const ref = useRef<InstanceRef<S> | null>(null);\n\n  if (!ref.current || ref.current.subscribable !== subscribable) {\n    const version = { current: ref.current?.version ?? 0 };\n    ref.current = {\n      version: version.current,\n      subscribable,\n      subscribe: (onStoreChange: () => void) => {\n        const unsub1 = subscribable.subscribe(() => {\n          version.current++;\n          ref.current!.version = version.current;\n          onStoreChange();\n        });\n        let unsub2: (() => void) | undefined;\n        if (hasAsyncSubscription(subscribable)) {\n          unsub2 = subscribable.subscribeAsync(() => {\n            version.current++;\n            ref.current!.version = version.current;\n            onStoreChange();\n          });\n        }\n        return () => { unsub1(); unsub2?.(); };\n      },\n      getSnapshot: () => version.current,\n    };\n  }\n\n  useSyncExternalStore(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);\n\n  return subscribable.state;\n}\n"],"mappings":";;AAGA,SAAS,qBAAqB,KAAqE;AACjG,QACE,QAAQ,QACR,OAAO,QAAQ,YACf,OAAQ,IAAY,mBAAmB;;AAI3C,IAAM,wBAAwB;;;;;;;;;AAiB9B,SAAgB,YAAe,cAAkC;CAC/D,MAAM,MAAM,OAA8B,KAAK;AAE/C,KAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,iBAAiB,cAAc;EAC7D,MAAM,UAAU,EAAE,SAAS,IAAI,SAAS,WAAW,GAAG;AACtD,MAAI,UAAU;GACZ,SAAS,QAAQ;GACjB;GACA,YAAY,kBAA8B;IACxC,MAAM,SAAS,aAAa,gBAAgB;AAC1C,aAAQ;AACR,SAAI,QAAS,UAAU,QAAQ;AAC/B,oBAAe;MACf;IACF,IAAI;AACJ,QAAI,qBAAqB,aAAa,CACpC,UAAS,aAAa,qBAAqB;AACzC,aAAQ;AACR,SAAI,QAAS,UAAU,QAAQ;AAC/B,oBAAe;MACf;AAEJ,iBAAa;AAAE,aAAQ;AAAE,eAAU;;;GAErC,mBAAmB,QAAQ;GAC5B;;AAGH,sBAAqB,IAAI,QAAQ,WAAW,IAAI,QAAQ,aAAa,gBAAgB;AAErF,QAAO,aAAa"}
+{"version":3,"file":"use-instance.js","names":[],"sources":["../../src/react/use-instance.ts"],"sourcesContent":["import { useSyncExternalStore, useRef } from 'react';\nimport type { Subscribable } from '../types';\n\nconst __DEV__ = typeof __MVC_KIT_DEV__ !== 'undefined' && __MVC_KIT_DEV__;\n\nfunction hasAsyncSubscription(obj: unknown): obj is { subscribeAsync(cb: () => void): () => void } {\n  return (\n    obj !== null &&\n    typeof obj === 'object' &&\n    typeof (obj as any).subscribeAsync === 'function'\n  );\n}\n\nconst SERVER_SNAPSHOT = () => 0;\n\ninterface InstanceRef<S> {\n  version: number;\n  subscribable: Subscribable<S>;\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => number;\n}\n\n/**\n * Subscribe to an existing Subscribable instance.\n * No ownership - caller manages the instance lifecycle.\n *\n * If the instance has a `subscribeAsync` method (duck-typed),\n * a combined subscription ensures async state changes also\n * trigger React re-renders.\n */\nexport function useInstance<S>(subscribable: Subscribable<S>): S {\n  if (__DEV__ && !subscribable) {\n    throw new Error(\n      'useInstance: received an undefined/null subscribable. ' +\n      'Make sure the instance is created synchronously (in a parent ViewModel\\'s constructor or as a singleton) ' +\n      'before the component that calls useInstance renders. ' +\n      'If it\\'s created in onInit(), guard the component with `if (!vm.child) return <Spinner />` first.',\n    );\n  }\n  const ref = useRef<InstanceRef<S> | null>(null);\n\n  if (!ref.current || ref.current.subscribable !== subscribable) {\n    const version = { current: ref.current?.version ?? 0 };\n    const entry: InstanceRef<S> = {\n      version: version.current,\n      subscribable,\n      subscribe: (onStoreChange: () => void) => {\n        const unsub1 = subscribable.subscribe(() => {\n          version.current++;\n          entry.version = version.current;\n          onStoreChange();\n        });\n        let unsub2: (() => void) | undefined;\n        if (hasAsyncSubscription(subscribable)) {\n          unsub2 = subscribable.subscribeAsync(() => {\n            version.current++;\n            entry.version = version.current;\n            onStoreChange();\n          });\n        }\n        return () => { unsub1(); unsub2?.(); };\n      },\n      getSnapshot: () => version.current,\n    };\n    ref.current = entry;\n  }\n\n  useSyncExternalStore(ref.current.subscribe, ref.current.getSnapshot, SERVER_SNAPSHOT);\n\n  return subscribable.state;\n}\n"],"mappings":";;AAGA,IAAM,UAAU,OAAO,oBAAoB,eAAe;AAE1D,SAAS,qBAAqB,KAAqE;AACjG,QACE,QAAQ,QACR,OAAO,QAAQ,YACf,OAAQ,IAAY,mBAAmB;;AAI3C,IAAM,wBAAwB;;;;;;;;;AAiB9B,SAAgB,YAAe,cAAkC;AAC/D,KAAI,WAAW,CAAC,aACd,OAAM,IAAI,MACR,sTAID;CAEH,MAAM,MAAM,OAA8B,KAAK;AAE/C,KAAI,CAAC,IAAI,WAAW,IAAI,QAAQ,iBAAiB,cAAc;EAC7D,MAAM,UAAU,EAAE,SAAS,IAAI,SAAS,WAAW,GAAG;EACtD,MAAM,QAAwB;GAC5B,SAAS,QAAQ;GACjB;GACA,YAAY,kBAA8B;IACxC,MAAM,SAAS,aAAa,gBAAgB;AAC1C,aAAQ;AACR,WAAM,UAAU,QAAQ;AACxB,oBAAe;MACf;IACF,IAAI;AACJ,QAAI,qBAAqB,aAAa,CACpC,UAAS,aAAa,qBAAqB;AACzC,aAAQ;AACR,WAAM,UAAU,QAAQ;AACxB,oBAAe;MACf;AAEJ,iBAAa;AAAE,aAAQ;AAAE,eAAU;;;GAErC,mBAAmB,QAAQ;GAC5B;AACD,MAAI,UAAU;;AAGhB,sBAAqB,IAAI,QAAQ,WAAW,IAAI,QAAQ,aAAa,gBAAgB;AAErF,QAAO,aAAa"}

package/dist/react/use-local.cjs

@@ -31,6 +31,7 @@ function useLocal(classOrFactory, ...rest) {
 	else instanceRef.current = classOrFactory();
 	(0, react.useEffect)(() => {
 		const instance = instanceRef.current;
+		if (!instance) return;
 		mountedRef.current = true;
 		if (require_guards.isInitializable(instance)) instance.init();
 		return () => {

package/dist/react/use-local.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-local.cjs","names":[],"sources":["../../src/react/use-local.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { DependencyList } from 'react';\nimport type { Subscribable, Disposable } from '../types';\nimport { isSubscribable, isSubscribeOnly, isInitializable } from './guards';\nimport { useInstance } from './use-instance';\nimport { useSubscribeOnly } from './use-subscribe-only';\nimport type { StateOf } from './types';\n\nfunction depsChanged(prev: DependencyList | undefined, next: DependencyList): boolean {\n  if (prev === undefined) return false;\n  if (prev.length !== next.length) return true;\n  for (let i = 0; i < prev.length; i++) {\n    if (!Object.is(prev[i], next[i])) return true;\n  }\n  return false;\n}\n\n// ── With deps (class + initialState + deps) ────────────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<any> & Disposable>(\n  Class: new (initialState: StateOf<T>) => T,\n  initialState: StateOf<T>,\n  deps: DependencyList,\n): [StateOf<T>, T];\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T,\n  deps: DependencyList,\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(\n  factory: () => T,\n  deps: DependencyList,\n): T;\n\n// ── Without deps (existing overloads, unchanged) ───────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<\n  T extends Subscribable<S> & Disposable,\n  S = StateOf<T>,\n  Args extends unknown[] = unknown[]\n>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable, Args extends unknown[] = unknown[]>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): T;\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(factory: () => T): T;\n\n// ── Implementation ─────────────────────────────────────────────────\n\nexport function useLocal<T extends Disposable, S = StateOf<T>>(\n  classOrFactory: (new (...args: unknown[]) => T) | (() => T),\n  ...rest: unknown[]\n): [S, T] | T {\n  // ── Detect deps: last arg is an array → treat as deps ──\n  let args: unknown[];\n  let deps: DependencyList | undefined;\n\n  if (rest.length > 0 && Array.isArray(rest[rest.length - 1])) {\n    deps = rest[rest.length - 1] as DependencyList;\n    args = rest.slice(0, -1);\n  } else {\n    args = rest;\n    deps = undefined;\n  }\n\n  const instanceRef = useRef<T | null>(null);\n  const mountedRef = useRef(false);\n  const prevDepsRef = useRef<DependencyList | undefined>(undefined);\n\n  // ── Render phase: dep-change detection ──\n  if (deps !== undefined && depsChanged(prevDepsRef.current, deps)) {\n    instanceRef.current?.dispose();\n    instanceRef.current = null;\n  }\n  if (deps !== undefined) {\n    prevDepsRef.current = deps;\n  }\n\n  // ── Create instance if needed ──\n  if (!instanceRef.current || instanceRef.current.disposed) {\n    const isClass =\n      typeof classOrFactory === 'function' &&\n      classOrFactory.prototype &&\n      classOrFactory.prototype.constructor === classOrFactory;\n\n    if (isClass) {\n      instanceRef.current = new (classOrFactory as new (...a: unknown[]) => T)(...args);\n    } else {\n      instanceRef.current = (classOrFactory as () => T)();\n    }\n  }\n\n  // ── Effect: init + deferred cleanup ──\n  useEffect(() => {\n    const instance = instanceRef.current!; // capture for cleanup closure\n    mountedRef.current = true;\n    if (isInitializable(instance)) {\n      instance.init();\n    }\n    return () => {\n      mountedRef.current = false;\n      setTimeout(() => {\n        if (!mountedRef.current) {\n          instance.dispose();\n        }\n      }, 0);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps ?? []);\n\n  // ── Subscribe to state if Subscribable ──\n  if (isSubscribable(instanceRef.current)) {\n    const state = useInstance(instanceRef.current as unknown as Subscribable<S>);\n    return [state, instanceRef.current];\n  }\n\n  // ── Subscribe for re-renders if subscribe-only (e.g., Trackable) ──\n  if (isSubscribeOnly(instanceRef.current)) {\n    useSubscribeOnly(instanceRef.current);\n    return instanceRef.current;\n  }\n\n  return instanceRef.current;\n}\n"],"mappings":";;;;;AAQA,SAAS,YAAY,MAAkC,MAA+B;AACpF,KAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,KAAI,KAAK,WAAW,KAAK,OAAQ,QAAO;AACxC,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,KAAI,CAAC,OAAO,GAAG,KAAK,IAAI,KAAK,GAAG,CAAE,QAAO;AAE3C,QAAO;;AA4ET,SAAgB,SACd,gBACA,GAAG,MACS;CAEZ,IAAI;CACJ,IAAI;AAEJ,KAAI,KAAK,SAAS,KAAK,MAAM,QAAQ,KAAK,KAAK,SAAS,GAAG,EAAE;AAC3D,SAAO,KAAK,KAAK,SAAS;AAC1B,SAAO,KAAK,MAAM,GAAG,GAAG;QACnB;AACL,SAAO;AACP,SAAO,KAAA;;CAGT,MAAM,eAAA,GAAA,MAAA,QAA+B,KAAK;CAC1C,MAAM,cAAA,GAAA,MAAA,QAAoB,MAAM;CAChC,MAAM,eAAA,GAAA,MAAA,QAAiD,KAAA,EAAU;AAGjE,KAAI,SAAS,KAAA,KAAa,YAAY,YAAY,SAAS,KAAK,EAAE;AAChE,cAAY,SAAS,SAAS;AAC9B,cAAY,UAAU;;AAExB,KAAI,SAAS,KAAA,EACX,aAAY,UAAU;AAIxB,KAAI,CAAC,YAAY,WAAW,YAAY,QAAQ,SAM9C,KAJE,OAAO,mBAAmB,cAC1B,eAAe,aACf,eAAe,UAAU,gBAAgB,eAGzC,aAAY,UAAU,IAAK,eAA8C,GAAG,KAAK;KAEjF,aAAY,UAAW,gBAA4B;AAKvD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,WAAW,YAAY;AAC7B,aAAW,UAAU;AACrB,MAAI,eAAA,gBAAgB,SAAS,CAC3B,UAAS,MAAM;AAEjB,eAAa;AACX,cAAW,UAAU;AACrB,oBAAiB;AACf,QAAI,CAAC,WAAW,QACd,UAAS,SAAS;MAEnB,EAAE;;IAGN,QAAQ,EAAE,CAAC;AAGd,KAAI,eAAA,eAAe,YAAY,QAAQ,CAErC,QAAO,CADO,qBAAA,YAAY,YAAY,QAAsC,EAC7D,YAAY,QAAQ;AAIrC,KAAI,eAAA,gBAAgB,YAAY,QAAQ,EAAE;AACxC,6BAAA,iBAAiB,YAAY,QAAQ;AACrC,SAAO,YAAY;;AAGrB,QAAO,YAAY"}
+{"version":3,"file":"use-local.cjs","names":[],"sources":["../../src/react/use-local.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { DependencyList } from 'react';\nimport type { Subscribable, Disposable } from '../types';\nimport { isSubscribable, isSubscribeOnly, isInitializable } from './guards';\nimport { useInstance } from './use-instance';\nimport { useSubscribeOnly } from './use-subscribe-only';\nimport type { StateOf } from './types';\n\nfunction depsChanged(prev: DependencyList | undefined, next: DependencyList): boolean {\n  if (prev === undefined) return false;\n  if (prev.length !== next.length) return true;\n  for (let i = 0; i < prev.length; i++) {\n    if (!Object.is(prev[i], next[i])) return true;\n  }\n  return false;\n}\n\n// ── With deps (class + initialState + deps) ────────────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<any> & Disposable>(\n  Class: new (initialState: StateOf<T>) => T,\n  initialState: StateOf<T>,\n  deps: DependencyList,\n): [StateOf<T>, T];\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T,\n  deps: DependencyList,\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(\n  factory: () => T,\n  deps: DependencyList,\n): T;\n\n// ── Without deps (existing overloads, unchanged) ───────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<\n  T extends Subscribable<S> & Disposable,\n  S = StateOf<T>,\n  Args extends unknown[] = unknown[]\n>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable, Args extends unknown[] = unknown[]>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): T;\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(factory: () => T): T;\n\n// ── Implementation ─────────────────────────────────────────────────\n\nexport function useLocal<T extends Disposable, S = StateOf<T>>(\n  classOrFactory: (new (...args: unknown[]) => T) | (() => T),\n  ...rest: unknown[]\n): [S, T] | T {\n  // ── Detect deps: last arg is an array → treat as deps ──\n  let args: unknown[];\n  let deps: DependencyList | undefined;\n\n  if (rest.length > 0 && Array.isArray(rest[rest.length - 1])) {\n    deps = rest[rest.length - 1] as DependencyList;\n    args = rest.slice(0, -1);\n  } else {\n    args = rest;\n    deps = undefined;\n  }\n\n  const instanceRef = useRef<T | null>(null);\n  const mountedRef = useRef(false);\n  const prevDepsRef = useRef<DependencyList | undefined>(undefined);\n\n  // ── Render phase: dep-change detection ──\n  if (deps !== undefined && depsChanged(prevDepsRef.current, deps)) {\n    instanceRef.current?.dispose();\n    instanceRef.current = null;\n  }\n  if (deps !== undefined) {\n    prevDepsRef.current = deps;\n  }\n\n  // ── Create instance if needed ──\n  if (!instanceRef.current || instanceRef.current.disposed) {\n    const isClass =\n      typeof classOrFactory === 'function' &&\n      classOrFactory.prototype &&\n      classOrFactory.prototype.constructor === classOrFactory;\n\n    if (isClass) {\n      instanceRef.current = new (classOrFactory as new (...a: unknown[]) => T)(...args);\n    } else {\n      instanceRef.current = (classOrFactory as () => T)();\n    }\n  }\n\n  // ── Effect: init + deferred cleanup ──\n  useEffect(() => {\n    const instance = instanceRef.current;\n    if (!instance) return;\n    mountedRef.current = true;\n    if (isInitializable(instance)) {\n      instance.init();\n    }\n    return () => {\n      mountedRef.current = false;\n      setTimeout(() => {\n        if (!mountedRef.current) {\n          instance.dispose();\n        }\n      }, 0);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps ?? []);\n\n  // ── Subscribe to state if Subscribable ──\n  if (isSubscribable(instanceRef.current)) {\n    const state = useInstance(instanceRef.current as unknown as Subscribable<S>);\n    return [state, instanceRef.current];\n  }\n\n  // ── Subscribe for re-renders if subscribe-only (e.g., Trackable) ──\n  if (isSubscribeOnly(instanceRef.current)) {\n    useSubscribeOnly(instanceRef.current);\n    return instanceRef.current;\n  }\n\n  return instanceRef.current;\n}\n"],"mappings":";;;;;AAQA,SAAS,YAAY,MAAkC,MAA+B;AACpF,KAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,KAAI,KAAK,WAAW,KAAK,OAAQ,QAAO;AACxC,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,KAAI,CAAC,OAAO,GAAG,KAAK,IAAI,KAAK,GAAG,CAAE,QAAO;AAE3C,QAAO;;AA4ET,SAAgB,SACd,gBACA,GAAG,MACS;CAEZ,IAAI;CACJ,IAAI;AAEJ,KAAI,KAAK,SAAS,KAAK,MAAM,QAAQ,KAAK,KAAK,SAAS,GAAG,EAAE;AAC3D,SAAO,KAAK,KAAK,SAAS;AAC1B,SAAO,KAAK,MAAM,GAAG,GAAG;QACnB;AACL,SAAO;AACP,SAAO,KAAA;;CAGT,MAAM,eAAA,GAAA,MAAA,QAA+B,KAAK;CAC1C,MAAM,cAAA,GAAA,MAAA,QAAoB,MAAM;CAChC,MAAM,eAAA,GAAA,MAAA,QAAiD,KAAA,EAAU;AAGjE,KAAI,SAAS,KAAA,KAAa,YAAY,YAAY,SAAS,KAAK,EAAE;AAChE,cAAY,SAAS,SAAS;AAC9B,cAAY,UAAU;;AAExB,KAAI,SAAS,KAAA,EACX,aAAY,UAAU;AAIxB,KAAI,CAAC,YAAY,WAAW,YAAY,QAAQ,SAM9C,KAJE,OAAO,mBAAmB,cAC1B,eAAe,aACf,eAAe,UAAU,gBAAgB,eAGzC,aAAY,UAAU,IAAK,eAA8C,GAAG,KAAK;KAEjF,aAAY,UAAW,gBAA4B;AAKvD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,SAAU;AACf,aAAW,UAAU;AACrB,MAAI,eAAA,gBAAgB,SAAS,CAC3B,UAAS,MAAM;AAEjB,eAAa;AACX,cAAW,UAAU;AACrB,oBAAiB;AACf,QAAI,CAAC,WAAW,QACd,UAAS,SAAS;MAEnB,EAAE;;IAGN,QAAQ,EAAE,CAAC;AAGd,KAAI,eAAA,eAAe,YAAY,QAAQ,CAErC,QAAO,CADO,qBAAA,YAAY,YAAY,QAAsC,EAC7D,YAAY,QAAQ;AAIrC,KAAI,eAAA,gBAAgB,YAAY,QAAQ,EAAE;AACxC,6BAAA,iBAAiB,YAAY,QAAQ;AACrC,SAAO,YAAY;;AAGrB,QAAO,YAAY"}

package/dist/react/use-local.js

@@ -31,6 +31,7 @@ function useLocal(classOrFactory, ...rest) {
 	else instanceRef.current = classOrFactory();
 	useEffect(() => {
 		const instance = instanceRef.current;
+		if (!instance) return;
 		mountedRef.current = true;
 		if (isInitializable(instance)) instance.init();
 		return () => {

package/dist/react/use-local.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-local.js","names":[],"sources":["../../src/react/use-local.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { DependencyList } from 'react';\nimport type { Subscribable, Disposable } from '../types';\nimport { isSubscribable, isSubscribeOnly, isInitializable } from './guards';\nimport { useInstance } from './use-instance';\nimport { useSubscribeOnly } from './use-subscribe-only';\nimport type { StateOf } from './types';\n\nfunction depsChanged(prev: DependencyList | undefined, next: DependencyList): boolean {\n  if (prev === undefined) return false;\n  if (prev.length !== next.length) return true;\n  for (let i = 0; i < prev.length; i++) {\n    if (!Object.is(prev[i], next[i])) return true;\n  }\n  return false;\n}\n\n// ── With deps (class + initialState + deps) ────────────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<any> & Disposable>(\n  Class: new (initialState: StateOf<T>) => T,\n  initialState: StateOf<T>,\n  deps: DependencyList,\n): [StateOf<T>, T];\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T,\n  deps: DependencyList,\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(\n  factory: () => T,\n  deps: DependencyList,\n): T;\n\n// ── Without deps (existing overloads, unchanged) ───────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<\n  T extends Subscribable<S> & Disposable,\n  S = StateOf<T>,\n  Args extends unknown[] = unknown[]\n>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable, Args extends unknown[] = unknown[]>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): T;\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(factory: () => T): T;\n\n// ── Implementation ─────────────────────────────────────────────────\n\nexport function useLocal<T extends Disposable, S = StateOf<T>>(\n  classOrFactory: (new (...args: unknown[]) => T) | (() => T),\n  ...rest: unknown[]\n): [S, T] | T {\n  // ── Detect deps: last arg is an array → treat as deps ──\n  let args: unknown[];\n  let deps: DependencyList | undefined;\n\n  if (rest.length > 0 && Array.isArray(rest[rest.length - 1])) {\n    deps = rest[rest.length - 1] as DependencyList;\n    args = rest.slice(0, -1);\n  } else {\n    args = rest;\n    deps = undefined;\n  }\n\n  const instanceRef = useRef<T | null>(null);\n  const mountedRef = useRef(false);\n  const prevDepsRef = useRef<DependencyList | undefined>(undefined);\n\n  // ── Render phase: dep-change detection ──\n  if (deps !== undefined && depsChanged(prevDepsRef.current, deps)) {\n    instanceRef.current?.dispose();\n    instanceRef.current = null;\n  }\n  if (deps !== undefined) {\n    prevDepsRef.current = deps;\n  }\n\n  // ── Create instance if needed ──\n  if (!instanceRef.current || instanceRef.current.disposed) {\n    const isClass =\n      typeof classOrFactory === 'function' &&\n      classOrFactory.prototype &&\n      classOrFactory.prototype.constructor === classOrFactory;\n\n    if (isClass) {\n      instanceRef.current = new (classOrFactory as new (...a: unknown[]) => T)(...args);\n    } else {\n      instanceRef.current = (classOrFactory as () => T)();\n    }\n  }\n\n  // ── Effect: init + deferred cleanup ──\n  useEffect(() => {\n    const instance = instanceRef.current!; // capture for cleanup closure\n    mountedRef.current = true;\n    if (isInitializable(instance)) {\n      instance.init();\n    }\n    return () => {\n      mountedRef.current = false;\n      setTimeout(() => {\n        if (!mountedRef.current) {\n          instance.dispose();\n        }\n      }, 0);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps ?? []);\n\n  // ── Subscribe to state if Subscribable ──\n  if (isSubscribable(instanceRef.current)) {\n    const state = useInstance(instanceRef.current as unknown as Subscribable<S>);\n    return [state, instanceRef.current];\n  }\n\n  // ── Subscribe for re-renders if subscribe-only (e.g., Trackable) ──\n  if (isSubscribeOnly(instanceRef.current)) {\n    useSubscribeOnly(instanceRef.current);\n    return instanceRef.current;\n  }\n\n  return instanceRef.current;\n}\n"],"mappings":";;;;;AAQA,SAAS,YAAY,MAAkC,MAA+B;AACpF,KAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,KAAI,KAAK,WAAW,KAAK,OAAQ,QAAO;AACxC,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,KAAI,CAAC,OAAO,GAAG,KAAK,IAAI,KAAK,GAAG,CAAE,QAAO;AAE3C,QAAO;;AA4ET,SAAgB,SACd,gBACA,GAAG,MACS;CAEZ,IAAI;CACJ,IAAI;AAEJ,KAAI,KAAK,SAAS,KAAK,MAAM,QAAQ,KAAK,KAAK,SAAS,GAAG,EAAE;AAC3D,SAAO,KAAK,KAAK,SAAS;AAC1B,SAAO,KAAK,MAAM,GAAG,GAAG;QACnB;AACL,SAAO;AACP,SAAO,KAAA;;CAGT,MAAM,cAAc,OAAiB,KAAK;CAC1C,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,cAAc,OAAmC,KAAA,EAAU;AAGjE,KAAI,SAAS,KAAA,KAAa,YAAY,YAAY,SAAS,KAAK,EAAE;AAChE,cAAY,SAAS,SAAS;AAC9B,cAAY,UAAU;;AAExB,KAAI,SAAS,KAAA,EACX,aAAY,UAAU;AAIxB,KAAI,CAAC,YAAY,WAAW,YAAY,QAAQ,SAM9C,KAJE,OAAO,mBAAmB,cAC1B,eAAe,aACf,eAAe,UAAU,gBAAgB,eAGzC,aAAY,UAAU,IAAK,eAA8C,GAAG,KAAK;KAEjF,aAAY,UAAW,gBAA4B;AAKvD,iBAAgB;EACd,MAAM,WAAW,YAAY;AAC7B,aAAW,UAAU;AACrB,MAAI,gBAAgB,SAAS,CAC3B,UAAS,MAAM;AAEjB,eAAa;AACX,cAAW,UAAU;AACrB,oBAAiB;AACf,QAAI,CAAC,WAAW,QACd,UAAS,SAAS;MAEnB,EAAE;;IAGN,QAAQ,EAAE,CAAC;AAGd,KAAI,eAAe,YAAY,QAAQ,CAErC,QAAO,CADO,YAAY,YAAY,QAAsC,EAC7D,YAAY,QAAQ;AAIrC,KAAI,gBAAgB,YAAY,QAAQ,EAAE;AACxC,mBAAiB,YAAY,QAAQ;AACrC,SAAO,YAAY;;AAGrB,QAAO,YAAY"}
+{"version":3,"file":"use-local.js","names":[],"sources":["../../src/react/use-local.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport type { DependencyList } from 'react';\nimport type { Subscribable, Disposable } from '../types';\nimport { isSubscribable, isSubscribeOnly, isInitializable } from './guards';\nimport { useInstance } from './use-instance';\nimport { useSubscribeOnly } from './use-subscribe-only';\nimport type { StateOf } from './types';\n\nfunction depsChanged(prev: DependencyList | undefined, next: DependencyList): boolean {\n  if (prev === undefined) return false;\n  if (prev.length !== next.length) return true;\n  for (let i = 0; i < prev.length; i++) {\n    if (!Object.is(prev[i], next[i])) return true;\n  }\n  return false;\n}\n\n// ── With deps (class + initialState + deps) ────────────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<any> & Disposable>(\n  Class: new (initialState: StateOf<T>) => T,\n  initialState: StateOf<T>,\n  deps: DependencyList,\n): [StateOf<T>, T];\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T,\n  deps: DependencyList,\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Disposes and recreates when deps change.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(\n  factory: () => T,\n  deps: DependencyList,\n): T;\n\n// ── Without deps (existing overloads, unchanged) ───────────────────\n\n/**\n * Create component-scoped Subscribable instance, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<\n  T extends Subscribable<S> & Disposable,\n  S = StateOf<T>,\n  Args extends unknown[] = unknown[]\n>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable, Args extends unknown[] = unknown[]>(\n  Class: new (...args: Args) => T,\n  ...args: Args\n): T;\n\n/**\n * Create component-scoped Subscribable instance via factory, auto-disposed on unmount.\n * Returns [state, instance] tuple.\n */\nexport function useLocal<T extends Subscribable<S> & Disposable, S = StateOf<T>>(\n  factory: () => T\n): [S, T];\n\n/**\n * Create component-scoped Disposable instance via factory (non-Subscribable), auto-disposed on unmount.\n * Returns the instance directly.\n */\nexport function useLocal<T extends Disposable>(factory: () => T): T;\n\n// ── Implementation ─────────────────────────────────────────────────\n\nexport function useLocal<T extends Disposable, S = StateOf<T>>(\n  classOrFactory: (new (...args: unknown[]) => T) | (() => T),\n  ...rest: unknown[]\n): [S, T] | T {\n  // ── Detect deps: last arg is an array → treat as deps ──\n  let args: unknown[];\n  let deps: DependencyList | undefined;\n\n  if (rest.length > 0 && Array.isArray(rest[rest.length - 1])) {\n    deps = rest[rest.length - 1] as DependencyList;\n    args = rest.slice(0, -1);\n  } else {\n    args = rest;\n    deps = undefined;\n  }\n\n  const instanceRef = useRef<T | null>(null);\n  const mountedRef = useRef(false);\n  const prevDepsRef = useRef<DependencyList | undefined>(undefined);\n\n  // ── Render phase: dep-change detection ──\n  if (deps !== undefined && depsChanged(prevDepsRef.current, deps)) {\n    instanceRef.current?.dispose();\n    instanceRef.current = null;\n  }\n  if (deps !== undefined) {\n    prevDepsRef.current = deps;\n  }\n\n  // ── Create instance if needed ──\n  if (!instanceRef.current || instanceRef.current.disposed) {\n    const isClass =\n      typeof classOrFactory === 'function' &&\n      classOrFactory.prototype &&\n      classOrFactory.prototype.constructor === classOrFactory;\n\n    if (isClass) {\n      instanceRef.current = new (classOrFactory as new (...a: unknown[]) => T)(...args);\n    } else {\n      instanceRef.current = (classOrFactory as () => T)();\n    }\n  }\n\n  // ── Effect: init + deferred cleanup ──\n  useEffect(() => {\n    const instance = instanceRef.current;\n    if (!instance) return;\n    mountedRef.current = true;\n    if (isInitializable(instance)) {\n      instance.init();\n    }\n    return () => {\n      mountedRef.current = false;\n      setTimeout(() => {\n        if (!mountedRef.current) {\n          instance.dispose();\n        }\n      }, 0);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps ?? []);\n\n  // ── Subscribe to state if Subscribable ──\n  if (isSubscribable(instanceRef.current)) {\n    const state = useInstance(instanceRef.current as unknown as Subscribable<S>);\n    return [state, instanceRef.current];\n  }\n\n  // ── Subscribe for re-renders if subscribe-only (e.g., Trackable) ──\n  if (isSubscribeOnly(instanceRef.current)) {\n    useSubscribeOnly(instanceRef.current);\n    return instanceRef.current;\n  }\n\n  return instanceRef.current;\n}\n"],"mappings":";;;;;AAQA,SAAS,YAAY,MAAkC,MAA+B;AACpF,KAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,KAAI,KAAK,WAAW,KAAK,OAAQ,QAAO;AACxC,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAC/B,KAAI,CAAC,OAAO,GAAG,KAAK,IAAI,KAAK,GAAG,CAAE,QAAO;AAE3C,QAAO;;AA4ET,SAAgB,SACd,gBACA,GAAG,MACS;CAEZ,IAAI;CACJ,IAAI;AAEJ,KAAI,KAAK,SAAS,KAAK,MAAM,QAAQ,KAAK,KAAK,SAAS,GAAG,EAAE;AAC3D,SAAO,KAAK,KAAK,SAAS;AAC1B,SAAO,KAAK,MAAM,GAAG,GAAG;QACnB;AACL,SAAO;AACP,SAAO,KAAA;;CAGT,MAAM,cAAc,OAAiB,KAAK;CAC1C,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,cAAc,OAAmC,KAAA,EAAU;AAGjE,KAAI,SAAS,KAAA,KAAa,YAAY,YAAY,SAAS,KAAK,EAAE;AAChE,cAAY,SAAS,SAAS;AAC9B,cAAY,UAAU;;AAExB,KAAI,SAAS,KAAA,EACX,aAAY,UAAU;AAIxB,KAAI,CAAC,YAAY,WAAW,YAAY,QAAQ,SAM9C,KAJE,OAAO,mBAAmB,cAC1B,eAAe,aACf,eAAe,UAAU,gBAAgB,eAGzC,aAAY,UAAU,IAAK,eAA8C,GAAG,KAAK;KAEjF,aAAY,UAAW,gBAA4B;AAKvD,iBAAgB;EACd,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,SAAU;AACf,aAAW,UAAU;AACrB,MAAI,gBAAgB,SAAS,CAC3B,UAAS,MAAM;AAEjB,eAAa;AACX,cAAW,UAAU;AACrB,oBAAiB;AACf,QAAI,CAAC,WAAW,QACd,UAAS,SAAS;MAEnB,EAAE;;IAGN,QAAQ,EAAE,CAAC;AAGd,KAAI,eAAe,YAAY,QAAQ,CAErC,QAAO,CADO,YAAY,YAAY,QAAsC,EAC7D,YAAY,QAAQ;AAIrC,KAAI,gBAAgB,YAAY,QAAQ,EAAE;AACxC,mBAAiB,YAAY,QAAQ;AACrC,SAAO,YAAY;;AAGrB,QAAO,YAAY"}