blume 0.0.0 → 0.1.1

package/src/components/content/Card.astro

@@ -0,0 +1,104 @@
+---
+import Icon from "../Icon.astro";
+
+interface Props {
+  title?: string;
+  href?: string;
+  icon?: string;
+  iconType?: string;
+  img?: string;
+  horizontal?: boolean | string;
+  cta?: string;
+  arrow?: boolean | string;
+  type?: "info" | "warning" | "note" | "tip" | "check" | "danger";
+  color?: string;
+}
+
+const { arrow, color, cta, horizontal, href, icon, iconType, img, title, type } =
+  Astro.props;
+const Tag = href ? "a" : "div";
+const external = href?.startsWith("http");
+const isHorizontal = horizontal === true || horizontal === "true";
+const showArrow =
+  href && arrow === undefined ? external : arrow === true || arrow === "true";
+const iconByType = {
+  check: "circle-check",
+  danger: "circle-x",
+  info: "info",
+  note: "info",
+  tip: "lightbulb",
+  warning: "triangle-alert",
+};
+const iconClass = {
+  check: "text-green-600 dark:text-green-400",
+  danger: "text-red-600 dark:text-red-400",
+  info: "text-blue-600 dark:text-blue-400",
+  note: "text-muted-foreground/70",
+  tip: "text-accent",
+  warning: "text-amber-600 dark:text-amber-400",
+};
+const iconName = icon ?? (type ? iconByType[type] : undefined);
+const variantClass = {
+  check: "border-green-500/30 bg-green-500/10",
+  danger: "border-red-500/30 bg-red-500/10",
+  info: "border-blue-500/30 bg-blue-500/10",
+  note: "border-border bg-muted/40",
+  tip: "border-accent/30 bg-accent/10",
+  warning: "border-amber-500/30 bg-amber-500/10",
+}[type ?? "note"];
+---
+
+<Tag
+  class:list={[
+    "not-prose block overflow-hidden rounded-blume border text-inherit no-underline! transition-colors hover:no-underline! hover:[&[href]]:border-accent",
+    type ? variantClass : "border-border bg-background",
+    isHorizontal ? "sm:flex" : "",
+  ]}
+  data-blume-card
+  href={href}
+  rel={external ? "noreferrer" : undefined}
+  target={external ? "_blank" : undefined}
+>
+  {
+    img && (
+      <img
+        alt=""
+        class:list={[
+          "w-full object-cover",
+          isHorizontal ? "sm:w-40 sm:shrink-0" : "max-h-48",
+        ]}
+        src={img}
+      />
+    )
+  }
+  <div class="p-5">
+  {
+    iconName && (
+      <div class:list={["mb-2.5", color ? "" : type ? iconClass[type] : "text-accent"]}>
+        <Icon color={color} iconType={iconType} name={iconName} size={20} />
+      </div>
+    )
+  }
+  {
+    title && (
+      <p class="mt-0! mb-1.5! flex items-center gap-1.5 font-medium text-foreground">
+        {title}
+        {showArrow && (
+          <Icon class="text-muted-foreground" name="arrow-right" size={14} />
+        )}
+      </p>
+    )
+  }
+  <div class="font-normal text-muted-foreground text-sm [&>:first-child]:mt-0! [&>:last-child]:mb-0!">
+    <slot />
+  </div>
+  {
+    cta && (
+      <p class="mt-4! mb-0! flex items-center gap-1.5 font-medium text-accent text-sm">
+        {cta}
+        {showArrow && <Icon name="arrow-right" size={14} />}
+      </p>
+    )
+  }
+  </div>
+</Tag>

package/src/components/content/CardGroup.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  cols?: number;
+}
+
+const { cols = 2 } = Astro.props;
+---
+
+<div
+  class="not-prose my-6 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(var(--blume-cols),minmax(0,1fr))]"
+  style={`--blume-cols:${cols}`}
+>
+  <slot />
+</div>

package/src/components/content/CodeBlock.astro

@@ -0,0 +1,28 @@
+---
+// Render a code string highlighted with Blume's Markdown code-block theme — the
+// same Shiki themes, transformers, and dual light/dark swap as fenced code.
+// Use it to show themed code outside the Markdown pipeline (a landing page, a
+// custom component) where there's no fence to write.
+//
+//   <CodeBlock lang="ts" code={`export const x = 1;`} />
+//
+// The theme's code styles are scoped to `.prose`, so the output is wrapped in a
+// `.prose` container (`max-w-none` so it fills its own column rather than the
+// prose reading measure); that's what makes the light/dark swap work on a bare
+// page without the manual `[data-theme]` CSS it would otherwise need.
+import { highlightCode } from "../../markdown/index.ts";
+
+interface Props {
+  /** The source to highlight. */
+  code: string;
+  /** Shiki language id (default `txt`); an unknown one renders plain. */
+  lang?: string;
+  /** Show the brand language icon in the header (default on, like fences). */
+  icons?: boolean;
+}
+
+const { code, lang = "txt", icons } = Astro.props;
+const html = await highlightCode(code.replace(/\n+$/u, ""), lang, { icons });
+---
+
+<div class="prose max-w-none"><Fragment set:html={html} /></div>

package/src/components/content/CodeGroup.astro

@@ -0,0 +1,13 @@
+---
+import Tabs from "./Tabs.astro";
+
+interface Props {
+  dropdown?: boolean;
+}
+
+const { dropdown = false } = Astro.props;
+---
+
+<Tabs dropdown={dropdown} hash={false}>
+  <slot />
+</Tabs>

package/src/components/content/Color.astro

@@ -0,0 +1,15 @@
+---
+const { variant = "compact" } = Astro.props;
+---
+
+<div
+  class:list={[
+    "not-prose my-6",
+    variant === "table"
+      ? "space-y-4"
+      : "grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-4",
+  ]}
+  data-blume-color={variant}
+>
+  <slot />
+</div>

package/src/components/content/ColorItem.astro

@@ -0,0 +1,87 @@
+---
+interface ColorValue {
+  dark?: string;
+  light?: string;
+}
+
+interface Props {
+  name: string;
+  value: string | ColorValue;
+}
+
+const { name, value } = Astro.props;
+
+const lightValue = typeof value === "string" ? value : value.light ?? value.dark;
+const darkValue = typeof value === "string" ? value : value.dark ?? value.light;
+const displayValue =
+  lightValue && darkValue && lightValue !== darkValue
+    ? `${lightValue} / ${darkValue}`
+    : lightValue;
+---
+
+<button
+  aria-label={`Copy ${name} color ${displayValue}`}
+  class="group flex w-full min-w-0 cursor-pointer flex-col gap-2.5 text-center focus:outline-none"
+  data-blume-color-copy={displayValue}
+  style={`--blume-color-light:${lightValue};--blume-color-dark:${darkValue};`}
+  type="button"
+>
+  <span
+    class="block aspect-square w-full rounded-2xl border border-border/60 shadow-sm transition group-hover:ring-2 group-hover:ring-accent/30 group-focus-visible:ring-2 group-focus-visible:ring-accent/40"
+    data-blume-color-swatch
+    style="background:var(--blume-color-light)"
+  >
+  </span>
+  <span class="block min-w-0 leading-tight">
+    <span class="block truncate font-semibold text-foreground text-sm">
+      {name}
+    </span>
+    <span
+      class="mt-0.5 block truncate font-mono text-muted-foreground text-xs uppercase"
+      data-blume-color-status
+    >
+      {displayValue}
+    </span>
+  </span>
+</button>
+
+<style>
+  :global(.dark) [data-blume-color-swatch] {
+    background: var(--blume-color-dark, var(--blume-color-light));
+  }
+</style>
+
+<script>
+  const state = window as Window & { __blumeColorCopy?: boolean };
+  if (!state.__blumeColorCopy) {
+    state.__blumeColorCopy = true;
+    document.addEventListener("click", async (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+
+      const button = target.closest<HTMLButtonElement>("[data-blume-color-copy]");
+      if (!button) {
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(button.dataset.blumeColorCopy ?? "");
+      } catch {
+        return;
+      }
+
+      const status = button.querySelector<HTMLElement>("[data-blume-color-status]");
+      if (!status) {
+        return;
+      }
+
+      const original = status.textContent;
+      status.textContent = "Copied";
+      window.setTimeout(() => {
+        status.textContent = original;
+      }, 1500);
+    });
+  }
+</script>

package/src/components/content/ColorRow.astro

@@ -0,0 +1,10 @@
+---
+const { title } = Astro.props;
+---
+
+<div class="rounded-blume border border-border bg-background p-4">
+  {title && <p class="mt-0! mb-3! font-medium text-foreground text-sm">{title}</p>}
+  <div class="grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-4">
+    <slot />
+  </div>
+</div>

package/src/components/content/Column.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<div class="min-w-0">
+  <slot />
+</div>

package/src/components/content/Columns.astro

@@ -0,0 +1,9 @@
+---
+import CardGroup from "./CardGroup.astro";
+
+const { cols = 2 } = Astro.props;
+---
+
+<CardGroup cols={cols}>
+  <slot />
+</CardGroup>

package/src/components/content/Component.astro

@@ -0,0 +1,65 @@
+---
+// Render an example file (under the project's `examples/` dir) as a live,
+// hydrated preview alongside its highlighted source, in tabs. `path` is the
+// file's location under `examples/` without its extension, e.g.
+// `<Component path="forms/login" />` for `examples/forms/login.tsx`.
+//
+// Blume discovers `examples/` at build time and generates `blume:examples`: a
+// map of path → { Component (a static hydration wrapper), code, lang }. React,
+// Vue, Svelte, and Astro examples are all supported. The source is highlighted
+// with the same Shiki setup as ordinary code fences.
+import { highlightCode } from "../../markdown/index.ts";
+import Tab from "./Tab.astro";
+import Tabs from "./Tabs.astro";
+// Generated per project; resolves to an empty map when there are no examples.
+import { examples } from "blume:examples";
+
+interface Props {
+  path: string;
+}
+
+const { path } = Astro.props;
+const entry = examples[path];
+const Preview = entry?.Component;
+
+// Highlight the source with the shared helper so it matches Markdown fences.
+// `blume-source` makes the inner `<code>` (not the `<pre>`) the scroll/height-
+// capped box — see the theme entry — so the copy button, pinned to the `<pre>`,
+// stays put. This pane already lives inside `.prose`, so the theme styles it.
+const codeHtml = entry
+  ? await highlightCode(entry.code, entry.lang, { className: "blume-source" })
+  : undefined;
+
+// Both tabs share one height so toggling them never shifts the layout. Size it
+// to the source (≈21px/line + padding), clamped to a comfortable 18rem floor and
+// a 400px ceiling — taller sources scroll inside the pane.
+const LINE_PX = 21;
+const PADDING_PX = 36;
+const lineCount = entry ? entry.code.replace(/\n+$/u, "").split("\n").length : 0;
+const paneHeight = Math.min(400, Math.max(288, lineCount * LINE_PX + PADDING_PX));
+const paneStyle = `height:${paneHeight}px`;
+---
+
+{
+  entry ? (
+    // `sync={false}`: each preview's Preview/Code tabs are independent — unlike
+    // CodeGroup, switching one Component must not switch the others.
+    <Tabs hash={false} sync={false}>
+      <Tab
+        class="flex items-center justify-center overflow-auto"
+        style={paneStyle}
+        title="Preview"
+      >
+        <Preview />
+      </Tab>
+      <Tab class="overflow-hidden" style={paneStyle} title="Code">
+        <Fragment set:html={codeHtml} />
+      </Tab>
+    </Tabs>
+  ) : (
+    <div class="not-prose my-6 rounded-blume border border-border px-3 py-2 text-muted-foreground text-sm">
+      No example found at <code class="font-mono">{path}</code>. Add it under{" "}
+      <code class="font-mono">examples/</code> in your project.
+    </div>
+  )
+}

package/src/components/content/Diff.astro

@@ -0,0 +1,44 @@
+---
+// Render a git-style diff with `@pierre/diffs`, fully at build time. The library
+// emits a self-contained blob whose styles are scoped to `:host`, so we mount it
+// in a declarative shadow root — no client JS. `--blume-diff-color-scheme`
+// (set in the theme entry from `data-theme`) drives the diff's `light-dark()`.
+//
+// Inputs (one of): `patch`/`src` (unified patch), `before`+`after` (file paths),
+// or `old`+`new` (inline strings, with optional `lang`).
+import { renderDiff } from "./diff.ts";
+
+interface Props {
+  after?: string;
+  before?: string;
+  lang?: string;
+  new?: string;
+  old?: string;
+  patch?: string;
+  src?: string;
+}
+
+let html: string | undefined;
+let error: string | undefined;
+
+try {
+  html = await renderDiff(Astro.props);
+} catch (cause) {
+  error = cause instanceof Error ? cause.message : String(cause);
+}
+
+const COLOR_SCHEME =
+  "<style>:host{color-scheme:var(--blume-diff-color-scheme, light dark)}</style>";
+---
+
+{
+  error ? (
+    <div class="not-prose my-6 rounded-blume border border-border px-3 py-2 text-muted-foreground text-sm">
+      Could not render diff: {error}
+    </div>
+  ) : (
+    <blume-diff class="not-prose my-6 block overflow-hidden rounded-blume border border-border">
+      <template shadowrootmode="open" set:html={html + COLOR_SCHEME} />
+    </blume-diff>
+  )
+}

package/src/components/content/Expandable.astro

@@ -0,0 +1,11 @@
+---
+import AccordionItem from "./AccordionItem.astro";
+
+const { defaultOpen = false, title = "Show more" } = Astro.props;
+---
+
+<div class="not-prose my-4 overflow-hidden rounded-blume border border-border">
+  <AccordionItem defaultOpen={defaultOpen} title={title}>
+    <slot />
+  </AccordionItem>
+</div>

package/src/components/content/FileTree.astro

@@ -0,0 +1,8 @@
+---
+---
+
+<div
+  class="not-prose my-6 rounded-blume border border-border p-5 text-sm [&_ul]:m-0! [&_ul]:list-none [&_ul]:ps-4 [&>ul]:ps-0"
+>
+  <slot />
+</div>

package/src/components/content/Frame.astro

@@ -0,0 +1,70 @@
+---
+import { createSatteriMarkdownProcessor } from "@astrojs/markdown-satteri";
+
+interface Props {
+  caption?: string;
+  hint?: string;
+}
+
+const { caption, hint } = Astro.props;
+
+const escapeRawHtml = (value: string): string =>
+  value.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
+const unwrapParagraph = (html: string): string => {
+  const trimmed = html.trim();
+  const match = trimmed.match(/^<p>(?<content>[\s\S]*)<\/p>$/u);
+  return match?.groups?.content ?? trimmed;
+};
+
+const markdownProcessor = await createSatteriMarkdownProcessor();
+const captionHtml = caption
+  ? unwrapParagraph((await markdownProcessor.render(escapeRawHtml(caption))).code)
+  : undefined;
+---
+
+<blume-frame class="not-prose my-6 block">
+  <figure class="m-0">
+    {
+      hint && (
+        <p class="mb-2 text-muted-foreground text-sm leading-6">
+          {hint}
+        </p>
+      )
+    }
+    <div
+      class="flex justify-center overflow-hidden rounded-blume border border-border bg-muted/30 p-6 [&>:first-child]:m-0! [&_img]:h-auto [&_img]:max-w-full [&_video]:h-auto [&_video]:max-w-full"
+    >
+      <slot />
+    </div>
+    {
+      captionHtml && (
+        <figcaption
+          class="mt-2 text-center text-muted-foreground text-xs leading-5 [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_strong]:font-semibold [&_strong]:text-foreground"
+          set:html={captionHtml}
+        />
+      )
+    }
+  </figure>
+</blume-frame>
+
+<script>
+  class BlumeFrame extends HTMLElement {
+    connectedCallback() {
+      for (const video of this.querySelectorAll<HTMLVideoElement>(
+        "video[autoplay]"
+      )) {
+        video.playsInline = true;
+        video.loop = true;
+        video.muted = true;
+        video.setAttribute("playsinline", "");
+        video.setAttribute("loop", "");
+        video.setAttribute("muted", "");
+      }
+    }
+  }
+
+  if (!customElements.get("blume-frame")) {
+    customElements.define("blume-frame", BlumeFrame);
+  }
+</script>

package/src/components/content/GithubInfo.astro

@@ -0,0 +1,110 @@
+---
+// A card linking to a GitHub repository with its star and fork counts, fetched
+// at build time (no client JS). Pass `owner`/`repo`, or omit them to use the
+// repo from blume.config. A `GITHUB_TOKEN` env var lifts the API rate limit.
+// If the API is unreachable the card still renders, just without counts.
+import data from "blume:data";
+import { GITHUB_MARK } from "../github-mark.ts";
+import { fetchRepositoryInfo } from "./github-info.ts";
+
+interface Props {
+  owner?: string;
+  repo?: string;
+  token?: string;
+}
+
+// The resolved config exposes the repo as `repoUrl`, not `github`; parse the
+// owner/repo back out so <GithubInfo /> can default to the configured repo.
+const repoMatch = data.config.repoUrl?.match(
+  /github\.com\/(?<owner>[^/]+)\/(?<repo>[^/]+)/u
+);
+const owner = Astro.props.owner ?? repoMatch?.groups?.owner;
+const repo = Astro.props.repo ?? repoMatch?.groups?.repo;
+const token = Astro.props.token ?? process.env.GITHUB_TOKEN;
+
+const info =
+  owner && repo ? await fetchRepositoryInfo({ owner, repo, token }) : null;
+
+// Compact notation matches GitHub's own counts (e.g. 1.2k, 34.5k).
+const numbers = new Intl.NumberFormat("en", {
+  maximumFractionDigits: 1,
+  notation: "compact",
+});
+
+const statIcon =
+  "size-3.5 shrink-0 text-muted-foreground"; /* shared classes for stat icons */
+---
+
+{
+  owner && repo && (
+    <a
+      class="not-prose my-6 flex flex-col gap-2 rounded-blume border border-border p-4 no-underline! transition-colors hover:border-foreground/30 hover:bg-muted/40"
+      href={`https://github.com/${owner}/${repo}`}
+      rel="noreferrer"
+      target="_blank"
+    >
+      <span class="flex items-center gap-2 font-medium text-foreground text-sm">
+        <svg
+          aria-hidden="true"
+          class="shrink-0 text-muted-foreground"
+          fill="currentColor"
+          height="16"
+          set:html={GITHUB_MARK}
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span class="truncate">
+          {owner}/{repo}
+        </span>
+      </span>
+
+      {info?.description && (
+        <span class="text-muted-foreground text-sm">{info.description}</span>
+      )}
+
+      {info && (
+        <span class="flex items-center gap-4 text-muted-foreground text-xs">
+          <span class="flex items-center gap-1.5">
+            <svg
+              aria-hidden="true"
+              class={statIcon}
+              fill="none"
+              height="14"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="14"
+            >
+              <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
+            </svg>
+            <span>{numbers.format(info.stars)}</span>
+          </span>
+          <span class="flex items-center gap-1.5">
+            <svg
+              aria-hidden="true"
+              class={statIcon}
+              fill="none"
+              height="14"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="14"
+            >
+              <circle cx="12" cy="18" r="3" />
+              <circle cx="6" cy="6" r="3" />
+              <circle cx="18" cy="6" r="3" />
+              <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
+              <path d="M12 12v3" />
+            </svg>
+            <span>{numbers.format(info.forks)}</span>
+          </span>
+        </span>
+      )}
+    </a>
+  )
+}

package/src/components/content/Math.astro

@@ -0,0 +1,24 @@
+---
+import "katex/dist/katex.min.css";
+import katex from "katex";
+
+interface Props {
+  code: string;
+  display?: boolean;
+}
+
+const { code, display = false } = Astro.props;
+
+const html = katex.renderToString(code, {
+  displayMode: display,
+  throwOnError: false,
+});
+---
+
+{
+  display ? (
+    <div class="not-prose my-4 overflow-x-auto" set:html={html} />
+  ) : (
+    <Fragment set:html={html} />
+  )
+}

package/src/components/content/Panel.astro

@@ -0,0 +1,20 @@
+---
+const { title } = Astro.props;
+---
+
+<aside
+  class="not-prose my-6 overflow-hidden rounded-blume border border-border/80 bg-background shadow-sm shadow-border/30"
+  data-blume-panel
+  data-blume-right-rail-item
+>
+  {
+    title && (
+      <p class="m-0! border-border/70 border-b bg-muted/35 px-3.5 py-2 font-medium text-muted-foreground text-xs">
+        {title}
+      </p>
+    )
+  }
+  <div class="px-3.5 py-3 text-sm leading-6 [&>:first-child]:mt-0! [&>:last-child]:mb-0!">
+    <slot />
+  </div>
+</aside>