@marktiderman/genesis-ui 2.13.0 → 2.14.0

package/SKILL.md

@@ -135,6 +135,7 @@ and use it the same way.
 | Record detail side panel                                      | `DetailPanel`                                                                      | `/data`                                                           |
 | Dashboard / settings / form / detail page shape               | `DashboardPage`, `SettingsPage`, `FormPage`, `DetailPage`                          | `/dashboard-page`, `/settings-page`, `/form-page`, `/detail-page` |
 | KPI tile                                                      | `StatCard`                                                                         | `/data`                                                           |
+| The page around one publishable thing (a form, a course, a lesson): header, readiness chip, headline numbers, summary cards, follow-ups, settings with jump links, Share | `ResourceHeader`, `ReadinessChip`, `HeadlineNumbers`, `SummaryCard`, `FollowUpList`, `ResponsesToolbar`, `ResourceSettingsPage`, `SettingsSection`, `ShareDialog` (+ `readinessOf`, `dayLabel`, `prefilledUrl` on the server) | `/resource` (`/resource/rules`)                                   |
 | Table cells: dates, numbers, money, badges, links, thumbnails | `DateCell`, `NumberCell`, `CurrencyCell`, `BadgeCell`, `LinkCell`, `ThumbnailCell` | `/data`                                                           |
 | Search, sort, filters, status chips/tabs, saved views         | `DataFilters`                                                                      | `/data`                                                           |
 | Create/edit form bound to a resource                          | `ResourceForm` / `useResourceForm`                                                 | `/data` / `@marktiderman/genesis-core/hooks`                      |

package/dist/chunk-D3U5SBLW.js

@@ -0,0 +1,605 @@
+"use client";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-VXFYETRK.js';
+import { ToggleGroup, ToggleGroupItem } from './chunk-NUXW6NPP.js';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbPage } from './chunk-2MQKBZBJ.js';
+import { SAVE_STATE_LABEL, readinessChip, prefilledUrl, embedSnippet } from './chunk-SURORBV7.js';
+import { StatusBadge } from './chunk-XMK3T4TA.js';
+import { Textarea } from './chunk-YETMISCE.js';
+import { Separator } from './chunk-SXSCHWZU.js';
+import { Skeleton } from './chunk-QFM4Z2SS.js';
+import { Input } from './chunk-QSXVL5UB.js';
+import { Badge } from './chunk-NPNADZHM.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-FK42ZGGV.js';
+import { Label } from './chunk-F47U5KNW.js';
+import { Button } from './chunk-NWSCYLPT.js';
+import { toast } from './chunk-4RAZJ6LL.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './chunk-7XMZVISM.js';
+import { cn } from './chunk-NZ5WBA4R.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Check, Loader2, TriangleAlert, Undo2, Redo2, Eye, Share2, Rocket, CircleAlert, CircleCheck, Star, ExternalLink, Printer, Copy } from 'lucide-react';
+import { useState, useEffect, useId } from 'react';
+
+function Chip({
+  tone,
+  icon,
+  children,
+  className,
+  testID
+}) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "mr-1 inline-flex [&_svg]:size-3", "aria-hidden": true, children: icon }) : null,
+    children
+  ] });
+  if (tone === "danger") {
+    return /* @__PURE__ */ jsx(StatusBadge, { status: "offTrack", className: cn("font-normal", className), "data-testid": testID, children: inner });
+  }
+  return /* @__PURE__ */ jsx(Badge, { variant: tone, className: cn("font-normal", className), "data-testid": testID, children: inner });
+}
+var SAVE_TONE = {
+  saved: "muted",
+  saving: "muted",
+  unsaved: "muted",
+  failed: "warning",
+  stopped: "danger",
+  conflict: "danger"
+};
+function ResourceHeader({
+  title,
+  untitled = "Untitled",
+  parent,
+  status,
+  saveState,
+  onUndo,
+  onRedo,
+  canUndo = true,
+  canRedo = true,
+  onPreview,
+  onShare,
+  publish,
+  actions,
+  className
+}) {
+  const history = onUndo || onRedo;
+  const name = title.trim() || untitled;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "resource-header",
+      className: cn("flex flex-col gap-3 md:flex-row md:items-start md:justify-between", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          parent ? /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { className: "text-xs", children: [
+            /* @__PURE__ */ jsx(BreadcrumbItem, { className: "[&_a:hover]:text-foreground [&_a]:transition-colors", children: parent }),
+            /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+            /* @__PURE__ */ jsx(BreadcrumbItem, { className: "min-w-0", children: /* @__PURE__ */ jsx(BreadcrumbPage, { className: "truncate", children: name }) })
+          ] }) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "min-w-0 break-words text-xl font-semibold tracking-tight sm:text-2xl", children: name }),
+            status ? /* @__PURE__ */ jsx(Chip, { tone: status.tone, testID: "resource-status", children: status.label }) : null,
+            saveState ? /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                tone: SAVE_TONE[saveState],
+                testID: "resource-save-state",
+                icon: saveState === "saved" ? /* @__PURE__ */ jsx(Check, {}) : saveState === "saving" ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : saveState === "unsaved" ? null : /* @__PURE__ */ jsx(TriangleAlert, {}),
+                children: SAVE_STATE_LABEL[saveState]
+              }
+            ) }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+          history ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                "aria-label": "Undo",
+                title: "Undo",
+                disabled: !onUndo || !canUndo,
+                onClick: onUndo,
+                "data-testid": "resource-undo",
+                children: /* @__PURE__ */ jsx(Undo2, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                "aria-label": "Redo",
+                title: "Redo",
+                disabled: !onRedo || !canRedo,
+                onClick: onRedo,
+                "data-testid": "resource-redo",
+                children: /* @__PURE__ */ jsx(Redo2, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-1 h-6" })
+          ] }) : null,
+          actions,
+          onPreview ? /* @__PURE__ */ jsx(Button, { variant: "ghost", startIcon: /* @__PURE__ */ jsx(Eye, { className: "size-4" }), onClick: onPreview, "data-testid": "resource-preview", children: "Preview" }) : null,
+          onShare ? /* @__PURE__ */ jsx(Button, { variant: "outline", startIcon: /* @__PURE__ */ jsx(Share2, { className: "size-4" }), onClick: onShare, "data-testid": "resource-share", children: "Share" }) : null,
+          publish ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              startIcon: /* @__PURE__ */ jsx(Rocket, { className: "size-4" }),
+              loading: publish.loading,
+              disabled: publish.disabled,
+              onClick: publish.onClick,
+              "data-testid": "resource-publish",
+              children: publish.label ?? "Publish"
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function ReadinessChip({
+  readiness,
+  onClick,
+  labels,
+  className
+}) {
+  const { label, tone } = readinessChip(readiness, labels);
+  const icon = readiness.state === "ready" ? /* @__PURE__ */ jsx(Check, {}) : readiness.state === "problems" ? /* @__PURE__ */ jsx(CircleAlert, {}) : readiness.state === "warnings" ? /* @__PURE__ */ jsx(TriangleAlert, {}) : null;
+  const chip = /* @__PURE__ */ jsx(Chip, { tone, icon, testID: "readiness", className, children: label });
+  if (!onClick) return chip;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: chip
+    }
+  );
+}
+function ResponsesToolbar({
+  view,
+  onViewChange,
+  filters,
+  actions,
+  labels = {},
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "responses-toolbar",
+      className: cn("flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            ToggleGroup,
+            {
+              type: "single",
+              variant: "outline",
+              size: "sm",
+              className: "h-9",
+              value: view,
+              onValueChange: (v) => v && onViewChange(v),
+              "aria-label": labels.group ?? "Show responses as",
+              children: [
+                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "summary", className: "h-9 px-3", "data-testid": "responses-view-summary", children: labels.summary ?? "Summary" }),
+                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "each", className: "h-9 px-3", "data-testid": "responses-view-each", children: labels.each ?? "Each response" })
+              ]
+            }
+          ),
+          filters
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+var TONE = {
+  positive: "text-emerald-700 dark:text-emerald-300",
+  negative: "text-red-700 dark:text-red-300",
+  warning: "text-amber-800 dark:text-amber-200",
+  muted: "text-muted-foreground"
+};
+function HeadlineNumbers({
+  numbers,
+  isLoading = false,
+  className
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3 lg:grid-cols-4", className), children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-28 w-full rounded-lg" }, i)) });
+  }
+  if (!numbers.length) return null;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "headline-numbers",
+      className: cn(
+        "grid grid-cols-2 gap-3",
+        numbers.length >= 4 ? "lg:grid-cols-4" : numbers.length === 3 ? "lg:grid-cols-3" : "",
+        className
+      ),
+      children: numbers.map((n) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-w-0 flex-col gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground",
+          "data-testid": `headline-${n.key}`,
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "truncate text-sm text-muted-foreground", children: n.label }),
+            /* @__PURE__ */ jsx("dd", { className: "text-2xl font-semibold tabular-nums tracking-tight sm:text-3xl", children: n.value }),
+            n.detail ? /* @__PURE__ */ jsx("dd", { className: cn("text-xs", TONE[n.tone ?? "muted"]), children: n.detail }) : null
+          ]
+        },
+        n.key
+      ))
+    }
+  );
+}
+function SummaryCard({
+  icon,
+  title,
+  meta,
+  children,
+  className,
+  testID
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      "data-testid": testID,
+      "data-slot": "summary-card",
+      className: cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-5 text-card-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "flex min-w-0 items-center gap-2 font-semibold", children: [
+            icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground [&_svg]:size-4", "aria-hidden": true, children: icon }) : null,
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: title })
+          ] }),
+          meta ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: meta }) : null
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function FollowUpList({
+  entries,
+  actions,
+  title = "Needs a follow-up",
+  isLoading = false,
+  empty = "Nothing to follow up right now.",
+  noComment = "No comment",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      "data-testid": "follow-up-list",
+      className: cn("flex flex-col gap-3 rounded-lg border border-border bg-card p-4 text-card-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 font-semibold", children: [
+            /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 text-amber-800 dark:text-amber-200", "aria-hidden": true }),
+            title
+          ] }),
+          !isLoading ? /* @__PURE__ */ jsx("span", { className: "rounded-md bg-muted px-2 py-0.5 text-xs tabular-nums text-muted-foreground", children: entries.length }) : null
+        ] }),
+        isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full rounded-md" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full rounded-md" })
+        ] }) : entries.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(CircleCheck, { className: "size-4 shrink-0", "aria-hidden": true }),
+          empty
+        ] }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: entries.map((entry) => {
+          const buttons = actions?.(entry);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex flex-col gap-1.5 rounded-md border border-border p-3",
+              "data-testid": `follow-up-${entry.id}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "break-words font-medium", children: entry.name }),
+                    entry.tag ? /* @__PURE__ */ jsx(Chip, { tone: entry.tag.tone ?? "muted", children: entry.tag.label }) : null
+                  ] }),
+                  entry.rating ? /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "flex shrink-0 items-center gap-0.5 text-sm font-medium tabular-nums text-amber-800 dark:text-amber-200",
+                      role: "img",
+                      "aria-label": `Rated ${entry.rating.value} out of ${entry.rating.max}`,
+                      children: [
+                        entry.rating.value,
+                        /* @__PURE__ */ jsx(Star, { className: "size-3.5 fill-current", "aria-hidden": true })
+                      ]
+                    }
+                  ) : null
+                ] }),
+                entry.meta ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: entry.meta }) : null,
+                /* @__PURE__ */ jsx("p", { className: cn("line-clamp-3 break-words text-sm", !entry.comment && "text-muted-foreground"), children: entry.comment || noComment }),
+                buttons ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-2", children: buttons }) : null
+              ]
+            },
+            entry.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function SettingsSection({
+  id,
+  icon,
+  title,
+  description,
+  children,
+  className
+}) {
+  const headingId = id ? `${id}-title` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      "aria-labelledby": headingId,
+      "data-slot": "settings-section",
+      className: cn("scroll-mt-6 rounded-lg border border-border bg-card text-card-foreground", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex gap-3 border-b border-border px-5 py-4", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-primary [&_svg]:size-5", "aria-hidden": true, children: icon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h2", { id: headingId, className: "font-semibold", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "divide-y divide-border",
+              // Rows: genesis-ui SettingsRow and ToggleRow, padded to the card.
+              "[&>*]:px-5 [&>[data-slot=settings-row]]:py-3.5",
+              "[&>[data-slot=settings-row]:not(:has([role=switch]))]:max-sm:flex-col",
+              "[&>[data-slot=settings-row]:not(:has([role=switch]))]:max-sm:items-stretch",
+              "[&>[data-slot=settings-row]>div:last-child]:max-sm:flex-wrap"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function ResourceSettingsPage({
+  sections,
+  navLabel = "On this page",
+  className
+}) {
+  const [active, setActive] = useState(sections[0]?.id);
+  const ids = sections.map((s) => s.id).join(" ");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const line = window.innerHeight / 3;
+      let current = sections[0]?.id;
+      let last;
+      for (const s of sections) {
+        const el = document.getElementById(s.id);
+        if (!el) continue;
+        last = s.id;
+        if (el.getBoundingClientRect().top <= line) current = s.id;
+      }
+      const bottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+      if (bottom && last && window.scrollY > 0) current = last;
+      setActive(current);
+    };
+    const onScroll = () => {
+      if (!frame) frame = window.requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, [ids]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "resource-settings-page",
+      className: cn("grid grid-cols-[minmax(0,1fr)] gap-6 md:grid-cols-[12rem_minmax(0,1fr)] lg:gap-8", className),
+      children: [
+        /* @__PURE__ */ jsxs("nav", { "aria-label": navLabel, className: "min-w-0 md:sticky md:top-4 md:self-start", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-2 hidden text-xs font-medium uppercase tracking-wide text-muted-foreground md:block", children: navLabel }),
+          /* @__PURE__ */ jsx("ul", { className: "-mx-1 flex gap-1 overflow-x-auto px-1 md:mx-0 md:flex-col md:overflow-visible md:px-0", children: sections.map((s) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: `#${s.id}`,
+              "aria-current": active === s.id ? "location" : void 0,
+              onClick: (e) => {
+                setActive(s.id);
+                if (s.content === void 0 && s.onSelect) {
+                  e.preventDefault();
+                  s.onSelect();
+                }
+              },
+              className: cn(
+                "flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4",
+                active === s.id && "bg-muted font-medium text-foreground"
+              ),
+              children: [
+                s.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: s.icon }) : null,
+                s.title
+              ]
+            }
+          ) }, s.id)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-5", children: sections.filter((s) => s.content !== void 0).map((s) => /* @__PURE__ */ jsx(SettingsSection, { id: s.id, icon: s.icon, title: s.title, description: s.description, children: s.content }, s.id)) })
+      ]
+    }
+  );
+}
+var ANY = "__any";
+async function copy(text, what) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast.success(`${what} copied.`);
+  } catch {
+    toast.error("Couldn't copy. Select it and copy it instead.");
+  }
+}
+function CopyField({
+  id,
+  label,
+  value,
+  what
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Input, { id, readOnly: true, value, onFocus: (e) => e.target.select() }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          startIcon: /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+          onClick: () => void copy(value, what),
+          children: "Copy"
+        }
+      )
+    ] })
+  ] });
+}
+function ShareDialog({
+  open,
+  onOpenChange,
+  noun = "page",
+  title = `Share your ${noun}`,
+  description = "Anyone with the link can open it.",
+  url,
+  posterUrl,
+  renderQr,
+  name,
+  prefill = [],
+  prefillNote,
+  defaultTab = "link"
+}) {
+  const id = useId();
+  const [values, setValues] = useState({});
+  const chosen = Object.fromEntries(Object.entries(values).filter(([, v]) => v && v !== ANY));
+  const prefilled = url && Object.keys(chosen).length ? prefilledUrl(url, chosen) : null;
+  const poster = url ? posterUrl?.(url, {}) : null;
+  const prefilledPoster = prefilled && url ? posterUrl?.(url, chosen) : null;
+  const usable = prefill.filter((p) => p.options.length > 0);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90dvh] overflow-y-auto sm:max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    !url ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading the link\u2026" }) : /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTab === "qr" && !renderQr ? "link" : defaultTab, children: [
+      /* @__PURE__ */ jsxs(TabsList, { children: [
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "link", children: "Link" }),
+        renderQr && /* @__PURE__ */ jsx(TabsTrigger, { value: "qr", children: "QR code" }),
+        /* @__PURE__ */ jsx(TabsTrigger, { value: "embed", children: "Embed" })
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "link", className: "space-y-5 pt-2", children: [
+        /* @__PURE__ */ jsx(CopyField, { id: `${id}-link`, label: "Link", value: url, what: "Link" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            asChild: true,
+            variant: "ghost",
+            size: "sm",
+            startIcon: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }),
+            children: /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", rel: "noreferrer", children: [
+              "Open the ",
+              noun
+            ] })
+          }
+        ),
+        usable.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-border pt-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Prefilled link" }),
+            prefillNote && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: prefillNote })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: usable.map((p) => /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: values[p.key] ?? ANY,
+              onValueChange: (v) => setValues((old) => ({ ...old, [p.key]: v })),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "min-w-40 flex-1", "aria-label": p.label, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: ANY, children: p.anyLabel }),
+                  p.options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value))
+                ] })
+              ]
+            },
+            p.key
+          )) }),
+          prefilled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              CopyField,
+              {
+                id: `${id}-prefilled`,
+                label: "Prefilled link",
+                value: prefilled,
+                what: "Prefilled link"
+              }
+            ),
+            prefilledPoster && /* @__PURE__ */ jsx(
+              Button,
+              {
+                asChild: true,
+                variant: "outline",
+                startIcon: /* @__PURE__ */ jsx(Printer, { className: "size-4" }),
+                children: /* @__PURE__ */ jsx("a", { href: prefilledPoster, target: "_blank", rel: "noreferrer", children: "Print a poster for this link" })
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      renderQr && /* @__PURE__ */ jsxs(TabsContent, { value: "qr", className: "space-y-4 pt-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-56", children: renderQr(url) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-muted-foreground", children: [
+          "Scan with a phone's camera to open the ",
+          noun,
+          "."
+        ] }),
+        poster && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", startIcon: /* @__PURE__ */ jsx(Printer, { className: "size-4" }), children: /* @__PURE__ */ jsx("a", { href: poster, target: "_blank", rel: "noreferrer", children: "Print a QR poster" }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "embed", className: "space-y-3 pt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-embed`, children: "Embed on your website" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: `${id}-embed`,
+              readOnly: true,
+              rows: 4,
+              className: "font-mono text-xs",
+              value: embedSnippet(url, name),
+              onFocus: (e) => e.target.select()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            startIcon: /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+            onClick: () => void copy(embedSnippet(url, name), "Embed code"),
+            children: "Copy embed code"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+export { Chip, FollowUpList, HeadlineNumbers, ReadinessChip, ResourceHeader, ResourceSettingsPage, ResponsesToolbar, SettingsSection, ShareDialog, SummaryCard };
+//# sourceMappingURL=chunk-D3U5SBLW.js.map
+//# sourceMappingURL=chunk-D3U5SBLW.js.map