@dogsbay/ui 0.2.0-beta.115 → 0.2.0-beta.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.115",
+  "version": "0.2.0-beta.116",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -14,9 +14,9 @@
   },
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "@dogsbay/primitives": "0.2.0-beta.115",
-    "@dogsbay/elements": "0.2.0-beta.115",
-    "@dogsbay/icons": "0.2.0-beta.115"
+    "@dogsbay/elements": "0.2.0-beta.116",
+    "@dogsbay/icons": "0.2.0-beta.116",
+    "@dogsbay/primitives": "0.2.0-beta.116"
   },
   "optionalDependencies": {
     "@shikijs/transformers": "^4.3.1",

package/src/badge/Badge.astro

@@ -1,17 +1,10 @@
 ---
 import { tv, type VariantProps } from "tailwind-variants";
+import { BADGE_BASE, BADGE_VARIANTS } from "./variants.js";
 
 const badge = tv({
-  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
-  variants: {
-    variant: {
-      default: "border-transparent bg-primary text-primary-foreground",
-      secondary: "border-transparent bg-secondary text-secondary-foreground",
-      destructive:
-        "border-transparent bg-destructive text-destructive-foreground",
-      outline: "text-foreground",
-    },
-  },
+  base: BADGE_BASE,
+  variants: { variant: BADGE_VARIANTS },
   defaultVariants: {
     variant: "default",
   },

package/src/badge/variants.ts

@@ -0,0 +1,37 @@
+/**
+ * Badge classes, shared by Badge.astro, ContentRenderer and @dogsbay/render-html
+ * (which copies this file with scripts/sync-sources.mjs), so a badge
+ * looks the same however a page is produced.
+ */
+export const BADGE_BASE =
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors";
+
+export const BADGE_VARIANTS = {
+  default: "border-transparent bg-primary text-primary-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  destructive: "border-transparent bg-destructive text-destructive-foreground",
+  outline: "text-foreground",
+  // Status colours, from the callout palette (`:badge[Beta]{variant="warning"}`).
+  // The TEXT is the accent mixed 60% toward --foreground; the tint keeps the
+  // accent at full strength. The accent used raw measured 1.85-2.6:1 in light
+  // mode (danger 3.3-3.9:1 in dark too), from painted pixels. --foreground is
+  // near-black in light and near-white in dark, so one rule serves both themes
+  // (worst case 4.95:1); a fixed dark colour would fail dark mode. The same
+  // rule as the in-cell admonitions in format-astro's theme-css.ts.
+  // The `color:` hint is required: tailwind-merge 2.x (Badge.astro's tv())
+  // reads a bare text-[... 60% ...] as a FONT SIZE and drops text-xs.
+  // Checked per preset by @dogsbay/render-html tests/contrast.test.ts, and
+  // through tv() by ui tests/badge.test.ts.
+  info: "border-transparent bg-info/15 text-[color:color-mix(in_oklab,var(--info)_60%,var(--foreground))]",
+  success: "border-transparent bg-success/15 text-[color:color-mix(in_oklab,var(--success)_60%,var(--foreground))]",
+  warning: "border-transparent bg-warning/15 text-[color:color-mix(in_oklab,var(--warning)_60%,var(--foreground))]",
+  danger: "border-transparent bg-danger/15 text-[color:color-mix(in_oklab,var(--danger)_60%,var(--foreground))]",
+} as const;
+
+export type BadgeVariant = keyof typeof BADGE_VARIANTS;
+
+/** The class list for a variant; an unknown variant gets the base classes only. */
+export function badgeClass(variant: string | undefined): string {
+  const v = BADGE_VARIANTS[(variant ?? "default") as BadgeVariant];
+  return v ? `${BADGE_BASE} ${v}` : BADGE_BASE;
+}

package/src/code-block/CodeBlock.astro

@@ -21,6 +21,10 @@ interface Props {
   lang?: string;
   /** Optional title displayed in the header bar */
   title?: string;
+  /*
+   * A `caption` slot makes the block a figure: the header bar is its
+   * <figcaption>, showing the caption with the language beside it.
+   */
   /** Show copy button (default: true) */
   copy?: boolean;
   /** Show the header title bar. true = always, false = never, "auto" = only when title prop is set (default: true) */
@@ -55,22 +59,38 @@ const shikiLang = LANG_ALIASES[lang.toLowerCase()] ?? lang.toLowerCase();
 // - true: show when there's a title or a declared language (default, original behavior)
 // - false: never show
 // - "auto": only show when an explicit title is provided (not lang-only)
+const hasCaption = Astro.slots.has("caption");
+const Wrapper = hasCaption ? "figure" : "div";
+const Header = hasCaption ? "figcaption" : "div";
 const showHeader =
-  showTitle === false ? false
+  hasCaption ? true
+  : showTitle === false ? false
   : showTitle === "auto" ? !!title
   : !!title || lang !== "plaintext";
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
 ---
 
-<div
-  class={codeBlockWrapper({ class: className })}
+<Wrapper
+  class={codeBlockWrapper({ class: [hasCaption && "m-0", className] })}
   data-component="code-block"
   {...rest}
 >
   {showHeader && (
-    <div class={codeBlockHeader()}>
-      <span class="select-none">{title || lang}</span>
+    <Header class={codeBlockHeader()}>
+      {/*
+        Left: what the code is (caption or filename title), or the language when that is
+        all there is. Right: the language beside the copy button, as secondary detail
+      */}
+      {hasCaption ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="caption"><slot name="caption" /></span>
+      ) : title ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="title">{title}</span>
+      ) : (
+        <span class="select-none">{lang}</span>
+      )}
+      <span class="flex shrink-0 items-center gap-2">
+      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeBlockCopy()}
@@ -113,7 +133,8 @@ const floatingCopy = copy && !showHeader;
           </svg>
         </button>
       )}
-    </div>
+      </span>
+    </Header>
   )}
   <div class="relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:px-4 [&_pre]:py-3">
     <Code code={code} lang={shikiLang} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
@@ -135,7 +156,7 @@ const floatingCopy = copy && !showHeader;
       </button>
     )}
   </div>
-</div>
+</Wrapper>
 
 <script>
   function setupCodeBlockCopy() {

package/src/code-rich/CodeRich.astro

@@ -33,6 +33,10 @@ interface Props {
   lang?: string;
   /** Optional title/filename displayed in the header bar */
   title?: string;
+  /*
+   * A `caption` slot makes the block a figure: the header bar is its
+   * <figcaption>, showing the caption with the language beside it.
+   */
   /** Show copy button (default: true) */
   copy?: boolean;
   /** Show line numbers (default: false) */
@@ -212,21 +216,36 @@ const html = await codeToHtml(highlightCode, {
 });
 
 // Show header bar only when there's a title or a declared language
-const hasLabel = !!title || (lang !== "plaintext");
+const hasCaption = Astro.slots.has("caption");
+const Wrapper = hasCaption ? "figure" : "div";
+const Header = hasCaption ? "figcaption" : "div";
+const hasLabel = hasCaption || !!title || (lang !== "plaintext");
 const showHeader = hasLabel;
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
 ---
 
-<div
-  class={codeRichWrapper({ class: className })}
+<Wrapper
+  class={codeRichWrapper({ class: [hasCaption && "m-0", className] })}
   data-component="code-rich"
   data-line-numbers={lineNumbers || undefined}
   {...rest}
 >
   {showHeader && (
-    <div class={codeRichHeader()}>
-      <span class="select-none">{title || lang}</span>
+    <Header class={codeRichHeader()}>
+      {/*
+        Left: what the code is (caption or filename title), or the language when that is
+        all there is. Right: the language beside the copy button, as secondary detail
+      */}
+      {hasCaption ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="caption"><slot name="caption" /></span>
+      ) : title ? (
+        <span class="min-w-0 font-medium text-code-fg" data-part="title">{title}</span>
+      ) : (
+        <span class="select-none">{lang}</span>
+      )}
+      <span class="flex shrink-0 items-center gap-2">
+      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeRichCopy()}
@@ -269,7 +288,8 @@ const floatingCopy = copy && !showHeader;
           </svg>
         </button>
       )}
-    </div>
+      </span>
+    </Header>
   )}
   <div class="code-rich-body relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:!bg-transparent [&_pre]:px-4 [&_pre]:py-3">
     <Fragment set:html={html} />
@@ -291,7 +311,7 @@ const floatingCopy = copy && !showHeader;
       </button>
     )}
   </div>
-</div>
+</Wrapper>
 
 <script>
   function setupCodeRichCopy() {

package/src/code-rich/code-rich.css

@@ -2,7 +2,9 @@
 
 /* ── All lines ────────────────────────────────────────── */
 .code-rich-body .line {
-  display: inline-flex;
+  /* inline-block, not inline-flex: a flex line makes each token span a flex item, and
+     browsers then copy a hand-made selection with a line break between tokens. */
+  display: inline-block;
   width: 100%;
 }
 

package/src/code-rich/markers.ts

@@ -36,6 +36,8 @@ const BARE_MARKER = /[ \t]*\[!code[^\]]*\]/g;
  * @param isPlainGrammar true when highlighting falls back to plaintext
  */
 export function stripUnprocessableMarkers(code: string, isPlainGrammar: boolean): string {
+  // Every marker has "[!code"; without one there is nothing to strip, and MARKER's leading [ \t]* is quadratic on a long run of spaces.
+  if (!code.includes("[!code")) return code;
   return code
     .split("\n")
     .map((line) => {

package/src/content-renderer/ContentRenderer.astro

@@ -29,6 +29,10 @@
  *          api-params, api-symbol, api-doc, api-source, youtube, image, grid
  */
 import Alert from "../alert/Alert.astro";
+import { badgeClass } from "../badge/variants.js";
+
+/** Attribute-safe text (also safe as element text). */
+const escAttr = (s: string) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 import AlertTitle from "../alert/AlertTitle.astro";
 import AlertDescription from "../alert/AlertDescription.astro";
 import CollapsibleAlert from "../alert/CollapsibleAlert.astro";
@@ -128,6 +132,7 @@ function inlineToHtml(nodes: InlineNode[]): string {
       case "link": return `<a href="${n.href || ""}">${inlineToHtml((n.children || []) as InlineNode[])}</a>`;
       case "image": return `<img src="${withBaseUrl(n.src as string | undefined)}" alt="${n.alt || ""}">`;
       case "kbd": return (n.keys as string[] || []).map((k: string) => `<kbd>${k}</kbd>`).join("+");
+      case "badge": return `<span class="${badgeClass(n.variant as string | undefined)}" data-variant="${escAttr(String(n.variant || "default"))}">${escAttr(String(n.text ?? ""))}</span>`;
       case "html-inline": return String(n.html || "");
       case "break": return "<br>";
       default: return "";
@@ -387,7 +392,9 @@ function withBaseUrl(src: string | undefined): string {
   <li id={(node.props?.id as string) || ""} class="text-sm text-muted-foreground">
     {node.inline
       ? <span>{node.inline.map(span => <InlineRenderer node={span} icons={icons} images={images} />)}</span>
-      : <Fragment set:html={node.html} />
+      : children.length > 0
+        ? children.map(child => <Astro.self node={child} images={images} icons={icons} />)
+        : <Fragment set:html={node.html} />
     }
     {" "}<a href={`#${node.props?.backrefId || ""}`} class="text-primary hover:underline" aria-label={`Back to reference ${node.props?.label}`}>↩</a>
   </li>

package/src/content-renderer/InlineRenderer.astro

@@ -3,6 +3,7 @@
  * InlineRenderer — renders structured InlineNode[] to HTML elements.
  */
 import MathKatex from "../math/MathKatex.astro";
+import Badge from "../badge/Badge.astro";
 
 interface InlineNode {
   type: string;
@@ -135,6 +136,10 @@ const isEmojiIcon = node.type === "icon" && (node.library === "emoji" || (iconSv
   </a>
 )}
 
+{node.type === "badge" && (
+  <Badge variant={(node as { variant?: string }).variant ?? "default"}>{node.text}</Badge>
+)}
+
 {node.type === "kbd" && (
   <span class="inline-flex items-center gap-0.5">
     {(node.keys || []).map((key, i) => (

package/src/files/FileTree.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * FileTree — the `:::files` directive: a nested list shown as folders and files.
+ * The markup is fileTreeHtml (markup.ts), shared with dogsbay-ssg.
+ */
+import { fileTreeHtml, type FileTreeItem } from "./markup.js";
+
+interface Props {
+  items: FileTreeItem[];
+  class?: string;
+}
+
+const { items, class: className } = Astro.props;
+---
+
+<Fragment set:html={fileTreeHtml(items, className ?? "")} />

package/src/files/index.ts

@@ -0,0 +1,2 @@
+export { default as FileTree } from "./FileTree.astro";
+export { fileTreeHtml, type FileTreeItem } from "./markup.js";

package/src/files/markup.ts

@@ -0,0 +1,34 @@
+/**
+ * The `:::files` tree, written once for both pipelines: FileTree.astro renders it,
+ * and dogsbay-ssg copies this file (scripts/sync-astro-styles.mjs) and calls it.
+ * Each pipeline turns an entry's inline Markdown into `label` HTML itself.
+ */
+
+export interface FileTreeItem {
+  /** The entry's label as HTML (already escaped). */
+  label: string;
+  /** A folder: it has entries, or its name ends in "/". */
+  folder: boolean;
+  children: FileTreeItem[];
+}
+
+const svg = (body: string) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" focusable="false">${body}</svg>`;
+// Lucide folder and file (ISC licence).
+const FOLDER = svg('<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>');
+const FILE = svg('<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>');
+
+function list(items: FileTreeItem[], nested: boolean): string {
+  const cls = nested ? "m-0 ml-2 list-none border-l border-border pl-4" : "m-0 list-none p-0";
+  return `<ul class="${cls}">${items
+    .map(
+      (it) =>
+        `<li class="my-0.5" data-kind="${it.folder ? "folder" : "file"}"><span class="inline-flex items-center gap-1.5">${it.folder ? FOLDER : FILE}<span>${it.label}</span></span>${it.children.length ? list(it.children, true) : ""}</li>`,
+    )
+    .join("")}</ul>`;
+}
+
+/** The whole tree, in a bordered, monospaced box. */
+export function fileTreeHtml(items: FileTreeItem[], extraClass = ""): string {
+  return `<div class="not-prose my-4 overflow-x-auto rounded-lg border bg-card p-3 font-mono text-sm${extraClass ? ` ${extraClass}` : ""}" data-component="files">${list(items, false)}</div>`;
+}

package/src/kbd/Kbd.astro

@@ -1,9 +1,8 @@
 ---
 import { tv } from "tailwind-variants";
+import { KBD_CLASS } from "./variants.js";
 
-const kbd = tv({
-  base: "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted",
-});
+const kbd = tv({ base: KBD_CLASS });
 
 interface Props {
   class?: string;

package/src/kbd/variants.ts

@@ -0,0 +1,3 @@
+/** Kbd.astro's classes, shared with dogsbay-ssg (copied by scripts/sync-astro-styles.mjs). */
+export const KBD_CLASS =
+  "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted";

package/src/link-card/LinkCard.astro

@@ -1,5 +1,6 @@
 ---
 import { tv } from "tailwind-variants";
+import Icon from "../icon/Icon.astro";
 
 const linkCard = tv({
   base: "group flex flex-col gap-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm transition-colors hover:bg-accent/50",
@@ -17,16 +18,21 @@ interface Props {
   title: string;
   description?: string;
   href: string;
+  /** An icon before the title: a name (`rocket`, `mdi:home`) as the Icon component takes. */
+  icon?: string;
   class?: string;
   [key: string]: unknown;
 }
 
-const { title, description, href, class: className, ...rest } = Astro.props;
+const { title, description, href, icon, class: className, ...rest } = Astro.props;
 ---
 
 <a href={href} class={linkCard({ class: className })} {...rest}>
   <div class="flex items-center justify-between">
-    <span class={linkCardTitle()}>{title}</span>
+    <span class="flex min-w-0 items-center gap-2">
+      {icon && <Icon name={icon} class="size-4 shrink-0 text-muted-foreground" />}
+      <span class={linkCardTitle()}>{title}</span>
+    </span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"

package/src/sidebar/sidebar.ts

@@ -202,7 +202,7 @@ function openMobile(provider: HTMLElement) {
   }
 
   // Lock scroll
-  ScrollLock.lock();
+  ScrollLock.activate();
 
   // Focus first focusable element in sidebar
   requestAnimationFrame(() => {
@@ -237,7 +237,7 @@ function closeMobile(provider: HTMLElement) {
   }
 
   // Unlock scroll
-  ScrollLock.unlock();
+  ScrollLock.deactivate();
 
   // Return focus to trigger
   const trigger = instance.provider.querySelector(

package/src/table/Table.astro

@@ -6,22 +6,33 @@ const tableContainer = tv({
 });
 
 const table = tv({
-  base: "w-full caption-bottom text-sm",
+  base: "w-full caption-top text-sm",
 });
 
 interface Props {
   class?: string;
-  /** Optional table caption, rendered as a `<caption>` (bottom-aligned). */
+  /**
+   * Optional table caption, rendered as a `<caption>`: the table's title,
+   * above it and left-aligned.
+   * For a caption with markup, use the `caption` slot instead.
+   */
   caption?: string;
   [key: string]: unknown;
 }
 
 const { class: className, caption, ...rest } = Astro.props;
+
+// A table's caption is its title: above the table, left-aligned, in the body color
+const captionClass = "mb-2 text-left text-sm font-medium text-foreground";
 ---
 
 <div class={tableContainer()}>
   <table class={table({ class: className })} {...rest}>
-    {caption && <caption class="text-sm text-muted-foreground mt-2">{caption}</caption>}
+    {Astro.slots.has("caption") ? (
+      <caption class={captionClass}><slot name="caption" /></caption>
+    ) : (
+      caption && <caption class={captionClass}>{caption}</caption>
+    )}
     <slot />
   </table>
 </div>