@dogsbay/ui 0.2.0-beta.0

package/src/content-renderer/InlineRenderer.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * InlineRenderer — renders structured InlineNode[] to HTML elements.
+ */
+import MathKatex from "../math/MathKatex.astro";
+
+interface InlineNode {
+  type: string;
+  text?: string;
+  bold?: boolean;
+  italic?: boolean;
+  strikethrough?: boolean;
+  href?: string;
+  title?: string;
+  src?: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  label?: string;
+  content?: string;
+  keys?: string[];
+  html?: string;
+  latex?: string;
+  name?: string;
+  library?: string;
+  variant?: string;
+  size?: string;
+  attrs?: Record<string, string>;
+  children?: InlineNode[];
+}
+
+interface Props {
+  node: InlineNode;
+  icons?: any;
+  images?: Record<string, ImageMetadata>;
+}
+
+const { node, icons, images = {} } = Astro.props;
+
+// Resolve inline image to optimized version if available
+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];
+}
+
+const resolvedImg = node.type === "image" ? resolveImage(node.src as string || "") : undefined;
+
+// Icon resolution
+const iconSvg = node.type === "icon" && icons
+  ? icons.resolve(node.library || "emoji", node.name, node.variant, node.size) as string | null
+  : null;
+const isEmojiIcon = node.type === "icon" && (node.library === "emoji" || (iconSvg && iconSvg.length <= 4 && !iconSvg.startsWith("<")));
+---
+
+{node.type === "text" && (() => {
+  const cls: string[] = [];
+  if (node.bold) cls.push("font-semibold");
+  if (node.italic) cls.push("italic");
+  if (node.strikethrough) cls.push("line-through");
+  if (cls.length > 0) {
+    return <span class={cls.join(" ")}>{node.text}</span>;
+  }
+  return <Fragment>{node.text}</Fragment>;
+})()}
+
+{node.type === "highlight" && (
+  <mark class="rounded-sm bg-yellow-200/60 px-0.5 dark:bg-yellow-500/30">
+    {(node.children || []).map(child => <Astro.self node={child} icons={icons} images={images} />)}
+  </mark>
+)}
+
+{node.type === "link" && (
+  <a href={node.href} title={node.title}>
+    {(node.children || []).map(child => <Astro.self node={child} icons={icons} images={images} />)}
+  </a>
+)}
+
+{node.type === "image" && resolvedImg && (
+  <img
+    src={resolvedImg.src}
+    alt={node.alt || ""}
+    title={node.title}
+    width={node.width || resolvedImg.width}
+    height={node.height || resolvedImg.height}
+    loading="lazy"
+    decoding="async"
+  />
+)}
+{node.type === "image" && !resolvedImg && (
+  <img
+    src={node.src}
+    alt={node.alt || ""}
+    title={node.title}
+    width={node.width}
+    height={node.height}
+    loading="lazy"
+    decoding="async"
+  />
+)}
+
+{node.type === "code" && (
+  <code class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm text-foreground">{node.text}</code>
+)}
+
+{node.type === "footnote-ref" && (
+  <a
+    data-footnote
+    data-label={node.label}
+    data-content={node.content || ""}
+    href={`#fn-${node.label}`}
+    id={`fnref-${node.label}`}
+    class="no-underline"
+  >
+    <sup class="cursor-pointer text-primary hover:underline">[{node.label}]</sup>
+  </a>
+)}
+
+{node.type === "kbd" && (
+  <span class="inline-flex items-center gap-0.5">
+    {(node.keys || []).map((key, i) => (
+      <Fragment>
+        {i > 0 && <span class="text-muted-foreground text-xs">+</span>}
+        <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono font-medium shadow-sm">{key}</kbd>
+      </Fragment>
+    ))}
+  </span>
+)}
+
+{node.type === "math" && (
+  <MathKatex latex={node.latex as string || ""} />
+)}
+
+{node.type === "icon" && !iconSvg && (
+  <span>:{node.name as string}:</span>
+)}
+{node.type === "icon" && iconSvg && isEmojiIcon && (
+  <span>{iconSvg}</span>
+)}
+{node.type === "icon" && iconSvg && !isEmojiIcon && (
+  <span class:list={["inline-flex items-baseline [&>svg]:h-[1em] [&>svg]:w-[1em]", (node.attrs as Record<string, string>)?.class]} set:html={iconSvg} />
+)}
+
+{node.type === "html-inline" && (
+  <Fragment set:html={node.html} />
+)}
+
+{node.type === "break" && <br />}

package/src/context-menu/ContextMenu.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const contextMenu = tv({
+  base: "relative",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={contextMenu({ class: className })}
+  data-component="context-menu"
+  {...rest}
+>
+  <slot />
+</div>

package/src/context-menu/ContextMenuContent.astro

@@ -0,0 +1,24 @@
+---
+import { tv } from "tailwind-variants";
+
+const contextMenuContent = tv({
+  base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={contextMenuContent({ class: className })}
+  data-part="content"
+  role="menu"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/context-menu/ContextMenuItem.astro

@@ -0,0 +1,49 @@
+---
+import { tv, type VariantProps } from "tailwind-variants";
+
+const contextMenuItem = tv({
+  base: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  variants: {
+    variant: {
+      default: "",
+      destructive:
+        "text-destructive focus:bg-destructive focus:text-destructive-foreground",
+    },
+    inset: {
+      true: "pl-8",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type Variants = VariantProps<typeof contextMenuItem>;
+
+interface Props {
+  variant?: Variants["variant"];
+  inset?: boolean;
+  disabled?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "default",
+  inset = false,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={contextMenuItem({ variant, inset: inset || undefined, class: className })}
+  data-part="item"
+  role="menuitem"
+  tabindex="-1"
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  <slot />
+</div>

package/src/context-menu/ContextMenuSeparator.astro

@@ -0,0 +1,14 @@
+---
+import { tv } from "tailwind-variants";
+
+const sep = tv({ base: "-mx-1 my-1 h-px bg-muted" });
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={sep({ class: className })} role="separator" {...rest}></div>

package/src/context-menu/ContextMenuShortcut.astro

@@ -0,0 +1,14 @@
+---
+import { tv } from "tailwind-variants";
+
+const shortcut = tv({ base: "ml-auto text-xs tracking-widest text-muted-foreground" });
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<span class={shortcut({ class: className })} {...rest}><slot /></span>

package/src/context-menu/ContextMenuTrigger.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const contextMenuTrigger = tv({
+  base: "",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={contextMenuTrigger({ class: className })}
+  data-part="trigger"
+  {...rest}
+>
+  <slot />
+</div>

package/src/context-menu/context-menu.ts

@@ -0,0 +1,238 @@
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { createPortal } from "@dogsbay/primitives/portal";
+import { Typeahead } from "@dogsbay/primitives/typeahead";
+
+interface ContextMenuInstance {
+  root: HTMLElement;
+  trigger: HTMLElement;
+  content: HTMLElement;
+  items: HTMLElement[];
+  dismiss: DismissController;
+  typeahead: Typeahead;
+  cleanupPortal: (() => void) | null;
+  open: boolean;
+  highlightedIndex: number;
+}
+
+const instances = new WeakMap<HTMLElement, ContextMenuInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function getEnabledItems(items: HTMLElement[]): HTMLElement[] {
+  return items.filter((item) => item.getAttribute("data-disabled") !== "true");
+}
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const trigger = root.querySelector<HTMLElement>("[data-part='trigger']");
+  const content = root.querySelector<HTMLElement>("[data-part='content']");
+  if (!trigger || !content) return;
+
+  const items = Array.from(
+    content.querySelectorAll<HTMLElement>("[data-part='item']"),
+  );
+
+  const menuId = uniqueId("base-context-menu");
+  content.id = content.id || `${menuId}-menu`;
+
+  items.forEach((item, i) => {
+    item.id = item.id || `${menuId}-item-${i}`;
+    item.setAttribute("tabindex", "-1");
+  });
+
+  const typeahead = new Typeahead({
+    onMatch: (index) => {
+      const enabled = getEnabledItems(items);
+      if (index < enabled.length) {
+        highlightItem(instance, items.indexOf(enabled[index]));
+      }
+    },
+    getItemText: (i) => getEnabledItems(items)[i]?.textContent?.trim() || "",
+    getItemCount: () => getEnabledItems(items).length,
+  });
+
+  const instance: ContextMenuInstance = {
+    root,
+    trigger,
+    content,
+    items,
+    dismiss: new DismissController(content, {
+      onDismiss: () => close(instance),
+    }),
+    typeahead,
+    cleanupPortal: null,
+    open: false,
+    highlightedIndex: -1,
+  };
+
+  instances.set(root, instance);
+
+  // Right-click opens context menu
+  trigger.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    open(instance, e.clientX, e.clientY);
+  });
+
+  // Keyboard navigation inside menu
+  content.addEventListener("keydown", (e) => {
+    if (!instance.open) return;
+
+    const enabled = getEnabledItems(items);
+    if (enabled.length === 0) return;
+
+    const current = instance.highlightedIndex >= 0 ? items[instance.highlightedIndex] : null;
+    const currentEnabled = current ? enabled.indexOf(current) : -1;
+
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = currentEnabled < enabled.length - 1 ? currentEnabled + 1 : 0;
+        highlightItem(instance, items.indexOf(enabled[next]));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = currentEnabled > 0 ? currentEnabled - 1 : enabled.length - 1;
+        highlightItem(instance, items.indexOf(enabled[prev]));
+        break;
+      }
+      case "Home":
+        e.preventDefault();
+        highlightItem(instance, items.indexOf(enabled[0]));
+        break;
+      case "End":
+        e.preventDefault();
+        highlightItem(instance, items.indexOf(enabled[enabled.length - 1]));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (instance.highlightedIndex >= 0) {
+          items[instance.highlightedIndex].click();
+        }
+        close(instance);
+        break;
+      case "Tab":
+        close(instance);
+        break;
+      default:
+        if (e.key.length === 1) typeahead.handle(e.key);
+    }
+  });
+
+  // Item interactions
+  items.forEach((item) => {
+    item.addEventListener("click", () => {
+      if (item.getAttribute("data-disabled") === "true") return;
+      close(instance);
+    });
+    item.addEventListener("pointerenter", () => {
+      if (item.getAttribute("data-disabled") === "true") return;
+      highlightItem(instance, items.indexOf(item));
+    });
+    item.addEventListener("pointerleave", () => {
+      clearHighlight(instance);
+    });
+  });
+}
+
+function open(instance: ContextMenuInstance, x: number, y: number) {
+  if (instance.open) close(instance);
+  instance.open = true;
+
+  // Portal to body
+  instance.cleanupPortal = createPortal(instance.content, instance.content.id);
+
+  // Show and position at cursor
+  instance.content.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  instance.content.style.position = "fixed";
+  instance.content.style.left = `${x}px`;
+  instance.content.style.top = `${y}px`;
+
+  // Clamp to viewport
+  requestAnimationFrame(() => {
+    const rect = instance.content.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    if (rect.right > vw) {
+      instance.content.style.left = `${vw - rect.width - 4}px`;
+    }
+    if (rect.bottom > vh) {
+      instance.content.style.top = `${vh - rect.height - 4}px`;
+    }
+  });
+
+  // Focus first enabled item
+  const enabled = getEnabledItems(instance.items);
+  if (enabled.length > 0) {
+    highlightItem(instance, instance.items.indexOf(enabled[0]));
+  }
+
+  instance.dismiss.activate();
+  instance.typeahead.reset();
+}
+
+function close(instance: ContextMenuInstance) {
+  if (!instance.open) return;
+  instance.open = false;
+
+  instance.dismiss.deactivate();
+  instance.content.setAttribute("data-state", "closed");
+  instance.content.hidden = true;
+  instance.content.style.position = "";
+  instance.content.style.left = "";
+  instance.content.style.top = "";
+
+  clearHighlight(instance);
+
+  if (instance.cleanupPortal) {
+    instance.cleanupPortal();
+    instance.cleanupPortal = null;
+  }
+
+  instance.typeahead.reset();
+}
+
+function highlightItem(instance: ContextMenuInstance, index: number) {
+  if (index < 0 || index >= instance.items.length) return;
+
+  if (instance.highlightedIndex >= 0) {
+    const prev = instance.items[instance.highlightedIndex];
+    prev.removeAttribute("data-highlighted");
+    prev.setAttribute("tabindex", "-1");
+  }
+
+  instance.highlightedIndex = index;
+  const item = instance.items[index];
+  item.setAttribute("data-highlighted", "");
+  item.setAttribute("tabindex", "0");
+  item.focus();
+  item.scrollIntoView({ block: "nearest" });
+}
+
+function clearHighlight(instance: ContextMenuInstance) {
+  if (instance.highlightedIndex >= 0) {
+    const prev = instance.items[instance.highlightedIndex];
+    prev.removeAttribute("data-highlighted");
+    prev.setAttribute("tabindex", "-1");
+  }
+  instance.highlightedIndex = -1;
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='context-menu']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/context-menu/index.ts

@@ -0,0 +1,6 @@
+export { default as ContextMenu } from "./ContextMenu.astro";
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.astro";
+export { default as ContextMenuContent } from "./ContextMenuContent.astro";
+export { default as ContextMenuItem } from "./ContextMenuItem.astro";
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.astro";
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.astro";

package/src/copy-button/CopyButton.astro

@@ -0,0 +1,88 @@
+---
+import { tv } from "tailwind-variants";
+
+const copyButton = tv({
+  base: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+});
+
+interface Props {
+  text: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { text, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class={copyButton({ class: className })}
+  data-component="copy-button"
+  data-copy-text={text}
+  type="button"
+  aria-label="Copy to clipboard"
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    data-copy-icon
+    aria-hidden="true"
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+  </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    data-check-icon
+    class="hidden"
+    aria-hidden="true"
+  >
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+</button>
+
+<script>
+  function setupCopyButtons() {
+    document.querySelectorAll("[data-component='copy-button']").forEach((btn) => {
+      if ((btn as any).__copyBound) return;
+      (btn as any).__copyBound = true;
+
+      btn.addEventListener("click", async () => {
+        const text = btn.getAttribute("data-copy-text") || "";
+        try {
+          await navigator.clipboard.writeText(text);
+          const copyIcon = btn.querySelector("[data-copy-icon]") as HTMLElement;
+          const checkIcon = btn.querySelector("[data-check-icon]") as HTMLElement;
+          if (copyIcon && checkIcon) {
+            copyIcon.classList.add("hidden");
+            checkIcon.classList.remove("hidden");
+            setTimeout(() => {
+              copyIcon.classList.remove("hidden");
+              checkIcon.classList.add("hidden");
+            }, 2000);
+          }
+        } catch {
+          // Fallback: do nothing
+        }
+      });
+    });
+  }
+
+  setupCopyButtons();
+  document.addEventListener("astro:after-swap", setupCopyButtons);
+</script>

package/src/copy-button/index.ts

@@ -0,0 +1 @@
+export { default as CopyButton } from "./CopyButton.astro";

package/src/diagram/Diagram.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  lang: string;
+  code: string;
+  svg: string;
+  title?: string;
+}
+
+const { lang, svg, title } = Astro.props;
+---
+
+<figure class="diagram not-prose" data-lang={lang}>
+  {title && <figcaption class="text-sm text-muted-foreground mb-2">{title}</figcaption>}
+  <div class="diagram-content overflow-x-auto [&>svg]:mx-auto [&>svg]:max-w-full dark:invert dark:[&>svg]:hue-rotate-180" set:html={svg} />
+</figure>

package/src/diagram/index.ts

@@ -0,0 +1 @@
+export { default as Diagram } from "./Diagram.astro";

package/src/dialog/Dialog.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialog = tv({
+  base: "relative",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={dialog({ class: className })}
+  data-component="dialog"
+  {...rest}
+>
+  <slot />
+</div>