@alepha/ui 0.16.1 → 0.17.0

package/dist/json/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/json/components/JsonViewer.tsx","../../src/json/extensions/DialogService.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Group,\n  getTreeExpandedState,\n  type MantineSize,\n  Text,\n  Tree,\n  useTree,\n} from \"@mantine/core\";\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronRight,\n  IconCopy,\n} from \"@tabler/icons-react\";\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\ninterface JsonViewerProps {\n  data: any;\n  /**\n   * Depth level to expand by default (0 = collapsed, Infinity = all expanded)\n   */\n  defaultExpandedDepth?: number;\n  /**\n   * Maximum nesting depth to render\n   */\n  maxDepth?: number;\n  /**\n   * Size variant\n   */\n  size?: MantineSize;\n  /**\n   * Whether to show quotes around keys and strings\n   */\n  showQuotes?: boolean;\n  /**\n   * Show copy button on row hover\n   */\n  showCopyButton?: boolean;\n  /**\n   * Custom value formatter. Return formatted string or undefined to use default.\n   */\n  formatValue?: (\n    key: string | undefined,\n    value: any,\n    path: string[],\n  ) => string | number | undefined;\n}\n\ninterface JsonTreeNode {\n  value: string;\n  label: string;\n  children?: JsonTreeNode[];\n  // Custom properties\n  nodeValue: any;\n  nodeKey: string | undefined;\n  path: string[];\n  isArrayItem: boolean;\n  isRoot?: boolean;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst SIZE_CONFIG: Record<MantineSize, { icon: number; levelOffset: number }> =\n  {\n    xs: { icon: 14, levelOffset: 16 },\n    sm: { icon: 16, levelOffset: 20 },\n    md: { icon: 18, levelOffset: 24 },\n    lg: { icon: 20, levelOffset: 28 },\n    xl: { icon: 22, levelOffset: 32 },\n  };\n\nconst STYLES = {\n  root: {\n    fontFamily: \"var(--mantine-font-family-monospace)\",\n  } satisfies CSSProperties,\n  chevron: {\n    flexShrink: 0,\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  key: {\n    color: \"var(--mantine-color-cyan-text)\",\n    fontWeight: 500,\n  } satisfies CSSProperties,\n  colon: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  string: {\n    color: \"var(--mantine-color-teal-text)\",\n  } satisfies CSSProperties,\n  number: {\n    color: \"var(--mantine-color-blue-text)\",\n  } satisfies CSSProperties,\n  boolean: {\n    color: \"var(--mantine-color-violet-text)\",\n  } satisfies CSSProperties,\n  null: {\n    color: \"var(--mantine-color-dimmed)\",\n    fontStyle: \"italic\",\n  } satisfies CSSProperties,\n  preview: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n};\n\n// =============================================================================\n// HELPERS\n// =============================================================================\n\nconst getValueType = (val: any): string => {\n  if (val === null) return \"null\";\n  if (val === undefined) return \"undefined\";\n  if (Array.isArray(val)) return \"array\";\n  return typeof val;\n};\n\n// Convert JSON to tree data structure\nfunction buildTreeNodes(\n  data: any,\n  path: string[] = [],\n  key?: string,\n  isArrayItem = false,\n  maxDepth = 10,\n): JsonTreeNode | null {\n  const currentPath = key !== undefined ? [...path, key] : path;\n  const nodeId = currentPath.length > 0 ? currentPath.join(\".\") : \"root\";\n\n  if (currentPath.length > maxDepth) {\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n    };\n  }\n\n  const type = getValueType(data);\n\n  if (type === \"object\" || type === \"array\") {\n    const entries =\n      type === \"array\"\n        ? (data as any[]).map((v, i) => [String(i), v] as const)\n        : Object.entries(data);\n\n    const children = entries\n      .map(([k, v]) =>\n        buildTreeNodes(v, currentPath, k, type === \"array\", maxDepth),\n      )\n      .filter((n): n is JsonTreeNode => n !== null);\n\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n      children: children.length > 0 ? children : undefined,\n    };\n  }\n\n  return {\n    value: nodeId,\n    label: key ?? \"\",\n    nodeValue: data,\n    nodeKey: key,\n    path: currentPath,\n    isArrayItem,\n  };\n}\n\n// Get all expandable node IDs up to a certain depth\nfunction getExpandedIds(\n  nodes: JsonTreeNode[],\n  targetDepth: number,\n  currentDepth = 0,\n): string[] {\n  if (currentDepth >= targetDepth) return [];\n  const ids: string[] = [];\n  for (const node of nodes) {\n    if (node.children) {\n      ids.push(node.value);\n      ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));\n    }\n  }\n  return ids;\n}\n\n// =============================================================================\n// COPY BUTTON COMPONENT\n// =============================================================================\n\nconst CopyButton = ({\n  value,\n  iconSize,\n}: {\n  value: string;\n  iconSize: number;\n}) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigator.clipboard.writeText(value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    },\n    [value],\n  );\n\n  return (\n    <ActionIcon\n      size={iconSize + 4}\n      variant=\"transparent\"\n      c={copied ? \"green\" : \"dimmed\"}\n      onClick={handleCopy}\n      className=\"alepha-json-viewer-copy\"\n    >\n      {copied ? <IconCheck size={iconSize} /> : <IconCopy size={iconSize} />}\n    </ActionIcon>\n  );\n};\n\n// =============================================================================\n// ROW NODE COMPONENT\n// =============================================================================\n\ninterface RowNodeProps {\n  node: JsonTreeNode;\n  expanded: boolean;\n  hasChildren: boolean;\n  elementProps: any;\n  size: MantineSize;\n  config: { icon: number; levelOffset: number };\n  showQuotes: boolean;\n  showCopyButton: boolean;\n  renderValue: (val: any, key: string | undefined, path: string[]) => ReactNode;\n}\n\nconst RowNode = ({\n  node,\n  expanded,\n  hasChildren,\n  elementProps,\n  size,\n  config,\n  showQuotes,\n  showCopyButton,\n  renderValue,\n}: RowNodeProps) => {\n  const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;\n  const type = getValueType(nodeValue);\n  const isExpandable = type === \"object\" || type === \"array\";\n\n  const getPreview = () => {\n    if (!isExpandable) return null;\n    const entries = type === \"array\" ? nodeValue : Object.keys(nodeValue);\n    const count = entries.length;\n    const label = type === \"array\" ? \"item\" : \"key\";\n\n    // For root node or collapsed nodes, show the count\n    if (!expanded) {\n      return (\n        <Text fs={\"italic\"} component=\"span\" size={size} style={STYLES.preview}>\n          {count === 0\n            ? type === \"array\"\n              ? \"[]\"\n              : \"{}\"\n            : type === \"array\"\n              ? `[ ${count} ${count === 1 ? label : `${label}s`} ]`\n              : `{ ${count} ${count === 1 ? label : `${label}s`} }`}\n        </Text>\n      );\n    }\n\n    return null;\n  };\n\n  const getCopyValue = () =>\n    isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? \"\");\n\n  return (\n    <Group\n      gap={6}\n      wrap=\"nowrap\"\n      {...elementProps}\n      className={`alepha-json-viewer-row ${elementProps.className || \"\"}`}\n    >\n      {hasChildren ? (\n        expanded ? (\n          <IconChevronDown size={config.icon} style={STYLES.chevron} />\n        ) : (\n          <IconChevronRight size={config.icon} style={STYLES.chevron} />\n        )\n      ) : (\n        <span style={{ width: config.icon, flexShrink: 0 }} />\n      )}\n\n      {nodeKey !== undefined && !isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>\n            {showQuotes ? `\"${nodeKey}\"` : nodeKey}\n          </span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {nodeKey !== undefined && isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>{nodeKey}</span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {hasChildren ? (\n        getPreview()\n      ) : isExpandable ? (\n        type === \"array\" ? (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            []\n          </Text>\n        ) : (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            {\"{}\"}\n          </Text>\n        )\n      ) : (\n        renderValue(nodeValue, nodeKey, path)\n      )}\n\n      {showCopyButton && (\n        <CopyButton value={getCopyValue()} iconSize={config.icon} />\n      )}\n    </Group>\n  );\n};\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const JsonViewer = ({\n  data,\n  defaultExpandedDepth = 2,\n  maxDepth = 10,\n  size = \"sm\",\n  showQuotes = false,\n  showCopyButton = true,\n  formatValue,\n}: JsonViewerProps) => {\n  const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;\n\n  // Build tree data from JSON with root wrapper\n  const treeData = useMemo(() => {\n    const type = getValueType(data);\n\n    // For objects and arrays, create a root node wrapper\n    if (type === \"object\" || type === \"array\") {\n      const entries =\n        type === \"array\"\n          ? (data as any[]).map((v, i) => [String(i), v] as const)\n          : Object.entries(data);\n      const children = entries\n        .map(([k, v]) => buildTreeNodes(v, [], k, type === \"array\", maxDepth))\n        .filter((n): n is JsonTreeNode => n !== null);\n\n      const rootNode: JsonTreeNode = {\n        value: \"root\",\n        label: \"\",\n        nodeValue: data,\n        nodeKey: undefined,\n        path: [],\n        isArrayItem: false,\n        isRoot: true,\n        children: children.length > 0 ? children : undefined,\n      };\n      return [rootNode];\n    }\n\n    // For primitives, just show the value directly\n    const node = buildTreeNodes(data, [], undefined, false, maxDepth);\n    return node ? [node] : [];\n  }, [data, maxDepth]);\n\n  // Compute initial expanded state (root is always expanded by default unless depth is 0)\n  const initialExpandedState = useMemo(() => {\n    if (defaultExpandedDepth === 0) return {};\n    if (defaultExpandedDepth === Infinity) {\n      return getTreeExpandedState(treeData, \"*\");\n    }\n    // Add 1 to depth to account for root node\n    const ids = getExpandedIds(treeData, defaultExpandedDepth + 1);\n    return getTreeExpandedState(treeData, ids);\n  }, [treeData, defaultExpandedDepth]);\n\n  const tree = useTree({ initialExpandedState });\n\n  // Render value based on type\n  const renderValue = useCallback(\n    (val: any, key: string | undefined, path: string[]): ReactNode => {\n      const custom = formatValue?.(key, val, path);\n      if (custom !== undefined) {\n        return (\n          <Text\n            component=\"span\"\n            size={size}\n            style={STYLES.string}\n            className=\"alepha-json-viewer-value\"\n            title={String(val)}\n          >\n            {custom}\n          </Text>\n        );\n      }\n\n      const type = getValueType(val);\n      switch (type) {\n        case \"string\": {\n          return (\n            <Text\n              style={STYLES.string}\n              component=\"span\"\n              size={size}\n              className=\"alepha-json-viewer-value\"\n              title={val}\n            >\n              \"{val}\"\n            </Text>\n          );\n        }\n        case \"number\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.number}>\n              {val}\n            </Text>\n          );\n        case \"boolean\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.boolean}>\n              {String(val)}\n            </Text>\n          );\n        case \"null\":\n        case \"undefined\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.null}>\n              {type}\n            </Text>\n          );\n        default:\n          return (\n            <Text component=\"span\" size={size}>\n              {String(val)}\n            </Text>\n          );\n      }\n    },\n    [formatValue, showQuotes, size],\n  );\n\n  // Render tree node\n  const renderNode = useCallback(\n    ({\n      node,\n      expanded,\n      hasChildren,\n      elementProps,\n    }: {\n      node: JsonTreeNode;\n      expanded: boolean;\n      hasChildren: boolean;\n      elementProps: any;\n    }): ReactNode => {\n      return (\n        <RowNode\n          node={node}\n          expanded={expanded}\n          hasChildren={hasChildren}\n          elementProps={elementProps}\n          size={size}\n          config={config}\n          showQuotes={showQuotes}\n          showCopyButton={showCopyButton}\n          renderValue={renderValue}\n        />\n      );\n    },\n    [config, renderValue, showCopyButton, showQuotes, size],\n  );\n\n  if (treeData.length === 0) {\n    return (\n      <Text size={size} style={STYLES.null}>\n        {data === null ? \"null\" : data === undefined ? \"undefined\" : \"{}\"}\n      </Text>\n    );\n  }\n\n  return (\n    <Tree\n      data={treeData}\n      tree={tree}\n      levelOffset={config.levelOffset}\n      expandOnClick\n      renderNode={renderNode as any}\n      styles={{ root: STYLES.root }}\n    />\n  );\n};\n\nexport default JsonViewer;\n","import { type BaseDialogOptions, DialogService, ui } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { JsonViewer } from \"../components/JsonViewer.tsx\";\n\ndeclare module \"@alepha/ui\" {\n  interface DialogService {\n    /**\n     * Opens a JSON viewer dialog.\n     *\n     * @param data - The JSON data to display.\n     * @param options - Additional dialog options.\n     */\n    json(data?: any, options?: BaseDialogOptions): void;\n  }\n}\n\nDialogService.prototype.json = function (\n  data?: any,\n  options?: BaseDialogOptions,\n) {\n  this.open({\n    size: \"lg\",\n    title: options?.title || \"Json Viewer\",\n    ...options,\n    content: (\n      <Flex bdrs={\"md\"} w={\"100%\"} flex={1} p={\"sm\"} bg={ui.colors.surface}>\n        <JsonViewer size={\"xs\"} data={data} />\n      </Flex>\n    ),\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/json/components/JsonViewer.tsx","../../src/json/extensions/DialogService.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Flex,\n  getTreeExpandedState,\n  type MantineSize,\n  Text,\n  Tree,\n  useTree,\n} from \"@mantine/core\";\nimport {\n  IconCheck,\n  IconChevronDown,\n  IconChevronRight,\n  IconCopy,\n} from \"@tabler/icons-react\";\nimport {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\ninterface JsonViewerProps {\n  data: any;\n  /**\n   * Depth level to expand by default (0 = collapsed, Infinity = all expanded)\n   */\n  defaultExpandedDepth?: number;\n  /**\n   * Maximum nesting depth to render\n   */\n  maxDepth?: number;\n  /**\n   * Size variant\n   */\n  size?: MantineSize;\n  /**\n   * Whether to show quotes around keys and strings\n   */\n  showQuotes?: boolean;\n  /**\n   * Show copy button on row hover\n   */\n  showCopyButton?: boolean;\n  /**\n   * Custom value formatter. Return formatted string or undefined to use default.\n   */\n  formatValue?: (\n    key: string | undefined,\n    value: any,\n    path: string[],\n  ) => string | number | undefined;\n}\n\ninterface JsonTreeNode {\n  value: string;\n  label: string;\n  children?: JsonTreeNode[];\n  // Custom properties\n  nodeValue: any;\n  nodeKey: string | undefined;\n  path: string[];\n  isArrayItem: boolean;\n  isRoot?: boolean;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst SIZE_CONFIG: Record<MantineSize, { icon: number; levelOffset: number }> =\n  {\n    xs: { icon: 14, levelOffset: 16 },\n    sm: { icon: 16, levelOffset: 20 },\n    md: { icon: 18, levelOffset: 24 },\n    lg: { icon: 20, levelOffset: 28 },\n    xl: { icon: 22, levelOffset: 32 },\n  };\n\nconst STYLES = {\n  root: {\n    fontFamily: \"var(--mantine-font-family-monospace)\",\n  } satisfies CSSProperties,\n  chevron: {\n    flexShrink: 0,\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  key: {\n    color: \"var(--mantine-color-cyan-text)\",\n    fontWeight: 500,\n  } satisfies CSSProperties,\n  colon: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n  string: {\n    color: \"var(--mantine-color-teal-text)\",\n  } satisfies CSSProperties,\n  number: {\n    color: \"var(--mantine-color-blue-text)\",\n  } satisfies CSSProperties,\n  boolean: {\n    color: \"var(--mantine-color-violet-text)\",\n  } satisfies CSSProperties,\n  null: {\n    color: \"var(--mantine-color-dimmed)\",\n    fontStyle: \"italic\",\n  } satisfies CSSProperties,\n  preview: {\n    color: \"var(--mantine-color-dimmed)\",\n  } satisfies CSSProperties,\n};\n\n// =============================================================================\n// HELPERS\n// =============================================================================\n\nconst getValueType = (val: any): string => {\n  if (val === null) return \"null\";\n  if (val === undefined) return \"undefined\";\n  if (Array.isArray(val)) return \"array\";\n  return typeof val;\n};\n\n// Convert JSON to tree data structure\nfunction buildTreeNodes(\n  data: any,\n  path: string[] = [],\n  key?: string,\n  isArrayItem = false,\n  maxDepth = 10,\n): JsonTreeNode | null {\n  const currentPath = key !== undefined ? [...path, key] : path;\n  const nodeId = currentPath.length > 0 ? currentPath.join(\".\") : \"root\";\n\n  if (currentPath.length > maxDepth) {\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n    };\n  }\n\n  const type = getValueType(data);\n\n  if (type === \"object\" || type === \"array\") {\n    const entries =\n      type === \"array\"\n        ? (data as any[]).map((v, i) => [String(i), v] as const)\n        : Object.entries(data);\n\n    const children = entries\n      .map(([k, v]) =>\n        buildTreeNodes(v, currentPath, k, type === \"array\", maxDepth),\n      )\n      .filter((n): n is JsonTreeNode => n !== null);\n\n    return {\n      value: nodeId,\n      label: key ?? \"\",\n      nodeValue: data,\n      nodeKey: key,\n      path: currentPath,\n      isArrayItem,\n      children: children.length > 0 ? children : undefined,\n    };\n  }\n\n  return {\n    value: nodeId,\n    label: key ?? \"\",\n    nodeValue: data,\n    nodeKey: key,\n    path: currentPath,\n    isArrayItem,\n  };\n}\n\n// Get all expandable node IDs up to a certain depth\nfunction getExpandedIds(\n  nodes: JsonTreeNode[],\n  targetDepth: number,\n  currentDepth = 0,\n): string[] {\n  if (currentDepth >= targetDepth) return [];\n  const ids: string[] = [];\n  for (const node of nodes) {\n    if (node.children) {\n      ids.push(node.value);\n      ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));\n    }\n  }\n  return ids;\n}\n\n// =============================================================================\n// COPY BUTTON COMPONENT\n// =============================================================================\n\nconst CopyButton = ({\n  value,\n  iconSize,\n}: {\n  value: string;\n  iconSize: number;\n}) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      navigator.clipboard.writeText(value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    },\n    [value],\n  );\n\n  return (\n    <ActionIcon\n      size={iconSize + 4}\n      variant=\"transparent\"\n      c={copied ? \"green\" : \"dimmed\"}\n      onClick={handleCopy}\n      className=\"alepha-json-viewer-copy\"\n    >\n      {copied ? <IconCheck size={iconSize} /> : <IconCopy size={iconSize} />}\n    </ActionIcon>\n  );\n};\n\n// =============================================================================\n// ROW NODE COMPONENT\n// =============================================================================\n\ninterface RowNodeProps {\n  node: JsonTreeNode;\n  expanded: boolean;\n  hasChildren: boolean;\n  elementProps: any;\n  size: MantineSize;\n  config: { icon: number; levelOffset: number };\n  showQuotes: boolean;\n  showCopyButton: boolean;\n  renderValue: (val: any, key: string | undefined, path: string[]) => ReactNode;\n}\n\nconst RowNode = ({\n  node,\n  expanded,\n  hasChildren,\n  elementProps,\n  size,\n  config,\n  showQuotes,\n  showCopyButton,\n  renderValue,\n}: RowNodeProps) => {\n  const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;\n  const type = getValueType(nodeValue);\n  const isExpandable = type === \"object\" || type === \"array\";\n\n  const getPreview = () => {\n    if (!isExpandable) return null;\n    const entries = type === \"array\" ? nodeValue : Object.keys(nodeValue);\n    const count = entries.length;\n    const label = type === \"array\" ? \"item\" : \"key\";\n\n    // For root node or collapsed nodes, show the count\n    if (!expanded) {\n      return (\n        <Text fs={\"italic\"} component=\"span\" size={size} style={STYLES.preview}>\n          {count === 0\n            ? type === \"array\"\n              ? \"[]\"\n              : \"{}\"\n            : type === \"array\"\n              ? `[ ${count} ${count === 1 ? label : `${label}s`} ]`\n              : `{ ${count} ${count === 1 ? label : `${label}s`} }`}\n        </Text>\n      );\n    }\n\n    return null;\n  };\n\n  const getCopyValue = () =>\n    isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? \"\");\n\n  return (\n    <Flex\n      gap={6}\n      wrap=\"nowrap\"\n      {...elementProps}\n      className={`alepha-json-viewer-row ${elementProps.className || \"\"}`}\n    >\n      {hasChildren ? (\n        expanded ? (\n          <IconChevronDown size={config.icon} style={STYLES.chevron} />\n        ) : (\n          <IconChevronRight size={config.icon} style={STYLES.chevron} />\n        )\n      ) : (\n        <span style={{ width: config.icon, flexShrink: 0 }} />\n      )}\n\n      {nodeKey !== undefined && !isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>\n            {showQuotes ? `\"${nodeKey}\"` : nodeKey}\n          </span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {nodeKey !== undefined && isArrayItem && (\n        <Text component=\"span\" size={size}>\n          <span style={STYLES.key}>{nodeKey}</span>\n          <span style={STYLES.colon}>:</span>\n        </Text>\n      )}\n\n      {hasChildren ? (\n        getPreview()\n      ) : isExpandable ? (\n        type === \"array\" ? (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            []\n          </Text>\n        ) : (\n          <Text component=\"span\" size={size} style={STYLES.preview}>\n            {\"{}\"}\n          </Text>\n        )\n      ) : (\n        renderValue(nodeValue, nodeKey, path)\n      )}\n\n      {showCopyButton && (\n        <CopyButton value={getCopyValue()} iconSize={config.icon} />\n      )}\n    </Flex>\n  );\n};\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const JsonViewer = ({\n  data,\n  defaultExpandedDepth = 2,\n  maxDepth = 10,\n  size = \"sm\",\n  showQuotes = false,\n  showCopyButton = true,\n  formatValue,\n}: JsonViewerProps) => {\n  const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;\n\n  // Build tree data from JSON with root wrapper\n  const treeData = useMemo(() => {\n    const type = getValueType(data);\n\n    // For objects and arrays, create a root node wrapper\n    if (type === \"object\" || type === \"array\") {\n      const entries =\n        type === \"array\"\n          ? (data as any[]).map((v, i) => [String(i), v] as const)\n          : Object.entries(data);\n      const children = entries\n        .map(([k, v]) => buildTreeNodes(v, [], k, type === \"array\", maxDepth))\n        .filter((n): n is JsonTreeNode => n !== null);\n\n      const rootNode: JsonTreeNode = {\n        value: \"root\",\n        label: \"\",\n        nodeValue: data,\n        nodeKey: undefined,\n        path: [],\n        isArrayItem: false,\n        isRoot: true,\n        children: children.length > 0 ? children : undefined,\n      };\n      return [rootNode];\n    }\n\n    // For primitives, just show the value directly\n    const node = buildTreeNodes(data, [], undefined, false, maxDepth);\n    return node ? [node] : [];\n  }, [data, maxDepth]);\n\n  // Compute initial expanded state (root is always expanded by default unless depth is 0)\n  const initialExpandedState = useMemo(() => {\n    if (defaultExpandedDepth === 0) return {};\n    if (defaultExpandedDepth === Infinity) {\n      return getTreeExpandedState(treeData, \"*\");\n    }\n    // Add 1 to depth to account for root node\n    const ids = getExpandedIds(treeData, defaultExpandedDepth + 1);\n    return getTreeExpandedState(treeData, ids);\n  }, [treeData, defaultExpandedDepth]);\n\n  const tree = useTree({ initialExpandedState });\n\n  // Render value based on type\n  const renderValue = useCallback(\n    (val: any, key: string | undefined, path: string[]): ReactNode => {\n      const custom = formatValue?.(key, val, path);\n      if (custom !== undefined) {\n        return (\n          <Text\n            component=\"span\"\n            size={size}\n            style={STYLES.string}\n            className=\"alepha-json-viewer-value\"\n            title={String(val)}\n          >\n            {custom}\n          </Text>\n        );\n      }\n\n      const type = getValueType(val);\n      switch (type) {\n        case \"string\": {\n          return (\n            <Text\n              style={STYLES.string}\n              component=\"span\"\n              size={size}\n              className=\"alepha-json-viewer-value\"\n              title={val}\n            >\n              \"{val}\"\n            </Text>\n          );\n        }\n        case \"number\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.number}>\n              {val}\n            </Text>\n          );\n        case \"boolean\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.boolean}>\n              {String(val)}\n            </Text>\n          );\n        case \"null\":\n        case \"undefined\":\n          return (\n            <Text component=\"span\" size={size} style={STYLES.null}>\n              {type}\n            </Text>\n          );\n        default:\n          return (\n            <Text component=\"span\" size={size}>\n              {String(val)}\n            </Text>\n          );\n      }\n    },\n    [formatValue, showQuotes, size],\n  );\n\n  // Render tree node\n  const renderNode = useCallback(\n    ({\n      node,\n      expanded,\n      hasChildren,\n      elementProps,\n    }: {\n      node: JsonTreeNode;\n      expanded: boolean;\n      hasChildren: boolean;\n      elementProps: any;\n    }): ReactNode => {\n      return (\n        <RowNode\n          node={node}\n          expanded={expanded}\n          hasChildren={hasChildren}\n          elementProps={elementProps}\n          size={size}\n          config={config}\n          showQuotes={showQuotes}\n          showCopyButton={showCopyButton}\n          renderValue={renderValue}\n        />\n      );\n    },\n    [config, renderValue, showCopyButton, showQuotes, size],\n  );\n\n  if (treeData.length === 0) {\n    return (\n      <Text size={size} style={STYLES.null}>\n        {data === null ? \"null\" : data === undefined ? \"undefined\" : \"{}\"}\n      </Text>\n    );\n  }\n\n  return (\n    <Tree\n      data={treeData}\n      tree={tree}\n      levelOffset={config.levelOffset}\n      expandOnClick\n      renderNode={renderNode as any}\n      styles={{ root: STYLES.root }}\n    />\n  );\n};\n\nexport default JsonViewer;\n","import { type BaseDialogOptions, DialogService, ui } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { JsonViewer } from \"../components/JsonViewer.tsx\";\n\ndeclare module \"@alepha/ui\" {\n  interface DialogService {\n    /**\n     * Opens a JSON viewer dialog.\n     *\n     * @param data - The JSON data to display.\n     * @param options - Additional dialog options.\n     */\n    json(data?: any, options?: BaseDialogOptions): void;\n  }\n}\n\nDialogService.prototype.json = function (\n  data?: any,\n  options?: BaseDialogOptions,\n) {\n  this.open({\n    size: \"lg\",\n    title: options?.title || \"Json Viewer\",\n    ...options,\n    content: (\n      <Flex bdrs={\"md\"} w={\"100%\"} flex={1} p={\"sm\"} bg={ui.colors.surface}>\n        <JsonViewer size={\"xs\"} data={data} />\n      </Flex>\n    ),\n  });\n};\n"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,6 +22,7 @@
     "styles.css"
   ],
   "dependencies": {
+    "@mantine/charts": "^8.3.14",
     "@mantine/core": "^8.3.14",
     "@mantine/dates": "^8.3.14",
     "@mantine/hooks": "^8.3.14",
@@ -30,11 +31,16 @@
     "@mantine/nprogress": "^8.3.14",
     "@mantine/spotlight": "^8.3.14",
     "@tabler/icons-react": "^3.36.1",
-    "dayjs": "^1.11.19"
+    "dayjs": "^1.11.19",
+    "react-is": "^19.2.4",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.14",
-    "alepha": "0.16.1",
+    "@biomejs/biome": "^2.3.15",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react-is": "^19.2.0",
+    "alepha": "0.17.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
@@ -42,7 +48,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.16.1",
+    "alepha": "0.17.0",
     "react": "*",
     "react-dom": "*"
   },

package/src/admin/AdminRouter.ts

@@ -1,11 +1,13 @@
-import type { AdminShellProps, SidebarNode } from "@alepha/ui";
+import type { DashboardShellProps, SidebarNode } from "@alepha/ui";
 import { AuthRouter } from "@alepha/ui/auth";
 import {
   IconBell,
+  IconClock,
   IconDevices,
   IconFile,
   IconHistory,
   IconKey,
+  IconListDetails,
   IconPlus,
   IconSettings,
   IconTerminal2,
@@ -18,7 +20,7 @@ import type { FileController } from "alepha/api/files";
 import type { AdminJobController } from "alepha/api/jobs";
 import type { AdminApiKeyController } from "alepha/api/keys";
 import type { AdminNotificationController } from "alepha/api/notifications";
-import type { AdminConfigController } from "alepha/api/parameters";
+import type { AdminParameterController } from "alepha/api/parameters";
 import type {
   AdminSessionController,
   AdminUserController,
@@ -35,12 +37,12 @@ export class AdminRouter {
   protected readonly sessionCtrl = $client<AdminSessionController>();
   protected readonly notificationCtrl = $client<AdminNotificationController>();
   protected readonly fileCtrl = $client<FileController>();
-  protected readonly configCtrl = $client<AdminConfigController>();
+  protected readonly paramCtrl = $client<AdminParameterController>();
   protected readonly auditCtrl = $client<AdminAuditController>();
   protected readonly jobCtrl = $client<AdminJobController>();
   protected readonly apiKeyCtrl = $client<AdminApiKeyController>();
 
-  public configFn?: (adminRouter: AdminRouter) => AdminShellProps = () => {
+  public configFn?: (adminRouter: AdminRouter) => DashboardShellProps = () => {
     return {
       sidebarResizable: true,
       sidebarProps: {
@@ -51,10 +53,9 @@ export class AdminRouter {
 
   public getDefaultSidebarItems(): SidebarNode[] {
     return [
-      // Identity & Access
       {
+        type: "section",
         label: "Identity",
-        icon: IconUsers,
         children: [
           {
             ...this.router.node(this.adminUsers.name),
@@ -70,11 +71,9 @@ export class AdminRouter {
           },
         ],
       },
-
-      // Content & Storage
       {
-        label: "Content",
-        icon: IconFile,
+        type: "section",
+        label: "System",
         children: [
           {
             ...this.router.node(this.adminFiles.name),
@@ -84,17 +83,18 @@ export class AdminRouter {
             ...this.router.node(this.adminNotifications.name),
             can: () => this.notificationCtrl.findNotifications.can(),
           },
-        ],
-      },
-
-      // System
-      {
-        label: "System",
-        icon: IconSettings,
-        children: [
           {
-            ...this.router.node(this.adminJobs.name),
-            can: () => this.jobCtrl.getJobs.can(),
+            ...this.router.node(this.adminJobDashboard.name),
+            href: undefined,
+            can: () => this.jobCtrl.getRegistry.can(),
+            children: [
+              {
+                ...this.router.node(this.adminJobDashboard.name),
+                label: "Dashboard",
+              },
+              { ...this.router.node(this.adminJobRegistry.name) },
+              { ...this.router.node(this.adminJobExecutions.name) },
+            ],
           },
           {
             ...this.router.node(this.adminAudits.name),
@@ -102,17 +102,15 @@ export class AdminRouter {
           },
           {
             ...this.router.node(this.adminParameters.name),
-            can: () => this.configCtrl.getConfigTree.can(),
+            can: () => this.paramCtrl.getParameterTree.can(),
           },
         ],
       },
-
-      // Bottom
       { type: "toggle", position: "bottom" },
     ];
   }
 
-  protected adminShellProps(): AdminShellProps {
+  protected adminShellProps(): DashboardShellProps {
     if (this.configFn) {
       return this.configFn(this);
     }
@@ -276,23 +274,47 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/parameters",
     label: "Parameters",
-    description: "View and manage application configuration parameters.",
+    description: "View and manage application parameters.",
     lazy: () => import("./components/parameters/AdminParameters.tsx"),
-    can: () => this.configCtrl.getConfigTree.can(),
+    can: () => this.paramCtrl.getParameterTree.can(),
+    loader: async () => {
+      const treeData = await this.paramCtrl.getParameterTree({});
+      return { treeData };
+    },
   });
 
   // ─────────────────────────────────────────────────────────────────────────────
   // Jobs
   // ─────────────────────────────────────────────────────────────────────────────
 
-  public readonly adminJobs = $page({
+  public readonly adminJobDashboard = $page({
     icon: IconTerminal2,
     parent: this.adminLayout,
     path: "/jobs",
     label: "Jobs",
     description: "Monitor and manage background jobs and scheduled tasks.",
-    lazy: () => import("./components/jobs/AdminJobs.tsx"),
-    can: () => this.jobCtrl.getJobs.can(),
+    lazy: () => import("./components/jobs/AdminJobDashboard.tsx"),
+    can: () => this.jobCtrl.getRegistry.can(),
+  });
+
+  public readonly adminJobRegistry = $page({
+    icon: IconListDetails,
+    parent: this.adminLayout,
+    path: "/jobs/registry",
+    label: "Registry",
+    description: "View all registered job definitions.",
+    lazy: () => import("./components/jobs/AdminJobRegistry.tsx"),
+    can: () => this.jobCtrl.getRegistry.can(),
+  });
+
+  public readonly adminJobExecutions = $page({
+    icon: IconClock,
+    parent: this.adminLayout,
+    path: "/jobs/executions",
+    label: "Executions",
+    description: "Browse and filter job execution history.",
+    lazy: () => import("./components/jobs/AdminJobExecutions.tsx"),
+    can: () => this.jobCtrl.findExecutions.can(),
   });
 
   // ─────────────────────────────────────────────────────────────────────────────

package/src/admin/components/AdminLayout.tsx

@@ -1,21 +1,22 @@
 import {
   ActionButton,
-  AdminShell,
-  type AdminShellProps,
   AlephaMantineProvider,
-  OmnibarButton,
+  DashboardShell,
+  type DashboardShellProps,
 } from "@alepha/ui";
 import { UserButton } from "@alepha/ui/auth";
+import { Flex } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 
 export interface AdminLayoutProps {
-  adminShellProps?: AdminShellProps;
+  adminShellProps?: DashboardShellProps;
 }
 
 const AdminLayout = (props: AdminLayoutProps) => {
   return (
     <AlephaMantineProvider>
-      <AdminShell
+      <DashboardShell
+        footer={<Flex h={24} />}
         appBarProps={{
           items: [
             {
@@ -28,10 +29,6 @@ const AdminLayout = (props: AdminLayoutProps) => {
               ),
               position: "left",
             },
-            {
-              element: <OmnibarButton />,
-              position: "center",
-            },
             {
               element: <UserButton />,
               position: "right",

package/src/admin/components/audits/AdminAudits.tsx

@@ -1,5 +1,5 @@
 import { DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group, Stack, Tooltip } from "@mantine/core";
+import { Badge, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCheck,
@@ -155,20 +155,20 @@ const AdminAudits = (props: AdminAuditsProps) => {
               item.userId ? (
                 <Tooltip
                   label={
-                    <Stack gap={2}>
+                    <Flex direction="column" gap={2}>
                       <Text size="xs">{item.userEmail || "No email"}</Text>
                       <Text size="xs" c="dimmed">
                         {item.userRealm || "default"}
                       </Text>
-                    </Stack>
+                    </Flex>
                   }
                 >
-                  <Group gap={4}>
+                  <Flex gap={4}>
                     <IconUser size={12} />
                     <Text size="xs" lineClamp={1} maw={100}>
                       {item.userEmail?.split("@")[0] || item.userId.slice(0, 8)}
                     </Text>
-                  </Group>
+                  </Flex>
                 </Tooltip>
               ) : (
                 <Text size="xs" c="dimmed">