@hachej/boring-ui-kit 0.3.2 → 0.4.0

package/r/file-tree.json

@@ -2,21 +2,29 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "file-tree",
   "title": "File tree",
-  "description": "Browse, search, upload and inspect retained versions through one revisionProvider binding.",
+  "description": "Browse, search, upload and inspect retained versions through one revisionProvider binding. Uses the consumer's shadcn Button and dropdown-menu with shared version-history rows; Base UI style only.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.3.2",
-    "@hachej/boring-files@^0.3.2",
+    "@hachej/boring-ui-kit@^0.4.0",
+    "@hachej/boring-files@^0.4.0",
     "react@^19.0.0",
-    "radix-ui@^1.8.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.3.2/r/theme.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.0/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.0/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.0/r/version-history.json",
+    "button",
+    "dropdown-menu",
+    "collapsible",
+    "empty",
+    "input",
+    "separator",
+    "sidebar"
   ],
   "files": [
     {
       "path": "registry/file-tree/file-tree.tsx",
-      "content": "'use client';\n\nimport '@hachej/boring-ui-kit/file-tree.css';\n\nexport { FileTree, FileTreeView } from '@hachej/boring-ui-kit/file-tree-view';\nexport type { FileTreeProps, FileTreeViewProps } from '@hachej/boring-ui-kit/file-tree-view';\nexport { createFileTreeController } from '@hachej/boring-ui-kit/file-tree';\nexport type { FileTreeController } from '@hachej/boring-ui-kit/file-tree';\n",
+      "content": "'use client';\n\nimport '@hachej/boring-ui-kit/file-tree.css';\nimport { FileTree as PackageFileTree, FileTreeView as PackageFileTreeView } from '@hachej/boring-ui-kit/file-tree-view';\nimport type { FileTreeComponents, FileTreeActionsProps, FileTreeButtonProps, FileTreeVersionsProps, FileTreeProps as PackageFileTreeProps, FileTreeViewProps as PackageFileTreeViewProps } from '@hachej/boring-ui-kit/file-tree-view';\nimport { useRef } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { SidebarMenu, SidebarMenuItem, SidebarMenuSub } from '@/components/ui/sidebar';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';\nimport { VersionHistoryRows, frenchVersionHistoryLabels } from '../version-history/version-history';\nimport { cn } from '../utils/utils';\n\n// Only touch-target layout is added; appearance remains the consumer's shadcn Button.\nfunction LibraryButton({ className, ...props }: FileTreeButtonProps) {\n  return <Button {...props} className={cn('max-sm:min-h-11 max-sm:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11', className)} />;\n}\n\nfunction FileActions({ label, icon, items }: FileTreeActionsProps) {\n  const trigger = useRef<HTMLButtonElement>(null);\n  const portal = useRef<HTMLElement | null>(null);\n  return <DropdownMenu>\n    <DropdownMenuTrigger ref={trigger} render={<LibraryButton type=\"button\" variant=\"ghost\" size=\"icon\" ref={node => { portal.current = node?.ownerDocument.body ?? null; }} />} data-file-more aria-label={label}>{icon}</DropdownMenuTrigger>\n    <DropdownMenuPortal container={portal}>\n      <DropdownMenuContent data-boring=\"file-actions\" align=\"end\" finalFocus={trigger} className=\"w-max max-w-(--available-width)\">\n        {items.map(item => <DropdownMenuItem key={item.id} data-action={item.id} onClick={item.onSelect} className=\"max-sm:min-h-11 pointer-coarse:min-h-11\">{item.icon}{item.label}</DropdownMenuItem>)}\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenu>;\n}\n\nfunction FileVersions({ versions, current, onSelect, locale, earlierVersion }: FileTreeVersionsProps) {\n  return <VersionHistoryRows versions={versions.map(version => ({ id: version.revision, label: earlierVersion, savedAt: version.savedAt, ...(version.source ? { source: version.source } : {}) }))}\n    current={current} onSelect={onSelect} testId=\"file-history-versions\" {...(locale === 'fr' ? { labels: frenchVersionHistoryLabels } : {})} />;\n}\n\nfunction FileTreeEmpty({ icon, title, description, className, children }: Parameters<FileTreeComponents['Empty']>[0]) {\n  return <Empty className={className}>\n    <EmptyHeader>\n      {icon && <EmptyMedia variant=\"icon\">{icon}</EmptyMedia>}\n      <EmptyTitle>{title}</EmptyTitle>\n      {description && <EmptyDescription>{description}</EmptyDescription>}\n    </EmptyHeader>\n    {children && <EmptyContent>{children}</EmptyContent>}\n  </Empty>;\n}\n\nexport const fileTreeComponents = {\n  Button: LibraryButton, Actions: FileActions, Versions: FileVersions,\n  Menu: SidebarMenu, MenuItem: SidebarMenuItem, MenuSub: SidebarMenuSub, Input, Separator: () => <Separator />,\n  Collapsible, CollapsibleTrigger, CollapsibleContent, Empty: FileTreeEmpty,\n} satisfies FileTreeComponents;\nexport type FileTreeProps = Omit<PackageFileTreeProps, 'components'>;\nexport type FileTreeViewProps = Omit<PackageFileTreeViewProps, 'components'>;\n\nexport function FileTree(props: FileTreeProps) {\n  return <PackageFileTree {...props} components={fileTreeComponents} />;\n}\nexport function FileTreeView(props: FileTreeViewProps) {\n  return <PackageFileTreeView {...props} components={fileTreeComponents} />;\n}\nexport { createFileTreeController } from '@hachej/boring-ui-kit/file-tree';\nexport type { FileTreeController } from '@hachej/boring-ui-kit/file-tree';\n",
       "type": "registry:component",
       "target": "components/file-tree/file-tree.tsx"
     }

package/r/html-viewer.json

@@ -4,30 +4,28 @@
   "title": "HTML source and passive preview",
   "description": "Exact HTML source editing with a reconstructed passive preview and borrowed controller. Browser security qualification remains separate.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.3.2",
-    "@hachej/boring-files@^0.3.2",
+    "@hachej/boring-ui-kit@^0.4.0",
+    "@hachej/boring-files@^0.4.0",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.0/r/button.json"
+  ],
   "files": [
     {
       "path": "registry/html-viewer/html-viewer.tsx",
-      "content": "'use client';\n\nimport { HtmlViewer as RuntimeHtmlViewer } from '@hachej/boring-ui-kit/html-viewer';\nimport type { HtmlViewerProps } from '@hachej/boring-ui-kit/html-viewer';\n\nexport type { HtmlViewerProps } from '@hachej/boring-ui-kit/html-viewer';\n\nexport function HtmlViewer({ className, ...props }: HtmlViewerProps) {\n  return <RuntimeHtmlViewer {...props} className={['boring-html-recipe', className].filter(Boolean).join(' ')} />;\n}\n",
+      "content": "'use client';\n\nimport { HtmlViewer as RuntimeHtmlViewer } from '@hachej/boring-ui-kit/html-viewer';\nimport type { HtmlViewerProps } from '@hachej/boring-ui-kit/html-viewer';\nimport { editorControls } from '../button/editor-controls';\n\nexport type { HtmlViewerProps } from '@hachej/boring-ui-kit/html-viewer';\n\nexport function HtmlViewer({ className, ...props }: HtmlViewerProps) {\n  return <RuntimeHtmlViewer components={editorControls} {...props} className={['boring-html-recipe', className].filter(Boolean).join(' ')} />;\n}\n",
       "type": "registry:component",
       "target": "components/html-viewer/html-viewer.tsx"
     }
   ],
   "css": {
     ".boring-html-recipe[data-boring=\"html-viewer\"]": {
-      "background": "var(--boring-html-background, var(--background, #fff))",
-      "color": "var(--boring-html-foreground, var(--foreground, #111827))",
-      "border": "1px solid var(--boring-html-border, var(--border, #d1d5db))",
-      "border-radius": "var(--boring-html-radius, var(--radius, 0.75rem))",
       "padding": "1rem",
       "display": "grid",
       "gap": "0.75rem",
-      "min-width": "0",
-      "font-family": "inherit"
+      "min-width": "0"
     },
     ".boring-html-recipe[data-boring=\"html-viewer\"] > header": {
       "display": "flex",
@@ -41,49 +39,17 @@
       "flex-wrap": "wrap",
       "gap": "0.375rem"
     },
-    ".boring-html-recipe[data-boring=\"html-viewer\"] button": {
-      "font": "inherit",
-      "background": "var(--boring-html-background, var(--background, #fff))",
-      "color": "var(--boring-html-foreground, var(--foreground, #111827))",
-      "border": "1px solid var(--boring-html-border, var(--border, #d1d5db))",
-      "border-radius": "0.375rem",
-      "padding": "0.375rem 0.625rem",
-      "cursor": "pointer"
-    },
-    ".boring-html-recipe[data-boring=\"html-viewer\"] button[aria-pressed=\"true\"]": {
-      "font-weight": "700",
-      "text-decoration": "underline"
-    },
-    ".boring-html-recipe[data-boring=\"html-viewer\"] button:disabled": {
-      "opacity": "0.5",
-      "cursor": "not-allowed"
-    },
-    ".boring-html-recipe[data-boring=\"html-viewer\"] button:focus-visible, .boring-html-recipe[data-boring=\"html-viewer\"] textarea:focus-visible": {
-      "outline": "2px solid var(--boring-html-focus, var(--ring, #2563eb))",
-      "outline-offset": "2px"
-    },
     ".boring-html-recipe[data-boring=\"html-viewer\"] .boring-html-viewer__source": {
       "box-sizing": "border-box",
       "width": "100%",
       "min-height": "18rem",
-      "font-family": "monospace",
-      "line-height": "1.5",
-      "background": "var(--boring-html-background, var(--background, #fff))",
-      "color": "var(--boring-html-foreground, var(--foreground, #111827))",
       "padding": "0.75rem",
-      "border": "1px solid var(--boring-html-border, var(--border, #d1d5db))",
-      "border-radius": "0.375rem",
       "resize": "vertical"
     },
     ".boring-html-recipe[data-boring=\"html-viewer\"] .boring-html-viewer__frame": {
       "box-sizing": "border-box",
       "width": "100%",
-      "min-height": "18rem",
-      "border": "1px solid var(--boring-html-border, var(--border, #d1d5db))",
-      "border-radius": "0.375rem"
-    },
-    ".boring-html-recipe[data-boring=\"html-viewer\"] [role=\"status\"]": {
-      "font-size": "0.875rem"
+      "min-height": "18rem"
     },
     ".boring-html-recipe[data-boring=\"html-viewer\"] [role=\"alert\"]": {
       "border-inline-start": "0.25rem solid currentColor",

package/r/markdown-editor.json

@@ -4,8 +4,8 @@
   "title": "Markdown editor",
   "description": "A host-owned styled wrapper over the concrete borrowed Markdown controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.3.2",
-    "@hachej/boring-files@^0.3.2",
+    "@hachej/boring-ui-kit@^0.4.0",
+    "@hachej/boring-files@^0.4.0",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "marked@^17.0.6",
@@ -22,25 +22,23 @@
     "@tiptap/extension-bubble-menu@^3.31.4",
     "@tiptap/extension-floating-menu@^3.31.4"
   ],
+  "registryDependencies": [
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.0/r/button.json"
+  ],
   "files": [
     {
       "path": "registry/markdown-editor/markdown-editor.tsx",
-      "content": "'use client';\n\nimport { MarkdownEditor as RuntimeMarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownEditorProps } from '@hachej/boring-ui-kit/markdown-editor';\n\nexport type { MarkdownEditorProps } from '@hachej/boring-ui-kit/markdown-editor';\n\nexport function MarkdownEditor({ className, ...props }: MarkdownEditorProps) {\n  return <RuntimeMarkdownEditor {...props} className={['boring-markdown-recipe', className].filter(Boolean).join(' ')} />;\n}\n",
+      "content": "'use client';\n\nimport { MarkdownEditor as RuntimeMarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';\nimport type { MarkdownEditorProps } from '@hachej/boring-ui-kit/markdown-editor';\nimport { editorControls } from '../button/editor-controls';\n\nexport type { MarkdownEditorProps } from '@hachej/boring-ui-kit/markdown-editor';\n\nexport function MarkdownEditor({ className, ...props }: MarkdownEditorProps) {\n  return <RuntimeMarkdownEditor components={editorControls} {...props} className={['boring-markdown-recipe', className].filter(Boolean).join(' ')} />;\n}\n",
       "type": "registry:component",
       "target": "components/markdown-editor/markdown-editor.tsx"
     }
   ],
   "css": {
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"]": {
-      "background": "var(--boring-editor-background, var(--background, #fff))",
-      "color": "var(--boring-editor-foreground, var(--foreground, #111827))",
-      "border": "1px solid var(--boring-editor-border, var(--border, #d1d5db))",
-      "border-radius": "var(--boring-editor-radius, var(--radius, 0.75rem))",
       "padding": "1rem",
       "display": "grid",
       "gap": "1rem",
-      "min-width": "0",
-      "font-family": "inherit"
+      "min-width": "0"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] > header": {
       "display": "flex",
@@ -50,45 +48,24 @@
       "gap": "0.75rem"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] > header > strong": {
-      "margin": "0",
-      "font-size": "1.125rem",
-      "font-weight": "600"
+      "margin": "0"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [role=\"toolbar\"]": {
       "display": "flex",
-      "flex-wrap": "wrap",
+      "flex-wrap": "nowrap",
       "gap": "0.375rem"
     },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] button": {
-      "appearance": "none",
-      "font": "inherit",
-      "font-size": "0.875rem",
-      "line-height": "1.4",
-      "background": "var(--boring-editor-control-background, var(--background, #fff))",
-      "color": "inherit",
-      "border": "1px solid var(--boring-editor-border, var(--border, #d1d5db))",
-      "border-radius": "0.375rem",
-      "padding": "0.375rem 0.625rem",
-      "cursor": "pointer"
-    },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] button[aria-pressed=\"true\"]": {
-      "background": "var(--boring-editor-accent, var(--accent, #e5e7eb))",
-      "font-weight": "600"
-    },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] button:disabled": {
-      "opacity": "0.5",
-      "cursor": "not-allowed"
-    },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] button:focus-visible, .boring-markdown-recipe[data-boring=\"markdown-editor\"] textarea:focus-visible": {
-      "outline": "2px solid var(--boring-editor-focus, var(--ring, #2563eb))",
-      "outline-offset": "2px"
+    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-toolbar": {
+      "min-width": "0",
+      "overflow-x": "auto",
+      "scrollbar-width": "none",
+      "padding-right": "1.5rem",
+      "padding-inline-end": "1.5rem"
     },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [role=\"status\"]": {
-      "font-size": "0.875rem",
-      "color": "var(--boring-editor-muted, var(--muted-foreground, #4b5563))"
+    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-toolbar > *": {
+      "flex-shrink": "0"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] nav[aria-label=\"Document outline\"]": {
-      "border-bottom": "1px solid var(--boring-editor-border, var(--border, #d1d5db))",
       "padding-bottom": "0.75rem"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] nav ol": {
@@ -102,28 +79,28 @@
       "max-width": "75ch",
       "width": "100%",
       "margin-inline": "auto",
-      "line-height": "1.7",
+      "line-height": "var(--leading-relaxed)",
       "overflow-wrap": "anywhere"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content p": {
       "margin": "0.75rem 0"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content h1": {
-      "font-size": "1.875rem",
-      "line-height": "1.2",
+      "font-size": "var(--text-3xl)",
+      "line-height": "var(--leading-tight)",
       "margin": "1.25rem 0 0.75rem",
-      "font-weight": "700"
+      "font-weight": "var(--font-weight-semibold)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content h2": {
-      "font-size": "1.5rem",
-      "line-height": "1.3",
+      "font-size": "var(--text-2xl)",
+      "line-height": "var(--leading-tight)",
       "margin": "1.25rem 0 0.75rem",
-      "font-weight": "650"
+      "font-weight": "var(--font-weight-semibold)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content h3": {
-      "font-size": "1.25rem",
+      "font-size": "var(--text-xl)",
       "margin": "1rem 0 0.5rem",
-      "font-weight": "600"
+      "font-weight": "var(--font-weight-semibold)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content ul": {
       "list-style": "disc",
@@ -143,58 +120,37 @@
       "align-items": "baseline"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content blockquote": {
-      "border-left": "3px solid var(--boring-editor-border, var(--border, #d1d5db))",
+      "border-left": "var(--default-border-width) solid var(--border)",
       "padding-left": "1rem",
       "margin-inline": "0",
-      "color": "var(--boring-editor-muted, var(--muted-foreground, #4b5563))"
+      "color": "var(--muted-foreground)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content pre, .boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-boring=\"proposal\"] pre": {
       "overflow-x": "auto",
-      "background": "var(--boring-editor-code-background, var(--muted, #f3f4f6))",
-      "border-radius": "0.375rem",
+      "background": "var(--muted)",
+      "border-radius": "var(--radius-md)",
       "padding": "0.75rem",
-      "font-family": "ui-monospace, monospace"
+      "font-family": "var(--font-mono)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content code": {
-      "font-family": "ui-monospace, monospace",
-      "font-size": "0.9em"
+      "font-family": "var(--font-mono)",
+      "font-size": "var(--text-sm)"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] > textarea": {
       "width": "100%",
-      "min-height": "16rem",
-      "resize": "vertical",
-      "font-family": "ui-monospace, monospace",
-      "font-size": "0.875rem",
-      "line-height": "1.6",
-      "padding": "0.75rem",
-      "background": "inherit",
-      "color": "inherit",
-      "border": "1px solid var(--boring-editor-border, var(--border, #d1d5db))",
-      "border-radius": "0.375rem",
-      "box-sizing": "border-box"
+      "resize": "vertical"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [role=\"alert\"]": {
-      "border-left": "3px solid var(--boring-editor-danger, var(--destructive, #b91c1c))",
       "padding": "0.75rem",
       "overflow-wrap": "anywhere"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-boring=\"proposal\"]": {
-      "border": "1px solid var(--boring-editor-border, var(--border, #d1d5db))",
-      "padding": "0.75rem",
-      "border-radius": "0.375rem"
+      "padding": "0.75rem"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-boring=\"proposal\"] summary": {
-      "cursor": "pointer",
-      "font-weight": "600"
-    },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content:focus-visible": {
-      "outline": "2px solid var(--boring-editor-focus, var(--ring, #2563eb))",
-      "outline-offset": "2px"
+      "cursor": "pointer"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-boring=\"proposal-diff\"]": {
-      "font-family": "ui-monospace, monospace",
-      "font-size": "0.875rem",
-      "line-height": "1.5",
       "overflow-x": "auto"
     },
     ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-diff]": {
@@ -202,13 +158,8 @@
       "overflow-wrap": "anywhere",
       "padding": "0.125rem 0.375rem"
     },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-diff=\"add\"]": {
-      "background": "var(--boring-editor-diff-add-background, #ecfdf5)",
-      "color": "var(--boring-editor-diff-add-foreground, #065f46)"
-    },
-    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] [data-diff=\"remove\"]": {
-      "background": "var(--boring-editor-diff-remove-background, #fff1f2)",
-      "color": "var(--boring-editor-diff-remove-foreground, #9f1239)"
+    ".boring-markdown-recipe[data-boring=\"markdown-editor\"] .boring-markdown-content:focus": {
+      "outline": "none"
     }
   },
   "docs": "Create and own a MarkdownController from @hachej/boring-ui-kit/markdown. Pass it to MarkdownEditor. The wrapper does not acquire resources or dispose the controller. Check the repository release notes for available npm versions; local tarball tests do not establish registry availability.",