blume 0.0.0 → 0.1.0

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/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/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>

package/src/components/content/Prompt.astro

@@ -0,0 +1,129 @@
+---
+import { createSatteriMarkdownProcessor } from "@astrojs/markdown-satteri";
+
+interface Props {
+  actions?: boolean | string | string[];
+  description: string;
+}
+
+const { actions = ["copy"], description } = 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 normalizeActions = (value: Props["actions"]): string[] => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    return [value];
+  }
+  return value === false ? [] : ["copy"];
+};
+
+const enabledActions = new Set(normalizeActions(actions));
+const markdownProcessor = await createSatteriMarkdownProcessor();
+const renderedDescription = await markdownProcessor.render(
+  escapeRawHtml(description)
+);
+const descriptionHtml = unwrapParagraph(renderedDescription.code);
+
+const primaryButton =
+  "inline-flex h-8 cursor-pointer items-center rounded-lg bg-accent px-3.5 font-medium text-accent-foreground text-xs transition hover:bg-accent/90";
+const secondaryButton =
+  "inline-flex h-8 cursor-pointer items-center rounded-lg border border-border bg-background px-3.5 font-medium text-muted-foreground text-xs transition hover:border-accent hover:text-accent";
+---
+
+<blume-prompt
+  class="not-prose my-6 block rounded-blume border border-border bg-muted/30"
+>
+  <div class="flex items-center justify-between gap-3 px-4 py-3">
+    <p
+      class="m-0! min-w-0 text-foreground text-sm [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_strong]:font-semibold [&_strong]:text-foreground"
+      data-blume-prompt-description
+      set:html={descriptionHtml}
+    />
+    {
+      enabledActions.size > 0 && (
+        <div class="flex shrink-0 items-center gap-2">
+          {enabledActions.has("copy") && (
+            <button
+              aria-label="Copy prompt"
+              class={primaryButton}
+              data-blume-prompt-copy
+              type="button"
+            >
+              <span data-blume-prompt-copy-label>Copy prompt</span>
+            </button>
+          )}
+          {enabledActions.has("cursor") && (
+            <a
+              aria-label="Open prompt in Cursor"
+              class={secondaryButton}
+              data-blume-prompt-cursor
+              href="cursor://anysphere.cursor-deeplink/prompt"
+            >
+              Open in Cursor
+            </a>
+          )}
+        </div>
+      )
+    }
+  </div>
+  <div data-blume-prompt-content hidden>
+    <slot />
+  </div>
+</blume-prompt>
+
+<script>
+  class BlumePrompt extends HTMLElement {
+    connectedCallback() {
+      const content = this.querySelector<HTMLElement>(
+        "[data-blume-prompt-content]"
+      );
+      const promptText = () => content?.textContent?.trim() ?? "";
+
+      const cursor = this.querySelector<HTMLAnchorElement>(
+        "[data-blume-prompt-cursor]"
+      );
+      if (cursor) {
+        cursor.href = `cursor://anysphere.cursor-deeplink/prompt?text=${encodeURIComponent(promptText())}`;
+      }
+
+      const copy = this.querySelector<HTMLButtonElement>(
+        "[data-blume-prompt-copy]"
+      );
+      copy?.addEventListener("click", async () => {
+        const text = promptText();
+        if (!text) {
+          return;
+        }
+        try {
+          await navigator.clipboard.writeText(text);
+        } catch {
+          return;
+        }
+
+        const label = copy.querySelector("[data-blume-prompt-copy-label]");
+        if (!label) {
+          return;
+        }
+        const previous = label.textContent ?? "Copy prompt";
+        label.textContent = "Copied";
+        setTimeout(() => {
+          label.textContent = previous;
+        }, 1500);
+      });
+    }
+  }
+
+  if (!customElements.get("blume-prompt")) {
+    customElements.define("blume-prompt", BlumePrompt);
+  }
+</script>

package/src/components/content/Step.astro

@@ -0,0 +1,34 @@
+---
+import Icon from "../Icon.astro";
+import { hasIcon } from "../../theme/icons.ts";
+
+interface Props {
+  icon?: string;
+  iconType?: string;
+  title?: string;
+}
+
+const { icon, iconType, title } = Astro.props;
+const markerClass =
+  "absolute top-0 -start-[2.75rem] flex size-6 items-center justify-center rounded-full bg-accent text-center font-semibold text-accent-foreground text-xs";
+const isImageIcon = (value: string): boolean =>
+  /^(?:https?:\/\/|data:image\/|\/|\.{1,2}\/)/u.test(value) ||
+  /\.(?:avif|gif|jpe?g|png|svg|webp)$/iu.test(value);
+const canRenderIcon =
+  icon !== undefined &&
+  (/^\s*<svg[\s\S]*<\/svg>\s*$/u.test(icon) ||
+    isImageIcon(icon) ||
+    hasIcon(icon, iconType));
+---
+
+<div
+  class="relative [counter-increment:blume-step]"
+>
+  <span class:list={[markerClass, !canRenderIcon && "before:[content:counter(blume-step)]"]}>
+    {canRenderIcon && <Icon iconType={iconType} name={icon} size={14} />}
+  </span>
+  {title && <p class="mb-1.5 font-semibold">{title}</p>}
+  <div class="[&>:first-child]:mt-0! [&>:last-child]:mb-0!">
+    <slot />
+  </div>
+</div>