@dogsbay/ui 0.2.0-beta.0

package/src/command/command.ts

@@ -0,0 +1,212 @@
+interface CommandInstance {
+  root: HTMLElement;
+  input: HTMLInputElement;
+  list: HTMLElement;
+  empty: HTMLElement | null;
+  items: HTMLElement[];
+  groups: HTMLElement[];
+  selectedIndex: number;
+  filter: (item: HTMLElement, query: string) => boolean;
+}
+
+const instances = new WeakMap<HTMLElement, CommandInstance>();
+
+function defaultFilter(item: HTMLElement, query: string): boolean {
+  const text = item.textContent?.toLowerCase() || "";
+  const keywords = item.dataset.keywords?.toLowerCase() || "";
+  const q = query.toLowerCase();
+  return text.includes(q) || keywords.includes(q);
+}
+
+function initCommand(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  const input = root.querySelector(
+    "[data-part='input']",
+  ) as HTMLInputElement | null;
+  const list = root.querySelector(
+    "[data-part='list']",
+  ) as HTMLElement | null;
+  const empty = root.querySelector(
+    "[data-part='empty']",
+  ) as HTMLElement | null;
+
+  if (!input || !list) return;
+
+  // ARIA linkage: combobox → listbox
+  if (!list.id) list.id = `command-list-${Math.random().toString(36).slice(2, 8)}`;
+  input.setAttribute("aria-controls", list.id);
+
+  const items = Array.from(
+    list.querySelectorAll("[data-part='item']"),
+  ) as HTMLElement[];
+  const groups = Array.from(
+    list.querySelectorAll("[data-part='group']"),
+  ) as HTMLElement[];
+
+  const instance: CommandInstance = {
+    root,
+    input,
+    list,
+    empty,
+    items,
+    groups,
+    selectedIndex: -1,
+    filter: defaultFilter,
+  };
+
+  instances.set(root, instance);
+
+  // Input filtering
+  input.addEventListener("input", () => {
+    filterItems(root);
+  });
+
+  // Keyboard navigation
+  input.addEventListener("keydown", (e) => {
+    const visibleItems = getVisibleItems(instance);
+    if (visibleItems.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const currentVisible = instance.selectedIndex >= 0
+        ? visibleItems.indexOf(instance.items[instance.selectedIndex])
+        : -1;
+      const nextIdx = currentVisible < visibleItems.length - 1
+        ? currentVisible + 1
+        : 0;
+      selectItem(root, instance.items.indexOf(visibleItems[nextIdx]));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const currentVisible = instance.selectedIndex >= 0
+        ? visibleItems.indexOf(instance.items[instance.selectedIndex])
+        : -1;
+      const prevIdx = currentVisible > 0
+        ? currentVisible - 1
+        : visibleItems.length - 1;
+      selectItem(root, instance.items.indexOf(visibleItems[prevIdx]));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      selectItem(root, instance.items.indexOf(visibleItems[0]));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      selectItem(
+        root,
+        instance.items.indexOf(visibleItems[visibleItems.length - 1]),
+      );
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (instance.selectedIndex >= 0) {
+        const item = instance.items[instance.selectedIndex];
+        if (!item.hidden && item.dataset.disabled !== "true") {
+          item.click();
+        }
+      }
+    }
+  });
+
+  // Item hover
+  items.forEach((item) => {
+    item.addEventListener("pointerenter", () => {
+      if (item.hidden || item.dataset.disabled === "true") return;
+      selectItem(root, instance.items.indexOf(item));
+    });
+  });
+
+  // Initial filter (empty query shows all)
+  filterItems(root);
+
+  // Select first visible item
+  const visibleItems = getVisibleItems(instance);
+  if (visibleItems.length > 0) {
+    selectItem(root, instance.items.indexOf(visibleItems[0]));
+  }
+}
+
+function getVisibleItems(instance: CommandInstance): HTMLElement[] {
+  return instance.items.filter(
+    (item) => !item.hidden && item.dataset.disabled !== "true",
+  );
+}
+
+function filterItems(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  const query = instance.input.value.trim();
+
+  // Filter items
+  let anyVisible = false;
+  instance.items.forEach((item) => {
+    const matches = query === "" || instance.filter(item, query);
+    item.hidden = !matches;
+    if (matches) anyVisible = true;
+  });
+
+  // Hide empty groups (groups where all items are hidden)
+  instance.groups.forEach((group) => {
+    const groupItems = Array.from(
+      group.querySelectorAll("[data-part='item']"),
+    ) as HTMLElement[];
+    const hasVisible = groupItems.some((item) => !item.hidden);
+    group.hidden = !hasVisible;
+  });
+
+  // Show/hide empty message
+  if (instance.empty) {
+    instance.empty.hidden = anyVisible || query === "";
+  }
+
+  // Select first visible item
+  const visibleItems = getVisibleItems(instance);
+  if (visibleItems.length > 0) {
+    selectItem(root, instance.items.indexOf(visibleItems[0]));
+  } else {
+    clearSelection(root);
+  }
+}
+
+function selectItem(root: HTMLElement, index: number) {
+  const instance = instances.get(root);
+  if (!instance) return;
+  if (index < 0 || index >= instance.items.length) return;
+
+  // Clear previous
+  if (instance.selectedIndex >= 0) {
+    instance.items[instance.selectedIndex].removeAttribute("data-selected");
+  }
+
+  instance.selectedIndex = index;
+  const item = instance.items[index];
+  item.setAttribute("data-selected", "true");
+  item.scrollIntoView({ block: "nearest" });
+}
+
+function clearSelection(root: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance) return;
+
+  if (instance.selectedIndex >= 0) {
+    instance.items[instance.selectedIndex].removeAttribute("data-selected");
+  }
+  instance.selectedIndex = -1;
+}
+
+// Auto-initialize
+function init() {
+  document
+    .querySelectorAll("[data-component='command']")
+    .forEach((el) => {
+      initCommand(el as HTMLElement);
+    });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+document.addEventListener("astro:after-swap", init);
+
+export { initCommand, filterItems };

package/src/command/index.ts

@@ -0,0 +1,8 @@
+export { default as Command } from "./Command.astro";
+export { default as CommandInput } from "./CommandInput.astro";
+export { default as CommandList } from "./CommandList.astro";
+export { default as CommandEmpty } from "./CommandEmpty.astro";
+export { default as CommandGroup } from "./CommandGroup.astro";
+export { default as CommandItem } from "./CommandItem.astro";
+export { default as CommandSeparator } from "./CommandSeparator.astro";
+export { default as CommandShortcut } from "./CommandShortcut.astro";

package/src/content-renderer/ContentRenderer.astro

@@ -0,0 +1,410 @@
+---
+/**
+ * ContentRenderer — recursive TreeNode[] renderer (DEPRECATED).
+ *
+ * STATUS: deprecated. Frozen for new TreeNode types. Scheduled for removal.
+ *
+ * The canonical TreeNode → Astro path is `@dogsbay/format-astro` (the
+ * `treeToAstro()` serializer + `exportAstroProject()` project generator).
+ * That path emits editable `.astro` source files with explicit component
+ * imports — same shipping model as the rest of Dogsbay (you own the source).
+ *
+ * This component existed as a stop-gap before format-astro shipped — a
+ * runtime renderer that walks a TreeNode and emits markup at Astro build
+ * time. The four format exporters (format-astro, format-mkdocs,
+ * format-obsidian, format-dogsbay-md) all follow the "compile to source"
+ * model and bypass this renderer.
+ *
+ * What still uses ContentRenderer (kept working until removal):
+ *   - apps/demo/src/pages/{docs,material,mkdocs,mkdocs-material}/[...slug].astro
+ *   - apps/material-docs/src/pages/docs/[...slug].astro
+ *   - apps/ui-docs/src/pages/handbook/styling.astro
+ *   - the legacy `--dynamic` flag on `dogsbay import-mkdocs`
+ *
+ * DO NOT add new TreeNode-type cases here. Add them to format-astro
+ * instead. When the listed consumers are migrated, this file can be
+ * deleted.
+ *
+ * Imports: alert, code-block, code-rich, tabs, table, steps, diagram,
+ *          api-params, api-symbol, api-doc, api-source, youtube, image, grid
+ */
+import Alert from "../alert/Alert.astro";
+import AlertTitle from "../alert/AlertTitle.astro";
+import AlertDescription from "../alert/AlertDescription.astro";
+import CollapsibleAlert from "../alert/CollapsibleAlert.astro";
+import Steps from "../steps/Steps.astro";
+import Step from "../steps/Step.astro";
+import SubSteps from "../steps/SubSteps.astro";
+import CodeBlock from "../code-block/CodeBlock.astro";
+import CodeRich from "../code-rich/CodeRich.astro";
+import "../code-rich/code-rich.css";
+import Diagram from "../diagram/Diagram.astro";
+import ApiParams from "../api-params/ApiParams.astro";
+import ApiSymbol from "../api-symbol/ApiSymbol.astro";
+import ApiDoc from "../api-doc/ApiDoc.astro";
+import ApiSource from "../api-source/ApiSource.astro";
+import Grid from "../grid/Grid.astro";
+import YouTube from "../youtube/YouTube.astro";
+import BlockImage from "../image/Image.astro";
+import Tabs from "../tabs/Tabs.astro";
+import TabsList from "../tabs/TabsList.astro";
+import TabsTrigger from "../tabs/TabsTrigger.astro";
+import TabsContent from "../tabs/TabsContent.astro";
+import Table from "../table/Table.astro";
+import TableHeader from "../table/TableHeader.astro";
+import TableBody from "../table/TableBody.astro";
+import TableRow from "../table/TableRow.astro";
+import TableHead from "../table/TableHead.astro";
+import TableCell from "../table/TableCell.astro";
+import InlineRenderer from "./InlineRenderer.astro";
+import MathKatex from "../math/MathKatex.astro";
+
+interface InlineNode {
+  type: string;
+  [key: string]: unknown;
+}
+
+interface TreeNode {
+  type: string;
+  props?: Record<string, unknown>;
+  html?: string;
+  inline?: InlineNode[];
+  children?: TreeNode[];
+}
+
+interface Props {
+  node: TreeNode;
+  images?: Record<string, ImageMetadata>;
+  icons?: any;
+}
+
+const { node, images = {}, icons } = Astro.props;
+const children = node.children || [];
+
+// Determine if code block needs CodeRich (annotations/line numbers)
+const isRichCode = node.type === "code" && (
+  node.props?.lineNumbers ||
+  node.props?.highlights ||
+  ((node.props?.code as string) || "").includes("[!code")
+);
+
+// html-container helpers
+const containerAttrs = node.type === "html-container"
+  ? (node.props?.attrs as Record<string, string>) || {}
+  : {};
+const containerClass = containerAttrs.class || "";
+const isColumns = node.type === "html-container" && containerClass.includes("mdx-columns");
+const isGridCards = node.type === "html-container" && containerClass.includes("grid") && containerClass.includes("cards");
+
+// Block image detection: paragraph with sole image (or link-wrapped image) inline child
+const blockImage = (() => {
+  if (node.type !== "paragraph" || !node.children?.length) return null;
+  const prose = node.children[0];
+  if (prose?.type !== "prose" || !prose.inline) return null;
+  const meaningful = prose.inline.filter((n: InlineNode) => !(n.type === "text" && (n.text as string || "").trim() === ""));
+  if (meaningful.length !== 1) return null;
+  const sole = meaningful[0];
+  if (sole.type === "image") return sole;
+  if (sole.type === "link") {
+    const linkChildren = (sole.children as InlineNode[]) || [];
+    if (linkChildren.length === 1 && linkChildren[0].type === "image") return linkChildren[0];
+  }
+  return null;
+})();
+
+/** Convert InlineNode[] to HTML string (for headings rendered via set:html). */
+function inlineToHtml(nodes: InlineNode[]): string {
+  return nodes.map(n => {
+    switch (n.type) {
+      case "text": {
+        let s = String(n.text || "");
+        if (n.bold) s = `<strong>${s}</strong>`;
+        if (n.italic) s = `<em>${s}</em>`;
+        if (n.strikethrough) s = `<s>${s}</s>`;
+        return s;
+      }
+      case "code": return `<code>${n.text || ""}</code>`;
+      case "highlight": return `<mark>${inlineToHtml((n.children || []) as InlineNode[])}</mark>`;
+      case "link": return `<a href="${n.href || ""}">${inlineToHtml((n.children || []) as InlineNode[])}</a>`;
+      case "image": return `<img src="${n.src || ""}" alt="${n.alt || ""}">`;
+      case "kbd": return (n.keys as string[] || []).map((k: string) => `<kbd>${k}</kbd>`).join("+");
+      case "html-inline": return String(n.html || "");
+      case "break": return "<br>";
+      default: return "";
+    }
+  }).join("");
+}
+
+/** Resolve an image src path to ImageMetadata from the images map. */
+function resolveImage(src: string): ImageMetadata | undefined {
+  if (!src || src.startsWith("http")) return undefined;
+  const normalized = "/" + src.replace(/^(?:\.\.\/)+/, "").replace(/^\/+/, "");
+  const clean = normalized.replace(/#.*$/, "");
+  return images[clean];
+}
+---
+
+{/* ── Prose ──────────────────────────────────────────────── */}
+{node.type === "prose" && node.inline && (
+  <Fragment>
+    {node.inline.map(span => <InlineRenderer node={span} icons={icons} images={images} />)}
+  </Fragment>
+)}
+{node.type === "prose" && !node.inline && <Fragment set:html={node.html} />}
+
+{/* ── Heading with anchor ────────────────────────────────── */}
+{node.type === "heading" && (
+  <Fragment set:html={
+    `<h${node.props!.level} id="${node.props!.slug || ''}" class="group scroll-mt-20">` +
+    `${node.inline ? inlineToHtml(node.inline) : (node.html?.replace(/<h\d[^>]*>|<\/h\d>/g, '') || node.props!.text || '')}` +
+    `<a href="#${node.props!.slug || ''}" class="no-underline ml-2 opacity-0 group-hover:opacity-50 transition-opacity text-muted-foreground" aria-label="Link to this heading">¶</a>` +
+    `</h${node.props!.level}>`
+  } />
+)}
+
+{/* ── Paragraph — block image gets <figure>, normal gets <p> */}
+{node.type === "paragraph" && blockImage && (
+  <BlockImage
+    src={blockImage.src as string}
+    alt={blockImage.alt as string || ""}
+    title={blockImage.title as string}
+    width={blockImage.width as number}
+    height={blockImage.height as number}
+    imageData={resolveImage(blockImage.src as string)}
+    block
+  />
+)}
+{node.type === "paragraph" && !blockImage && (
+  <p>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</p>
+)}
+
+{/* ── Code block — smart routing to CodeBlock or CodeRich ── */}
+{node.type === "code" && !isRichCode && (
+  <CodeBlock
+    code={(node.props?.code as string) || ""}
+    lang={(node.props?.lang as string) || "plaintext"}
+    title={node.props?.title as string}
+  />
+)}
+{node.type === "code" && isRichCode && (
+  <CodeRich
+    code={(node.props?.code as string) || ""}
+    lang={(node.props?.lang as string) || "plaintext"}
+    title={node.props?.title as string}
+    lineNumbers={!!node.props?.lineNumbers}
+    highlights={node.props?.highlights as string}
+  />
+)}
+
+{/* ── Callout / Admonition ───────────────────────────────── */}
+{node.type === "callout" && (
+  <Alert variant={(node.props?.variant as any) || "note"} class="my-4">
+    {node.props?.title && <AlertTitle>{node.props.title}</AlertTitle>}
+    <AlertDescription>
+      {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+    </AlertDescription>
+  </Alert>
+)}
+
+{/* ── Details / Collapsible admonition ───────────────────── */}
+{node.type === "details" && (
+  <CollapsibleAlert
+    variant={(node.props?.variant as any) || "note"}
+    title={(node.props?.title || node.props?.variant || "Details") as string}
+    open={node.props?.open as boolean}
+    class="my-4"
+  >
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </CollapsibleAlert>
+)}
+
+{/* ── Steps ──────────────────────────────────────────────── */}
+{node.type === "steps" && (
+  <Steps>
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </Steps>
+)}
+{node.type === "step" && (
+  <Step>
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </Step>
+)}
+{node.type === "substeps" && (
+  <SubSteps>
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </SubSteps>
+)}
+
+{/* ── Tabs ────────────────────────────────────────────────── */}
+{node.type === "tabs" && (
+  <Tabs defaultValue={(children[0]?.props?.value || children[0]?.props?.label || "tab-0") as string} syncKey={node.props?.syncKey as string | undefined} class="my-4">
+    <TabsList>
+      {children.map((tab, i) => (
+        <TabsTrigger value={(tab.props?.value || tab.props?.label || `tab-${i}`) as string}>
+          {tab.inline
+            ? tab.inline.map((span: any) => <InlineRenderer node={span} icons={icons} images={images} />)
+            : (tab.props?.label || tab.props?.title) as string
+          }
+        </TabsTrigger>
+      ))}
+    </TabsList>
+    {children.map((tab, i) => (
+      <TabsContent value={(tab.props?.value || tab.props?.label || `tab-${i}`) as string}>
+        {(tab.children || []).map(child => <Astro.self node={child} images={images} icons={icons} />)}
+      </TabsContent>
+    ))}
+  </Tabs>
+)}
+{node.type === "tab" && (
+  <div>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</div>
+)}
+
+{/* ── Definition list ────────────────────────────────────── */}
+{node.type === "deflist" && (
+  <dl class="my-4 space-y-2">
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </dl>
+)}
+{node.type === "dt" && (
+  <dt class="font-semibold">{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</dt>
+)}
+{node.type === "dd" && (
+  <dd class="ml-6 text-muted-foreground">{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</dd>
+)}
+
+{/* ── Table ──────────────────────────────────────────────── */}
+{node.type === "table" && (
+  <Table class="my-4">
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </Table>
+)}
+{node.type === "thead" && <TableHeader>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableHeader>}
+{node.type === "tbody" && <TableBody>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableBody>}
+{node.type === "tr" && <TableRow>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableRow>}
+{node.type === "th" && <TableHead>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableHead>}
+{node.type === "td" && <TableCell>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableCell>}
+
+{/* ── Standard block elements ────────────────────────────── */}
+{node.type === "ordered-list" && <ol>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</ol>}
+{node.type === "unordered-list" && <ul>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</ul>}
+{node.type === "list-item" && <li>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</li>}
+{node.type === "blockquote" && (
+  <blockquote class="border-l-4 border-border pl-4 italic text-muted-foreground">
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </blockquote>
+)}
+{node.type === "hr" && <hr class="my-8 border-border" />}
+{node.type === "html" && (() => {
+  let html = node.html || "";
+  if (html.includes("<img") && Object.keys(images).length > 0) {
+    html = html.replace(/src="([^"]+)"/g, (_match: string, src: string) => {
+      const resolved = resolveImage(src);
+      if (resolved) return `src="${resolved.src}" width="${resolved.width}" height="${resolved.height}"`;
+      return _match;
+    });
+  }
+  return <Fragment set:html={html} />;
+})()}
+
+{/* ── API Documentation ──────────────────────────────────── */}
+{(node.type === "api-class" || node.type === "api-member") && (
+  <ApiSymbol
+    name={(node.props?.name as string) || ""}
+    kind={(node.props?.kind as any) || "func"}
+    signature={node.props?.signature as string}
+    bases={(node.props?.bases as string[]) || []}
+    type={node.props?.type as string}
+    level={node.type === "api-class" ? 2 : 3}
+  >
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </ApiSymbol>
+)}
+{node.type === "api-doc" && (
+  <ApiDoc html={(node.props?.html as string) || ""} />
+)}
+{node.type === "api-params" && (
+  <ApiParams params={(node.props?.params as any[]) || []} />
+)}
+{node.type === "api-source" && (
+  <ApiSource
+    code={(node.props?.code as string) || ""}
+    file={node.props?.file as string}
+    line={node.props?.line as number}
+  />
+)}
+
+{/* ── Diagram — pre-rendered SVG ─────────────────────────── */}
+{node.type === "diagram" && (
+  <Diagram
+    lang={(node.props?.lang as string) || "mermaid"}
+    code={(node.props?.code as string) || ""}
+    svg={(node.props?.svg as string) || ""}
+    title={node.props?.title as string}
+  />
+)}
+
+{/* ── Footnotes ──────────────────────────────────────────── */}
+{node.type === "footnote-list" && (
+  <ol class="list-decimal pl-6 space-y-1" data-footnote-list>
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </ol>
+)}
+{node.type === "footnote-def" && (
+  <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} />
+    }
+    {" "}<a href={`#${node.props?.backrefId || ""}`} class="text-primary hover:underline" aria-label={`Back to reference ${node.props?.label}`}>↩</a>
+  </li>
+)}
+
+{/* ── Math block ─────────────────────────────────────────── */}
+{node.type === "math-block" && (
+  <MathKatex latex={(node.props?.latex as string) || ""} display />
+)}
+
+{/* ── YouTube embed ──────────────────────────────────────── */}
+{node.type === "youtube" && (
+  <YouTube
+    id={(node.props?.id as string) || ""}
+    title={(node.props?.title as string) || "YouTube video"}
+    class="my-4"
+  />
+)}
+
+{/* ── Annotation list ────────────────────────────────────── */}
+{node.type === "annotation-list" && (
+  <div class="my-2 rounded-md border-l-4 border-info/50 bg-info/5 p-4">
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </div>
+)}
+
+{/* ── HTML containers: columns, grid cards, generic ──────── */}
+{node.type === "html-container" && isColumns && (
+  <div class="columns-1 sm:columns-2 gap-4 [&_ul]:m-0">
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </div>
+)}
+{node.type === "html-container" && isGridCards && (
+  <Grid cols={[1, 2]} gap={4}>
+    {children
+      .filter(c => c.type === "unordered-list")
+      .flatMap(ul => ul.children || [])
+      .map(item => (
+        <div class="rounded-lg border bg-card p-4 text-card-foreground shadow-sm [&_hr]:my-3 [&_hr]:border-border">
+          {(item.children || []).map(child => <Astro.self node={child} images={images} icons={icons} />)}
+        </div>
+      ))
+    }
+  </Grid>
+)}
+{node.type === "html-container" && !isColumns && !isGridCards && (
+  <Fragment>
+    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+  </Fragment>
+)}
+
+<script>
+  import "@dogsbay/elements/db-tabs";
+</script>