@vpxa/aikit 0.1.156 → 0.1.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpxa/aikit",
-  "version": "0.1.156",
+  "version": "0.1.158",
   "type": "module",
   "description": "Local-first AI developer toolkit — knowledge base, code analysis, context management, and developer tools for LLM agents",
   "license": "MIT",
@@ -37,6 +37,7 @@
     "!scaffold/adapters/",
     "!scaffold/generated/",
     "!scaffold/general/viewers/",
+    "scaffold/general/viewers/dist/*.html",
     "!scaffold/README.md",
     "README.md",
     "LICENSE"

package/packages/blocks-core/dist/index.d.ts

@@ -107,7 +107,7 @@ interface TypedBlock {
   [key: string]: unknown;
 }
 /** All supported block type literals. */
-type BlockType = 'markdown' | 'text' | 'heading' | 'paragraph' | 'separator' | 'code' | 'table' | 'metrics' | 'cards' | 'tree' | 'graph' | 'mermaid' | 'chart' | 'timeline' | 'checklist' | 'comparison' | 'status-board' | 'prompt' | 'progress' | 'actions' | 'docs-browser' | 'finding' | 'tags';
+type BlockType = 'markdown' | 'text' | 'heading' | 'paragraph' | 'separator' | 'code' | 'table' | 'metrics' | 'cards' | 'tree' | 'graph' | 'mermaid' | 'chart' | 'timeline' | 'checklist' | 'comparison' | 'component-detail' | 'data-table-schema' | 'status-board' | 'docs-hub' | 'prompt' | 'progress' | 'actions' | 'docs-browser' | 'finding' | 'lifecycle-flow' | 'tags';
 /** Value type for metrics block. */
 interface MetricItem {
   label: string;
@@ -174,6 +174,68 @@ interface DocFile {
   content?: string;
   status?: 'current' | 'stale' | 'missing';
 }
+interface DocsHubPage {
+  title: string;
+  description?: string;
+  icon?: string;
+  href?: string;
+  category?: string;
+  status?: 'current' | 'draft' | 'deprecated';
+}
+interface ComponentInterface {
+  name: string;
+  type: string;
+  description?: string;
+}
+interface ComponentDependency {
+  name: string;
+  relationship?: string;
+}
+interface ComponentDetailValue {
+  name: string;
+  description?: string;
+  type?: string;
+  technology?: string;
+  responsibilities?: string[];
+  interfaces?: ComponentInterface[];
+  dependencies?: ComponentDependency[];
+  metrics?: Record<string, string | number>;
+  codeLinks?: Array<{
+    label: string;
+    href: string;
+  }>;
+}
+interface LifecycleFlowStep {
+  id: string;
+  label: string;
+  description?: string;
+  type?: 'start' | 'end' | 'step' | 'decision' | 'parallel';
+  status?: 'active' | 'completed' | 'pending' | 'error';
+}
+interface LifecycleFlowEdge {
+  from: string;
+  to: string;
+  label?: string;
+}
+interface DataTableSchemaField {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  constraints?: string[];
+  default?: string;
+}
+interface DataTableSchemaIndex {
+  name: string;
+  columns: string[];
+  unique?: boolean;
+}
+interface DataTableSchemaValue {
+  name: string;
+  description?: string;
+  fields: DataTableSchemaField[];
+  indexes?: DataTableSchemaIndex[];
+}
 /** Block renderer function signature. */
 type BlockRenderer = (block: TypedBlock, ctx?: RenderContext) => string;
 /** Public alias for the renderer-specific context when another package claims RenderContext. */
@@ -216,7 +278,7 @@ interface ChannelSurface {
 //#endregion
 //#region packages/blocks-core/src/css.d.ts
 /** Base CSS that's always needed. */
-declare const baseCss = "\n.bk-section {\n  display: grid;\n  gap: var(--dt-space-3);\n  margin: 0 0 var(--dt-space-6);\n}\n\n.bk-section-title {\n  margin: 0;\n  color: var(--dt-text-primary);\n  font-family: var(--dt-font-sans);\n  font-size: var(--dt-font-size-lg);\n  font-weight: 700;\n}\n\n.bk-text,\n.bk-markdown,\n.bk-paragraph,\n.bk-fallback,\n.bk-prompt,\n.bk-heading,\n.bk-table,\n.bk-docs-browser,\n.bk-actions,\n.bk-comparison,\n.bk-status-board,\n.bk-progress,\n.bk-timeline,\n.bk-tree,\n.bk-tags,\n.bk-cards,\n.bk-metrics,\n.bk-chart,\n.bk-code,\n.bk-mermaid,\n.bk-graph,\n.bk-checklist,\n.bk-finding {\n  font-family: var(--dt-font-sans);\n}\n\n.bk-text a,\n.bk-markdown a,\n.bk-finding a {\n  color: var(--dt-accent-fg);\n  text-decoration: none;\n}\n\n.bk-text code,\n.bk-markdown code,\n.bk-finding code {\n  padding: 0 var(--dt-space-1);\n  border-radius: var(--dt-radius-sm);\n  background: var(--dt-bg-tertiary);\n  color: var(--dt-purple-fg);\n  font-family: var(--dt-font-mono);\n  font-size: 0.95em;\n}\n\n.bk-fallback {\n  margin: 0;\n  padding: var(--dt-space-4);\n  border: 1px solid var(--dt-border-default);\n  border-radius: var(--dt-radius-lg);\n  background: var(--dt-bg-secondary);\n  color: var(--dt-text-secondary);\n  font-family: var(--dt-font-mono);\n  font-size: var(--dt-font-size-sm);\n  white-space: pre-wrap;\n}\n\n.bk-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+declare const baseCss = "\n.bk-section {\n  display: grid;\n  gap: var(--dt-space-3);\n  margin: 0 0 var(--dt-space-6);\n}\n\n.bk-section-title {\n  margin: 0;\n  color: var(--dt-text-primary);\n  font-family: var(--dt-font-sans);\n  font-size: var(--dt-font-size-lg);\n  font-weight: 700;\n}\n\n.bk-text,\n.bk-markdown,\n.bk-paragraph,\n.bk-fallback,\n.bk-prompt,\n.bk-heading,\n.bk-table,\n.bk-data-table-schema,\n.bk-docs-browser,\n.bk-docs-hub,\n.bk-actions,\n.bk-comparison,\n.bk-component-detail,\n.bk-status-board,\n.bk-progress,\n.bk-lifecycle-flow,\n.bk-timeline,\n.bk-tree,\n.bk-tags,\n.bk-cards,\n.bk-metrics,\n.bk-chart,\n.bk-code,\n.bk-mermaid,\n.bk-graph,\n.bk-checklist,\n.bk-finding {\n  font-family: var(--dt-font-sans);\n}\n\n.bk-text a,\n.bk-markdown a,\n.bk-finding a {\n  color: var(--dt-accent-fg);\n  text-decoration: none;\n}\n\n.bk-text code,\n.bk-markdown code,\n.bk-finding code {\n  padding: 0 var(--dt-space-1);\n  border-radius: var(--dt-radius-sm);\n  background: var(--dt-bg-tertiary);\n  color: var(--dt-purple-fg);\n  font-family: var(--dt-font-mono);\n  font-size: 0.95em;\n}\n\n.bk-fallback {\n  margin: 0;\n  padding: var(--dt-space-4);\n  border: 1px solid var(--dt-border-default);\n  border-radius: var(--dt-radius-lg);\n  background: var(--dt-bg-secondary);\n  color: var(--dt-text-secondary);\n  font-family: var(--dt-font-mono);\n  font-size: var(--dt-font-size-sm);\n  white-space: pre-wrap;\n}\n\n.bk-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
 /** Collect CSS for specific block types only. */
 declare function collectCss(blockTypes: string[]): string;
 /** Get all block CSS. */
@@ -225,6 +287,55 @@ declare function generateDarkTokenCss(): string;
 /** Generate CSS custom properties from the typed token map. */
 declare function generateTokenCss(colorScheme?: 'light' | 'dark' | 'auto'): string;
 //#endregion
+//#region packages/blocks-core/src/header.d.ts
+/**
+ * Shared header/footer module — single source of truth for all AI Kit templates.
+ * Used by: shell.ts (present tool), React viewers (via matching CSS classes), report template.
+ */
+interface HeaderOptions {
+  title: string;
+  subtitle?: string;
+  /** Brand text. Defaults to 'AI Kit' */
+  brand?: string;
+  /** Whether to include theme toggle button */
+  showThemeToggle?: boolean;
+  /** Transport type affects which toolbox items appear */
+  transport?: TransportType;
+  /** Additional action buttons HTML to inject */
+  actionsHtml?: string;
+}
+interface FooterOptions {
+  generatedAt?: string;
+  badge?: string;
+  contentHtml?: string;
+}
+declare const HEADER_CLASS_NAMES: {
+  readonly header: "aikit-header";
+  readonly brand: "aikit-header-brand";
+  readonly title: "aikit-header-title";
+  readonly titleText: "aikit-header-title-text";
+  readonly subtitle: "aikit-header-subtitle";
+  readonly actions: "aikit-header-actions";
+  readonly themeToggle: "aikit-theme-toggle";
+  readonly themeToggleIcon: "aikit-theme-toggle-icon";
+  readonly themeToggleIconSun: "aikit-theme-toggle-icon--sun";
+  readonly themeToggleIconMoon: "aikit-theme-toggle-icon--moon";
+  readonly toolbox: "aikit-toolbox";
+  readonly toolboxToggle: "aikit-toolbox-toggle";
+  readonly toolboxMenu: "aikit-toolbox-menu";
+  readonly toolboxItem: "aikit-toolbox-item";
+  readonly footer: "aikit-footer";
+  readonly footerMeta: "aikit-footer-meta";
+  readonly footerText: "aikit-footer-text";
+  readonly footerBrand: "aikit-footer-brand";
+  readonly footerTimestamp: "aikit-footer-timestamp";
+  readonly footerSlot: "aikit-footer-slot";
+  readonly footerBadge: "aikit-footer-badge";
+};
+declare function buildHeader(options: HeaderOptions): string;
+declare function buildFooter(options?: FooterOptions): string;
+declare const HEADER_CSS = "\n.aikit-header,\n.aikit-toolbox-menu,\n.aikit-footer {\n  --aikit-background: var(--background, var(--dt-bg-primary));\n  --aikit-foreground: var(--foreground, var(--dt-text-primary));\n  --aikit-muted: var(--muted, var(--dt-bg-secondary));\n  --aikit-muted-foreground: var(--muted-foreground, var(--dt-text-secondary));\n  --aikit-border: var(--border, var(--dt-border-default));\n  --aikit-accent: var(--accent, var(--dt-accent-subtle));\n  --aikit-accent-foreground: var(--accent-foreground, var(--dt-accent-fg));\n  --aikit-card: var(--card, var(--dt-bg-secondary));\n  --aikit-card-foreground: var(--card-foreground, var(--dt-text-primary));\n}\n\n.aikit-header {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dt-space-4);\n  min-height: 3.5rem;\n  padding: var(--dt-space-2) var(--dt-space-4);\n  border-bottom: 1px solid var(--aikit-border);\n  background: color-mix(in srgb, var(--aikit-background) 88%, transparent);\n  backdrop-filter: blur(8px);\n}\n\n.aikit-header-brand,\n.aikit-header-actions {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.aikit-header-brand {\n  display: flex;\n  align-items: center;\n  color: var(--aikit-muted-foreground);\n  font-family: var(--dt-font-mono);\n  font-size: var(--dt-font-size-sm);\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.aikit-header-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: var(--dt-space-2);\n  justify-content: flex-start;\n  min-height: 0;\n}\n\n.aikit-header-title-text {\n  min-width: 0;\n  flex: 1 1 auto;\n  color: var(--aikit-foreground);\n  font-size: var(--dt-font-size-lg);\n  font-weight: 600;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aikit-header-subtitle {\n  flex: 0 1 auto;\n  min-width: 0;\n  color: var(--aikit-muted-foreground);\n  font-size: var(--dt-font-size-sm);\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.aikit-header-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dt-space-2);\n  min-width: max-content;\n}\n\n.aikit-header-actions > * {\n  flex: 0 0 auto;\n}\n\n.aikit-toolbox {\n  position: relative;\n}\n\n.aikit-theme-toggle,\n.aikit-toolbox-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n  border: 1px solid var(--aikit-border);\n  border-radius: 999px;\n  background: var(--aikit-card);\n  color: var(--aikit-card-foreground);\n  cursor: pointer;\n  font: inherit;\n  transition:\n    background var(--dt-transition-fast),\n    border-color var(--dt-transition-fast),\n    color var(--dt-transition-fast),\n    transform var(--dt-transition-fast);\n}\n\n.aikit-theme-toggle:hover,\n.aikit-toolbox-toggle:hover {\n  background: var(--aikit-muted);\n}\n\n.aikit-theme-toggle:focus-visible,\n.aikit-toolbox-toggle:focus-visible,\n.aikit-toolbox-item:focus-visible {\n  outline: 2px solid var(--aikit-accent-foreground);\n  outline-offset: 2px;\n}\n\n.aikit-theme-toggle-icon {\n  position: absolute;\n  inset: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    opacity var(--dt-transition-normal),\n    transform var(--dt-transition-normal);\n}\n\n.aikit-theme-toggle-icon--sun {\n  opacity: 1;\n  transform: scale(1) rotate(0deg);\n}\n\n.aikit-theme-toggle-icon--moon {\n  opacity: 0;\n  transform: scale(0.65) rotate(-40deg);\n}\n\nhtml[data-theme='dark'] .aikit-theme-toggle-icon--sun {\n  opacity: 0;\n  transform: scale(0.65) rotate(40deg);\n}\n\nhtml[data-theme='dark'] .aikit-theme-toggle-icon--moon {\n  opacity: 1;\n  transform: scale(1) rotate(0deg);\n}\n\n.aikit-toolbox-menu {\n  position: absolute;\n  top: calc(100% + var(--dt-space-2));\n  right: 0;\n  min-width: 11rem;\n  display: grid;\n  gap: var(--dt-space-1);\n  padding: var(--dt-space-2);\n  border: 1px solid var(--aikit-border);\n  border-radius: var(--dt-radius-lg);\n  background: var(--aikit-background);\n  box-shadow: var(--dt-shadow-lg);\n  z-index: 120;\n}\n\n.aikit-toolbox-menu[hidden] {\n  display: none;\n}\n\n.aikit-toolbox-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dt-space-2);\n  width: 100%;\n  min-height: 2.5rem;\n  padding: 0 var(--dt-space-3);\n  border: 1px solid transparent;\n  border-radius: var(--dt-radius-sm);\n  background: transparent;\n  color: var(--aikit-foreground);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n}\n\n.aikit-toolbox-item:hover {\n  background: var(--aikit-muted);\n  border-color: var(--aikit-border);\n}\n\n.aikit-toolbox-item svg {\n  flex: 0 0 auto;\n}\n\n.aikit-footer {\n  margin-top: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-4) var(--dt-space-4) var(--dt-space-6);\n  border-top: 1px solid var(--aikit-border);\n  color: var(--aikit-muted-foreground);\n  font-size: var(--dt-font-size-xs);\n}\n\n.aikit-footer-meta {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dt-space-2);\n  flex-wrap: wrap;\n  text-align: center;\n}\n\n.aikit-footer-text {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.35rem;\n  min-width: 0;\n}\n\n.aikit-footer-brand {\n  color: var(--aikit-foreground);\n  font-family: var(--dt-font-mono);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.aikit-footer-timestamp,\n.aikit-footer-slot {\n  min-width: 0;\n}\n\n.aikit-footer-slot {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n}\n\n@supports not (background: color-mix(in srgb, white 50%, transparent)) {\n  .aikit-header {\n    background: var(--aikit-background);\n  }\n}\n\n@media (max-width: 640px) {\n  .aikit-header-brand {\n    display: none;\n  }\n\n  .aikit-header {\n    gap: var(--dt-space-2);\n    padding-left: var(--dt-space-3);\n    padding-right: var(--dt-space-3);\n  }\n\n  .aikit-toolbox-menu {\n    right: 0;\n    left: auto;\n    min-width: auto;\n    max-width: calc(100vw - 2rem);\n  }\n}\n\n@media (max-width: 400px) {\n  .aikit-header-actions {\n    gap: var(--dt-space-1);\n  }\n\n  .aikit-footer {\n    padding-left: var(--dt-space-3);\n    padding-right: var(--dt-space-3);\n  }\n\n  .aikit-toolbox-menu {\n    position: fixed;\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    min-width: auto;\n    max-width: 100%;\n    border-radius: 0.5rem 0.5rem 0 0;\n    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);\n  }\n}\n";
+//#endregion
 //#region packages/blocks-core/src/island-descriptor.d.ts
 /** Describes a hydration island for blocks-interactive. */
 interface IslandDescriptor {
@@ -481,4 +592,4 @@ declare function blockItems(block: {
   value?: unknown;
 }): Array<Record<string, unknown>>;
 //#endregion
-export { type ActionItem, type ActionOption, type BlockRenderContext, type BlockRenderer, type BlockType, type CardItem, type ChannelError, type ChannelOutcome, type ChannelSurface, type ChecklistItem, type ComparisonColumn, type DocFile, type HeadScript, type IslandDescriptor, type KnownIslandId, type LayoutOptions, type MetricItem, type ProgressItem, type RenderContext, type RenderDiagnostic, type RenderManifest, type RenderSurfaceOptions, type ResponsePolicy, type ShellOptions, type StatusCategory, type SurfaceAction, type SurfaceActionResult, type SurfaceMetadata, type TemplateDefinition, TemplateRegistry, type TimelineItem, type TokenName, type TokenValue, type TransportType, type TypedBlock, allCss, baseCss, blockItems, buildShell, checklistTemplate, collectCss, darkTokenNames, darkTokens, dashboardTemplateDefinition, dataTableTemplate, defaultRegistry, diffViewTemplate, documentTemplate, errorTemplate, escapeHtml, flameGraphTemplateDefinition, formTemplate, formatValue, generateDarkTokenCss, generateTokenCss, inlineMarkdown, isError, isResult, kanbanTemplateDefinition, listSortTemplateDefinition, pickerTemplate, renderBlock, renderBlocks, renderSurface, reportTemplate, sanitizeId, sanitizeUrl, statusBoardTemplate, timelineTemplate, tokenNames, tokens, toneName, toneVar, treeTemplate, tryParseJson };
+export { type ActionItem, type ActionOption, type BlockRenderContext, type BlockRenderer, type BlockType, type CardItem, type ChannelError, type ChannelOutcome, type ChannelSurface, type ChecklistItem, type ComparisonColumn, type ComponentDependency, type ComponentDetailValue, type ComponentInterface, type DataTableSchemaField, type DataTableSchemaIndex, type DataTableSchemaValue, type DocFile, type DocsHubPage, type FooterOptions, HEADER_CLASS_NAMES, HEADER_CSS, type HeadScript, type HeaderOptions, type IslandDescriptor, type KnownIslandId, type LayoutOptions, type LifecycleFlowEdge, type LifecycleFlowStep, type MetricItem, type ProgressItem, type RenderContext, type RenderDiagnostic, type RenderManifest, type RenderSurfaceOptions, type ResponsePolicy, type ShellOptions, type StatusCategory, type SurfaceAction, type SurfaceActionResult, type SurfaceMetadata, type TemplateDefinition, TemplateRegistry, type TimelineItem, type TokenName, type TokenValue, type TransportType, type TypedBlock, allCss, baseCss, blockItems, buildFooter, buildHeader, buildShell, checklistTemplate, collectCss, darkTokenNames, darkTokens, dashboardTemplateDefinition, dataTableTemplate, defaultRegistry, diffViewTemplate, documentTemplate, errorTemplate, escapeHtml, flameGraphTemplateDefinition, formTemplate, formatValue, generateDarkTokenCss, generateTokenCss, inlineMarkdown, isError, isResult, kanbanTemplateDefinition, listSortTemplateDefinition, pickerTemplate, renderBlock, renderBlocks, renderSurface, reportTemplate, sanitizeId, sanitizeUrl, statusBoardTemplate, timelineTemplate, tokenNames, tokens, toneName, toneVar, treeTemplate, tryParseJson };