@dogsbay/ui 0.2.0-beta.7 → 0.2.0-beta.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.7",
+  "version": "0.2.0-beta.72",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -10,10 +10,10 @@
     "tailwind-variants": "^0.3.0"
   },
   "peerDependencies": {
-    "astro": "^5.0.0 || ^6.0.0",
-    "@dogsbay/primitives": "0.2.0-beta.7",
-    "@dogsbay/elements": "0.2.0-beta.7",
-    "@dogsbay/icons": "0.2.0-beta.7"
+    "astro": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@dogsbay/primitives": "0.2.0-beta.72",
+    "@dogsbay/elements": "0.2.0-beta.72",
+    "@dogsbay/icons": "0.2.0-beta.72"
   },
   "optionalDependencies": {
     "shiki": "^4.0.0",

package/src/content-renderer/ContentRenderer.astro

@@ -126,7 +126,7 @@ function inlineToHtml(nodes: InlineNode[]): string {
       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 "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 "html-inline": return String(n.html || "");
       case "break": return "<br>";
@@ -142,6 +142,26 @@ function resolveImage(src: string): ImageMetadata | undefined {
   const clean = normalized.replace(/#.*$/, "");
   return images[clean];
 }
+
+/**
+ * Prefix Astro's `base` config (= urlBase from site.url's path)
+ * onto absolute image paths so they resolve on subpath-mounted
+ * deploys. Skip for external / data: / already-prefixed URLs.
+ * See plans/content-assets-folder.md.
+ */
+function withBaseUrl(src: string | undefined): string {
+  if (!src) return "";
+  const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+  if (
+    !baseUrl ||
+    !src.startsWith("/") ||
+    src.startsWith(`${baseUrl}/`) ||
+    /^(?:[a-z]+:|\/\/)/i.test(src)
+  ) {
+    return src;
+  }
+  return `${baseUrl}${src}`;
+}
 ---
 
 {/* ── Prose ──────────────────────────────────────────────── */}
@@ -296,11 +316,14 @@ function resolveImage(src: string): ImageMetadata | undefined {
 {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) {
+  if (html.includes("<img")) {
     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;
+      // Not in the glob (SVG / PDF / build-without-optimization) —
+      // prefix BASE_URL so absolute paths resolve on subpath deploys.
+      const prefixed = withBaseUrl(src);
+      return prefixed === src ? _match : `src="${prefixed}"`;
     });
   }
   return <Fragment set:html={html} />;

package/src/content-renderer/InlineRenderer.astro

@@ -47,6 +47,24 @@ function resolveImage(src: string): ImageMetadata | undefined {
 
 const resolvedImg = node.type === "image" ? resolveImage(node.src as string || "") : undefined;
 
+// When the image isn't in the glob map (SVG, PDF, or built with
+// imageOptimization: false), the `<img src={node.src}>` fallback
+// fires below. Prefix Astro's `base` for absolute paths so they
+// resolve on subpath-mounted deploys. See plans/content-assets-folder.md.
+function withBaseUrl(src: string | undefined): string {
+  if (!src) return "";
+  const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+  if (
+    !baseUrl ||
+    !src.startsWith("/") ||
+    src.startsWith(`${baseUrl}/`) ||
+    /^(?:[a-z]+:|\/\/)/i.test(src)
+  ) {
+    return src;
+  }
+  return `${baseUrl}${src}`;
+}
+
 // Icon resolution
 const iconSvg = node.type === "icon" && icons
   ? icons.resolve(node.library || "emoji", node.name, node.variant, node.size) as string | null
@@ -90,7 +108,7 @@ const isEmojiIcon = node.type === "icon" && (node.library === "emoji" || (iconSv
 )}
 {node.type === "image" && !resolvedImg && (
   <img
-    src={node.src}
+    src={withBaseUrl(node.src as string | undefined)}
     alt={node.alt || ""}
     title={node.title}
     width={node.width}

package/src/icon/Icon.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Icon — render an icon by name from any Iconify pack (defaults
+ * to Lucide).
+ *
+ * Resolves at BUILD time via `@dogsbay/icons`'s registry — the
+ * SVG is inlined into the static HTML, so there's no client-side
+ * fetch and no FOUC. Tree-shakeable: only icons actually used in
+ * pages get inlined, since Astro statically evaluates the
+ * resolution per template instance.
+ *
+ * Usage:
+ *
+ *   <Icon name="rocket" />              // bare → Lucide rocket
+ *   <Icon name="lucide:book-open" />    // explicit pack
+ *   <Icon name="mdi:home" />            // Material Design Icons
+ *   <Icon name="simple-icons:github" /> // brand icons
+ *   <Icon name="rocket" class="size-5 text-primary" />
+ *
+ * Bare names check the emoji map first (so `rocket` → 🚀
+ * matches existing inline-icon behaviour), then fall through to
+ * Lucide. When the icon doesn't exist anywhere, the component
+ * renders nothing — silent fallback rather than a broken-image
+ * box, since icons are decorative and consistent typography is
+ * preferable to a placeholder.
+ *
+ * Accessibility: when `alt` is supplied, the icon is announced
+ * to screen readers as a labelled image. Without `alt` (the
+ * default), the SVG is `aria-hidden` because most icons in this
+ * codebase are paired with adjacent text that already conveys
+ * the meaning. Pass `alt=""` explicitly to force the
+ * decorative-only state when needed by external tooling.
+ */
+import { resolveIcon } from "@dogsbay/icons";
+
+interface Props {
+  /**
+   * Icon shorthand. Either bare (`rocket`, `book-open`) or
+   * namespaced (`pack:name`). See file header for examples.
+   */
+  name: string;
+  /** Tailwind class string. Defaults to `size-4` for inline-text sizing. */
+  class?: string;
+  /**
+   * Accessible label. Set to a non-empty string for icons that
+   * convey information without surrounding text. Leave undefined
+   * (or pass empty string) for decorative icons paired with a
+   * text label.
+   */
+  alt?: string;
+}
+
+const { name, class: className = "size-4", alt } = Astro.props;
+const svg = resolveIcon(name);
+const labelled = typeof alt === "string" && alt.length > 0;
+---
+
+{
+  svg ? (
+    svg.startsWith("<") ? (
+      <span
+        class:list={["inline-flex shrink-0", className]}
+        role={labelled ? "img" : undefined}
+        aria-label={labelled ? alt : undefined}
+        aria-hidden={labelled ? undefined : "true"}
+        set:html={svg}
+        data-icon={name}
+      />
+    ) : (
+      // Emoji fallback — `svg` is actually a Unicode character
+      // when the name resolved against the emoji map (e.g.
+      // `rocket` → 🚀). Render it as text so font emoji shows.
+      <span
+        class:list={["inline-flex shrink-0", className]}
+        role={labelled ? "img" : undefined}
+        aria-label={labelled ? alt : undefined}
+        aria-hidden={labelled ? undefined : "true"}
+        data-icon={name}
+      >
+        {svg}
+      </span>
+    )
+  ) : null
+}

package/src/icon/index.ts

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

package/src/image/Image.astro

@@ -47,6 +47,27 @@ const captionText = caption || title;
 const w = width || (imageData ? imageData.width : undefined);
 const h = height || (imageData ? imageData.height : undefined);
 
+// When `imageData` is unavailable (image not in import.meta.glob —
+// e.g. SVG, PDF, or build-time `imageOptimization: false`), the
+// `<img src={src}>` fallback fires with the raw markdown src. For
+// absolute paths like `/_assets/foo.png`, we need to prefix with
+// Astro's `base` so the URL resolves on subpath-mounted deploys
+// (GH Pages project pages, multi-mount Cloudflare).
+//
+// `<AstroImage>` does this automatically; raw `<img>` does not.
+//
+// Skip prefixing for: external URLs (http/https), data: URIs,
+// and paths that already start with `import.meta.env.BASE_URL`
+// (defensive; shouldn't normally happen).
+const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+const resolvedSrc =
+  baseUrl &&
+  src.startsWith("/") &&
+  !src.startsWith(`${baseUrl}/`) &&
+  !/^(?:[a-z]+:|\/\/)/i.test(src)
+    ? `${baseUrl}${src}`
+    : src;
+
 const alignClass = align === "left"
   ? "float-left mr-4 mb-2"
   : align === "right"
@@ -71,7 +92,7 @@ const alignClass = align === "left"
       />
     ) : (
       <img
-        src={src}
+        src={resolvedSrc}
         alt={alt}
         title={title}
         width={w}
@@ -102,7 +123,7 @@ const alignClass = align === "left"
   />
 ) : (
   <img
-    src={src}
+    src={resolvedSrc}
     alt={alt}
     title={title}
     width={w}