@dogsbay/ui 0.2.0-beta.0

package/src/image/Image.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * Image component — renders optimized images via Astro's Image component
+ * when imageData (from import.meta.glob) is available, falls back to <img>.
+ *
+ * Block mode wraps in <figure> with optional caption.
+ * Supports alignment (float-left, float-right, center).
+ */
+import { Image as AstroImage } from "astro:assets";
+
+interface Props {
+  src: string;
+  alt?: string;
+  title?: string;
+  width?: number;
+  height?: number;
+  /** Resolved ImageMetadata from import.meta.glob (enables Astro optimization) */
+  imageData?: ImageMetadata;
+  /** Render as block-level <figure> with optional caption */
+  block?: boolean;
+  /** Caption text (uses title if not provided) */
+  caption?: string;
+  /** Alignment: left, right, center */
+  align?: "left" | "right" | "center";
+  class?: string;
+}
+
+// Spread `...rest` so plugins can attach arbitrary `data-*` /
+// `aria-*` attrs at the BlockImage call site and have them
+// forwarded onto the inner <img> tag (e.g.
+// @dogsbay/plugin-image-zoom adds `data-zoomable="true"`).
+const {
+  src,
+  alt = "",
+  title,
+  width,
+  height,
+  imageData,
+  block = false,
+  caption,
+  align,
+  class: className,
+  ...rest
+} = Astro.props as Props & Record<string, unknown>;
+
+const captionText = caption || title;
+const w = width || (imageData ? imageData.width : undefined);
+const h = height || (imageData ? imageData.height : undefined);
+
+const alignClass = align === "left"
+  ? "float-left mr-4 mb-2"
+  : align === "right"
+    ? "float-right ml-4 mb-2"
+    : align === "center"
+      ? "mx-auto"
+      : "";
+---
+
+{block ? (
+  <figure class:list={["my-4", alignClass, className]}>
+    {imageData ? (
+      <AstroImage
+        src={imageData}
+        alt={alt}
+        title={title}
+        width={w}
+        height={h}
+        class="rounded-lg border"
+        loading="lazy"
+        decoding="async"
+      />
+    ) : (
+      <img
+        src={src}
+        alt={alt}
+        title={title}
+        width={w}
+        height={h}
+        class="rounded-lg border"
+        loading="lazy"
+        decoding="async"
+        {...rest}
+      />
+    )}
+    {captionText && (
+      <figcaption class="mt-2 text-center text-sm text-muted-foreground">
+        {captionText}
+      </figcaption>
+    )}
+  </figure>
+) : imageData ? (
+  <AstroImage
+    src={imageData}
+    alt={alt}
+    title={title}
+    width={w}
+    height={h}
+    loading="lazy"
+    decoding="async"
+    class:list={[alignClass, className]}
+    {...rest}
+  />
+) : (
+  <img
+    src={src}
+    alt={alt}
+    title={title}
+    width={w}
+    height={h}
+    loading="lazy"
+    decoding="async"
+    class:list={[alignClass, className]}
+    {...rest}
+  />
+)}

package/src/image/index.ts

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

package/src/input/Input.astro

@@ -0,0 +1,34 @@
+---
+import { tv } from "tailwind-variants";
+
+const input = tv({
+  base: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-destructive data-[invalid]:focus-visible:ring-destructive",
+  variants: {
+    invalid: {
+      true: "border-destructive focus-visible:ring-destructive",
+    },
+  },
+});
+
+interface Props {
+  type?: string;
+  invalid?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  type = "text",
+  invalid = false,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<input
+  class={input({ invalid: invalid || undefined, class: className })}
+  type={type}
+  aria-invalid={invalid ? "true" : undefined}
+  data-invalid={invalid || undefined}
+  {...rest}
+/>

package/src/input/index.ts

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

package/src/kbd/Kbd.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+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",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<kbd class={kbd({ class: className })} {...rest}>
+  <slot />
+</kbd>

package/src/kbd/index.ts

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

package/src/label/Label.astro

@@ -0,0 +1,17 @@
+---
+import { tv } from "tailwind-variants";
+
+const label = tv({
+  base: "block text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+const { class: className, ...rest } = Astro.props;
+---
+
+<label class={label({ class: className })} {...rest}>
+  <slot />
+</label>

package/src/label/index.ts

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

package/src/link-card/LinkCard.astro

@@ -0,0 +1,47 @@
+---
+import { tv } from "tailwind-variants";
+
+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",
+});
+
+const linkCardTitle = tv({
+  base: "text-sm font-semibold group-hover:underline",
+});
+
+const linkCardDescription = tv({
+  base: "text-sm text-muted-foreground",
+});
+
+interface Props {
+  title: string;
+  description?: string;
+  href: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { title, description, href, 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>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
+      aria-hidden="true"
+    >
+      <polyline points="9 18 15 12 9 6"></polyline>
+    </svg>
+  </div>
+  {description && <p class={linkCardDescription()}>{description}</p>}
+</a>

package/src/link-card/index.ts

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

package/src/map-view/MapView.astro

@@ -0,0 +1,88 @@
+---
+import { tv } from "tailwind-variants";
+
+const mapView = tv({
+  base: "relative overflow-hidden rounded-lg border",
+});
+
+interface Marker {
+  id: string;
+  coordinates: [number, number]; // [lng, lat]
+  title: string;
+  category?: string;
+  color?: string;
+  href?: string;
+}
+
+interface GeoJsonOverlay {
+  id: string;
+  data: object;
+  lineColor?: string;
+  lineWidth?: number;
+}
+
+interface Props {
+  /** Initial center [longitude, latitude] */
+  center?: [number, number];
+  /** Initial zoom level */
+  zoom?: number;
+  /** Map height */
+  height?: string;
+  /** PMTiles URL for offline tiles */
+  pmtilesUrl?: string;
+  /** Tile URL template (fallback if no PMTiles) */
+  tileUrl?: string;
+  /** Array of markers to display */
+  markers?: Marker[];
+  /** GeoJSON line/polygon overlays */
+  overlays?: GeoJsonOverlay[];
+  /** Show GPS location dot */
+  showLocation?: boolean;
+  /** Show attribution */
+  attribution?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const {
+  center = [0, 0],
+  zoom = 13,
+  height = "400px",
+  pmtilesUrl,
+  tileUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+  markers = [],
+  overlays = [],
+  showLocation = false,
+  attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={mapView({ class: className })}
+  data-component="map-view"
+  data-center={JSON.stringify(center)}
+  data-zoom={zoom}
+  data-pmtiles-url={pmtilesUrl}
+  data-tile-url={tileUrl}
+  data-markers={JSON.stringify(markers)}
+  data-overlays={JSON.stringify(overlays)}
+  data-show-location={showLocation || undefined}
+  data-attribution={attribution}
+  style={`height: ${height}`}
+  {...rest}
+>
+  <div data-part="map" class="h-full w-full"></div>
+  {showLocation && (
+    <button
+      data-part="locate"
+      class="absolute bottom-4 right-4 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background shadow-md transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      type="button"
+      aria-label="Show my location"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v4"/><path d="M12 18v4"/><path d="M2 12h4"/><path d="M18 12h4"/></svg>
+    </button>
+  )}
+  <slot />
+</div>

package/src/map-view/index.ts

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

package/src/map-view/map-view.ts

@@ -0,0 +1,194 @@
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface MarkerData {
+  id: string;
+  coordinates: [number, number];
+  title: string;
+  category?: string;
+  color?: string;
+  href?: string;
+}
+
+interface OverlayData {
+  id: string;
+  data: object;
+  lineColor?: string;
+  lineWidth?: number;
+}
+
+function init(root: HTMLElement) {
+  if (root.hasAttribute("data-initialized")) return;
+  root.setAttribute("data-initialized", "");
+
+  const mapContainer = root.querySelector<HTMLElement>("[data-part='map']");
+  if (!mapContainer) return;
+
+  const center = JSON.parse(root.getAttribute("data-center") || "[0,0]") as [number, number];
+  const zoom = Number(root.getAttribute("data-zoom") || "13");
+  const tileUrl = root.getAttribute("data-tile-url") || "";
+  const attribution = root.getAttribute("data-attribution") || "";
+  const markers: MarkerData[] = JSON.parse(root.getAttribute("data-markers") || "[]");
+  const overlays: OverlayData[] = JSON.parse(root.getAttribute("data-overlays") || "[]");
+  const showLocation = root.hasAttribute("data-show-location");
+
+  // Create map with raster tile source
+  const map = new maplibregl.Map({
+    container: mapContainer,
+    style: {
+      version: 8,
+      sources: {
+        "osm-tiles": {
+          type: "raster",
+          tiles: [tileUrl],
+          tileSize: 256,
+          attribution,
+        },
+      },
+      layers: [
+        {
+          id: "osm-tiles",
+          type: "raster",
+          source: "osm-tiles",
+          minzoom: 0,
+          maxzoom: 19,
+        },
+      ],
+    },
+    center,
+    zoom,
+    attributionControl: true,
+  });
+
+  // Add navigation controls
+  map.addControl(new maplibregl.NavigationControl(), "top-right");
+
+  map.on("load", () => {
+    // Add GeoJSON overlays
+    for (const overlay of overlays) {
+      map.addSource(overlay.id, {
+        type: "geojson",
+        data: overlay.data as GeoJSON.GeoJSON,
+      });
+
+      map.addLayer({
+        id: `${overlay.id}-line`,
+        type: "line",
+        source: overlay.id,
+        layout: {
+          "line-join": "round",
+          "line-cap": "round",
+        },
+        paint: {
+          "line-color": overlay.lineColor || "#3b82f6",
+          "line-width": overlay.lineWidth || 4,
+          "line-opacity": 0.8,
+        },
+      });
+    }
+
+    // Add markers
+    for (const marker of markers) {
+      const el = document.createElement("div");
+      el.className = "map-marker";
+      el.style.cssText = `
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: ${marker.color || "#3b82f6"};
+        border: 3px solid white;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+        cursor: pointer;
+      `;
+
+      const popup = new maplibregl.Popup({ offset: 20 }).setHTML(
+        marker.href
+          ? `<a href="${marker.href}" style="font-weight:600;font-size:14px;color:inherit;text-decoration:none">${marker.title}</a>`
+          : `<strong style="font-size:14px">${marker.title}</strong>`,
+      );
+
+      new maplibregl.Marker({ element: el })
+        .setLngLat(marker.coordinates)
+        .setPopup(popup)
+        .addTo(map);
+    }
+  });
+
+  // GPS location
+  if (showLocation) {
+    let locationMarker: maplibregl.Marker | null = null;
+    let accuracyCircle: string | null = null;
+
+    const locateBtn = root.querySelector<HTMLElement>("[data-part='locate']");
+
+    function updateLocation(position: GeolocationPosition) {
+      const { longitude, latitude, accuracy } = position.coords;
+
+      if (!locationMarker) {
+        // Blue dot
+        const dot = document.createElement("div");
+        dot.style.cssText = `
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: #3b82f6;
+          border: 3px solid white;
+          box-shadow: 0 0 8px rgba(59,130,246,0.5);
+        `;
+        locationMarker = new maplibregl.Marker({ element: dot })
+          .setLngLat([longitude, latitude])
+          .addTo(map);
+      } else {
+        locationMarker.setLngLat([longitude, latitude]);
+      }
+
+      // Dispatch event for other components
+      root.dispatchEvent(
+        new CustomEvent("location", {
+          detail: { longitude, latitude, accuracy },
+          bubbles: true,
+        }),
+      );
+    }
+
+    function locate() {
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          updateLocation(pos);
+          map.flyTo({
+            center: [pos.coords.longitude, pos.coords.latitude],
+            zoom: 15,
+          });
+        },
+        () => {
+          root.dispatchEvent(
+            new CustomEvent("location-error", { bubbles: true }),
+          );
+        },
+        { enableHighAccuracy: true, timeout: 10000 },
+      );
+    }
+
+    locateBtn?.addEventListener("click", locate);
+
+    // Watch position continuously
+    if ("geolocation" in navigator) {
+      navigator.geolocation.watchPosition(updateLocation, () => {}, {
+        enableHighAccuracy: true,
+        maximumAge: 5000,
+        timeout: 15000,
+      });
+    }
+  }
+}
+
+function initAll() {
+  document.querySelectorAll<HTMLElement>("[data-component='map-view']").forEach(init);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initAll);
+} else {
+  initAll();
+}
+document.addEventListener("astro:page-load", initAll);

package/src/markdown-example/MarkdownExample.astro

@@ -0,0 +1,138 @@
+---
+/**
+ * Live markdown example — shows rendered output, expandable source, and
+ * optional plain-markdown fallback.
+ *
+ * Used in documentation sites that document markdown dialects. The preview
+ * (slot) is pre-rendered by the pipeline. This component provides the
+ * surrounding chrome and optionally a fallback panel computed at build time
+ * via plain markdown-it.
+ *
+ * Usage in Dogsbay MD content:
+ *   :::example
+ *   > [!NOTE]
+ *   > This is a note.
+ *   :::
+ *
+ *   :::example{title="With fallback" fallback=true}
+ *   ...content...
+ *   :::
+ */
+import MarkdownIt from "markdown-it";
+import mdAttrs from "markdown-it-attrs";
+import mdDeflist from "markdown-it-deflist";
+
+interface Props {
+  /** Raw source text (set automatically by format-astro from :::example node) */
+  source: string;
+  /** Optional example title shown above the preview */
+  title?: string;
+  /** Render a plain-markdown fallback panel showing graceful degradation */
+  showFallback?: boolean;
+}
+
+const { source, title, showFallback = false } = Astro.props;
+
+// Plain-markdown fallback view at build time
+let fallbackHtml = "";
+if (showFallback) {
+  const md = new MarkdownIt({ html: false, linkify: true, breaks: false })
+    .use(mdAttrs, { leftDelimiter: "{", rightDelimiter: "}" })
+    .use(mdDeflist);
+  fallbackHtml = md.render(source);
+}
+---
+
+<figure class="my-6 overflow-hidden rounded-lg border border-border bg-card">
+  {title && (
+    <figcaption class="border-b border-border bg-muted/30 px-4 py-2 text-sm font-medium">
+      {title}
+    </figcaption>
+  )}
+
+  <div class="border-b border-border">
+    <div class="border-b border-border bg-muted/10 px-4 py-1 text-[11px] uppercase tracking-wide text-muted-foreground">
+      Rendered
+    </div>
+    <div class="markdown-preview p-6">
+      <slot />
+    </div>
+  </div>
+
+  <details class="group">
+    <summary class="flex cursor-pointer list-none select-none items-center gap-2 px-4 py-2 text-xs text-muted-foreground hover:text-foreground">
+      <svg
+        class="h-3 w-3 transition-transform group-open:rotate-90"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+      <span class="uppercase tracking-wide">Source</span>
+    </summary>
+    <pre class="m-0 overflow-auto border-t border-border bg-muted/20 p-4 text-xs"><code>{source}</code></pre>
+  </details>
+
+  {showFallback && (
+    <div class="border-t border-border">
+      <div class="bg-muted/10 px-4 py-1 text-[11px] uppercase tracking-wide text-muted-foreground">
+        Plain markdown fallback
+      </div>
+      <div
+        class="plain-markdown p-6 text-sm"
+        set:html={fallbackHtml}
+      />
+    </div>
+  )}
+</figure>
+
+<style>
+  .markdown-preview :global(> *:first-child) {
+    margin-top: 0;
+  }
+  .markdown-preview :global(> *:last-child) {
+    margin-bottom: 0;
+  }
+
+  .plain-markdown :global(> *:first-child) {
+    margin-top: 0;
+  }
+  .plain-markdown :global(> *:last-child) {
+    margin-bottom: 0;
+  }
+  .plain-markdown :global(p) {
+    margin: 0.5rem 0;
+  }
+  .plain-markdown :global(blockquote) {
+    border-left: 3px solid var(--border);
+    padding-left: 1rem;
+    color: var(--muted-foreground);
+    margin: 0.5rem 0;
+  }
+  .plain-markdown :global(dl dt) {
+    font-weight: 600;
+    margin-top: 0.5rem;
+  }
+  .plain-markdown :global(dl dd) {
+    margin-left: 1rem;
+    color: var(--muted-foreground);
+  }
+  .plain-markdown :global(code) {
+    background: var(--muted);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.85em;
+  }
+  .plain-markdown :global(pre) {
+    background: var(--muted);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    font-size: 0.85em;
+  }
+</style>

package/src/markdown-example/index.ts

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