@neuronection/assistant-ui 0.8.1 → 0.10.0

package/dist/chunk-7RTSSBBR.js

@@ -0,0 +1,628 @@
+import { NeuronectionMark, NeuronectionWordmark, StudyMark, CareerMark, HealthMark } from './chunk-Q2JMEAKN.js';
+import { Card, CardHeader, CardContent } from './chunk-RYE5YCFF.js';
+import { ChipList } from './chunk-QUPGIPTT.js';
+import { Badge } from './chunk-F4DP4PIM.js';
+import { cn } from './chunk-BLJWR4ZV.js';
+import * as React2 from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Link2, ArrowUpRight, Globe, Heart, Check, Copy } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+
+var AboutCard = React2.forwardRef(
+  function AboutCard2({ icon, title, description, heading = "h2", className, children, ...props }, ref) {
+    const Title = heading;
+    return /* @__PURE__ */ jsxs(Card, { ref, "data-as": "about-card", className: cn("h-fit", className), ...props, children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex-row items-center gap-3", children: [
+        icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "flex size-10 shrink-0 items-center justify-center rounded-[var(--as-radius)] bg-[var(--as-secondary)] text-[var(--as-secondary-fg)] [&_svg]:size-5",
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Title,
+            {
+              "data-as": "card-title",
+              className: "font-semibold leading-none tracking-tight",
+              children: title
+            }
+          ),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--as-muted-fg)]", children: description }) : null
+        ] })
+      ] }),
+      children ? /* @__PURE__ */ jsx(CardContent, { children }) : null
+    ] });
+  }
+);
+var rowClass = "group flex w-full items-center gap-3 rounded-[var(--as-radius)] p-2 text-left transition-colors hover:bg-[var(--as-muted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]";
+var tileClass = "flex size-10 shrink-0 items-center justify-center rounded-[var(--as-radius)] bg-[var(--as-secondary)] text-[var(--as-secondary-fg)] transition-colors group-hover:bg-[color-mix(in_srgb,var(--as-secondary-fg)_14%,transparent)] [&_svg]:size-5";
+var CopyRow = ({
+  value,
+  icon: Icon = Link2,
+  label,
+  subtitle,
+  copyLabel = "Copy to clipboard",
+  copiedLabel = "Copied!"
+}) => {
+  const [copied, setCopied] = React2.useState(false);
+  React2.useEffect(() => {
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+  const onCopy = () => {
+    void navigator.clipboard?.writeText(value).then(() => setCopied(true));
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "data-as": "about-copy-row",
+      "aria-label": `${typeof label === "string" ? label : copyLabel} \u2014 ${copyLabel}`,
+      className: rowClass,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tileClass, children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-[var(--as-fg)] transition-colors group-hover:text-[var(--as-primary)]", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--as-muted-fg)]", children: copied ? copiedLabel : subtitle })
+        ] }),
+        copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--as-success)]" }) : /* @__PURE__ */ jsx(
+          Copy,
+          {
+            "aria-hidden": true,
+            className: "size-4 shrink-0 text-[var(--as-muted-fg)] opacity-0 transition-opacity group-hover:opacity-100"
+          }
+        )
+      ]
+    }
+  );
+};
+var AboutLinkList = React2.forwardRef(
+  function AboutLinkList2({ links, className, ...props }, ref) {
+    let lastGroup;
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "data-as": "about-link-list",
+        className: cn("flex flex-col gap-0.5", className),
+        ...props,
+        children: links.map((link, index) => {
+          const Icon = link.icon ?? Link2;
+          const external = link.external !== false;
+          const heading = link.group !== void 0 && link.group !== lastGroup ? link.group : null;
+          lastGroup = link.group;
+          return /* @__PURE__ */ jsxs("li", { children: [
+            heading !== null ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--as-muted-fg)]",
+                  index > 0 && "mt-4"
+                ),
+                children: heading
+              }
+            ) : null,
+            link.copyValue && !link.href ? /* @__PURE__ */ jsx(
+              CopyRow,
+              {
+                value: link.copyValue,
+                icon: link.icon,
+                label: link.label,
+                subtitle: link.subtitle,
+                copyLabel: link.copyLabel,
+                copiedLabel: link.copiedLabel
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: link.href,
+                ...external ? { target: "_blank", rel: "noreferrer" } : {},
+                className: rowClass,
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: tileClass, children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold text-[var(--as-fg)] transition-colors group-hover:text-[var(--as-primary)]", children: link.label }),
+                    link.subtitle ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--as-muted-fg)]", children: link.subtitle }) : null
+                  ] }),
+                  external ? /* @__PURE__ */ jsx(
+                    ArrowUpRight,
+                    {
+                      "aria-hidden": true,
+                      className: "size-4 shrink-0 text-[var(--as-muted-fg)] opacity-60 transition-opacity group-hover:opacity-100"
+                    }
+                  ) : null
+                ]
+              }
+            )
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+var noteStyles = cva(
+  "rounded-[var(--as-radius-lg)] border p-5 text-sm leading-relaxed",
+  {
+    variants: {
+      tone: {
+        info: "border-[color-mix(in_srgb,var(--as-primary)_25%,transparent)] bg-[color-mix(in_srgb,var(--as-primary)_8%,transparent)] text-[var(--as-fg)]",
+        warning: "border-[color-mix(in_srgb,var(--as-warning)_35%,transparent)] bg-[color-mix(in_srgb,var(--as-warning)_12%,transparent)] text-[color-mix(in_srgb,var(--as-warning)_72%,var(--as-fg))]"
+      }
+    },
+    defaultVariants: {
+      tone: "info"
+    }
+  }
+);
+var AboutNote = React2.forwardRef(
+  function AboutNote2({ tone, title, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, "data-as": "about-note", "data-as-tone": tone, className: cn(noteStyles({ tone }), className), ...props, children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "mb-1.5 font-semibold uppercase tracking-wider", children: title }) : null,
+      children
+    ] });
+  }
+);
+var AboutFooterLine = React2.forwardRef(function AboutFooterLine2({ version, copyright, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      ref,
+      "data-as": "about-footer-line",
+      className: cn("text-center text-xs text-[var(--as-muted-fg)]", className),
+      ...props,
+      children: [
+        version ? /* @__PURE__ */ jsx("span", { children: version }) : null,
+        version && (copyright || children) ? /* @__PURE__ */ jsx("br", {}) : null,
+        copyright ?? children
+      ]
+    }
+  );
+});
+var GitHubGlyph = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, className, children: /* @__PURE__ */ jsx("path", { d: "M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.75 2.69 1.25 3.35.95.1-.74.4-1.25.72-1.53-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.67.41.35.77 1.05.77 2.12 0 1.53-.01 2.76-.01 3.14 0 .3.2.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z" }) });
+var marks = {
+  health: HealthMark,
+  career: CareerMark,
+  study: StudyMark
+};
+var defaultMembers = {
+  health: {
+    name: "Health Assistant",
+    tagline: "Self-hosted, privacy-first health records with AI insights",
+    href: "https://neuronection.com/en/health/",
+    github: "https://github.com/health-assistant-io/health-assistant",
+    website: "https://health-assistant.io"
+  },
+  career: {
+    name: "Career Assistant",
+    tagline: "Open-source career explorer with transparent AI matching",
+    href: "https://neuronection.com/en/career/",
+    github: "https://github.com/neuronection/career-assistant"
+  },
+  study: {
+    name: "Study Assistant",
+    tagline: "Local-first study workbench that runs in your browser",
+    href: "https://neuronection.com/en/study/",
+    github: "https://github.com/neuronection/study-assistant"
+  }
+};
+var defaultOrder = ["health", "career", "study"];
+var defaultBlurb = "Neuronection is a family of open-source, self-hosted AI assistants \u2014 one connected ecosystem for life\u2019s important choices. Every assistant in the family shares the same principles: deeply structured data instead of text dumps, AI that explains its reasoning, and you in control of your information.";
+var FamilyBadge = React2.forwardRef(
+  function FamilyBadge2({
+    current,
+    members,
+    creator,
+    creatorLabel = "Created by",
+    hubUrl = "https://neuronection.com",
+    label = "Part of the Neuronection family",
+    blurb = defaultBlurb,
+    ctaLabel = "Visit neuronection.com",
+    currentLabel = "Current app",
+    githubLabel = "GitHub",
+    websiteLabel = "Website",
+    theme = "light",
+    className,
+    ...props
+  }, ref) {
+    const list = members ?? defaultOrder.map((app) => ({ app, ...defaultMembers[app] }));
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        "data-as": "family-badge",
+        "aria-label": label,
+        className: cn(
+          "flex flex-col gap-5 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface)] p-6 shadow-[var(--as-shadow-1)] sm:p-8",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-6 gap-y-4", children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: hubUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                "aria-label": label,
+                className: "flex items-center gap-3 rounded-[var(--as-radius)] p-1 transition-opacity hover:opacity-85 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                children: [
+                  /* @__PURE__ */ jsx(NeuronectionMark, { size: 44, theme }),
+                  /* @__PURE__ */ jsx(NeuronectionWordmark, { size: 24, theme })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: hubUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                "data-as": "family-cta",
+                className: "group inline-flex items-center gap-2.5 rounded-full bg-[var(--as-primary)] py-2 pl-5 pr-2 text-sm font-semibold text-[var(--as-primary-fg)] shadow-[var(--as-shadow-2)] transition-shadow hover:shadow-[var(--as-shadow-3)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                children: [
+                  ctaLabel,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "flex size-7 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--as-primary-fg)_20%,transparent)] transition-colors group-hover:bg-[color-mix(in_srgb,var(--as-primary-fg)_32%,transparent)]",
+                      children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          blurb ? /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-[var(--as-muted-fg)]", children: blurb }) : null,
+          /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-1 gap-x-3 gap-y-4 sm:grid-cols-3", children: list.map((member) => {
+            const Mark = marks[member.app];
+            const isCurrent = member.app === current;
+            const card = cn(
+              "group flex h-full flex-col rounded-[var(--as-radius)] border p-5 pt-6 text-center transition-[color,box-shadow] hover:shadow-[var(--as-shadow-2)]",
+              isCurrent ? "border-[var(--as-primary)] bg-[color-mix(in_srgb,var(--as-primary)_7%,transparent)] ring-2 ring-[var(--as-primary)]" : "border-[var(--as-border)] bg-[var(--as-muted)] hover:border-[var(--as-primary)]"
+            );
+            const linkExtras = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]";
+            const header = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Mark, { size: 56, theme }),
+              member.href && !isCurrent ? /* @__PURE__ */ jsx("span", { className: "text-base font-bold leading-snug text-[var(--as-primary)] underline decoration-transparent underline-offset-4 transition-colors group-hover:decoration-current", children: member.name }) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold leading-snug text-[var(--as-fg)]", children: member.name }),
+              member.tagline ? /* @__PURE__ */ jsx("span", { className: "text-sm leading-relaxed text-[var(--as-muted-fg)]", children: member.tagline }) : null,
+              isCurrent ? /* @__PURE__ */ jsx("span", { className: "mt-1 rounded-full bg-[var(--as-primary)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--as-primary-fg)]", children: currentLabel }) : null
+            ] });
+            return /* @__PURE__ */ jsx("li", { "data-current": isCurrent ? "true" : void 0, className: "flex", children: /* @__PURE__ */ jsxs("div", { className: cn(card, "w-full"), children: [
+              member.href && !isCurrent ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: member.href,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: cn("flex flex-1 flex-col items-center gap-2.5", linkExtras),
+                  children: header
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center gap-2.5", children: header }),
+              member.github || member.website ? /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center justify-center gap-2 border-t border-[var(--as-border)] pt-4", children: [
+                member.github ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: member.github,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    "aria-label": `${member.name} on GitHub`,
+                    className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--as-border)] bg-[var(--as-surface)] px-3.5 py-2 text-xs font-semibold text-[var(--as-muted-fg)] transition-colors hover:border-[var(--as-primary)] hover:text-[var(--as-primary)] focus-visible:border-[var(--as-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                    children: [
+                      /* @__PURE__ */ jsx(GitHubGlyph, { className: "size-4" }),
+                      githubLabel
+                    ]
+                  }
+                ) : null,
+                member.website ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: member.website,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    "aria-label": `${member.name} website`,
+                    className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--as-border)] bg-[var(--as-surface)] px-3.5 py-2 text-xs font-semibold text-[var(--as-muted-fg)] transition-colors hover:border-[var(--as-primary)] hover:text-[var(--as-primary)] focus-visible:border-[var(--as-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                    children: [
+                      /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-4" }),
+                      websiteLabel
+                    ]
+                  }
+                ) : null
+              ] }) : null
+            ] }) }, member.app);
+          }) }),
+          creator ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1 border-t border-[var(--as-border)] pt-4 text-xs text-[var(--as-muted-fg)]", children: [
+            /* @__PURE__ */ jsx("span", { children: creatorLabel }),
+            creator.href ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: creator.href,
+                target: "_blank",
+                rel: "noreferrer",
+                className: "rounded font-semibold text-[var(--as-fg)] transition-colors hover:text-[var(--as-primary)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                children: creator.name
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--as-fg)]", children: creator.name }),
+            creator.role ? /* @__PURE__ */ jsxs("span", { children: [
+              "\xB7 ",
+              creator.role
+            ] }) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+var TechChips = React2.forwardRef(
+  function TechChips2({ items, className, ...props }, ref) {
+    const cleaned = items.filter((item) => Boolean(item));
+    if (cleaned.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { ref, "data-as": "tech-chips", className: cn(className), ...props, children: /* @__PURE__ */ jsx(ChipList, { items: cleaned, variant: "neutral" }) });
+  }
+);
+var rowBase = "group flex w-full items-center gap-3 rounded-[var(--as-radius)] p-3.5 text-left no-underline transition-[color,box-shadow,border-color] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]";
+var SponsorCard = React2.forwardRef(
+  function SponsorCard2({
+    channels,
+    title = "Support this project",
+    description = "This project is free and open source. Contributions directly fund servers, maintenance and new development.",
+    footnote = "Every contribution keeps the project independent and free.",
+    channelsLabel = "Ways to support",
+    icon,
+    heading: Heading = "h2",
+    className,
+    children,
+    ...props
+  }, ref) {
+    if (channels.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        "data-as": "sponsor-card",
+        className: cn(
+          "relative flex flex-col gap-4 overflow-hidden rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface)] p-6 shadow-[var(--as-shadow-1)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute -right-12 -top-12 size-36 rounded-full bg-[var(--as-primary)] opacity-10 blur-2xl"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-start gap-3.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "flex size-10 shrink-0 items-center justify-center rounded-[var(--as-radius)] bg-[color-mix(in_srgb,var(--as-danger)_12%,transparent)] text-[var(--as-danger)] [&_svg]:size-5",
+                children: icon ?? /* @__PURE__ */ jsx(Heart, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 pt-0.5", children: [
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  "data-as": "sponsor-title",
+                  className: "text-base font-semibold leading-tight tracking-tight text-[var(--as-fg)]",
+                  children: title
+                }
+              ),
+              description ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-[var(--as-muted-fg)]", children: description }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              "data-as": "sponsor-channels",
+              "aria-label": channelsLabel,
+              className: "relative flex list-none flex-col gap-2",
+              children: channels.map((channel) => {
+                const Icon = channel.icon ?? Heart;
+                const external = channel.external !== false;
+                return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: channel.href,
+                    ...external ? { target: "_blank", rel: "noreferrer" } : {},
+                    "data-as": "sponsor-channel",
+                    "data-as-channel": channel.id,
+                    "data-as-highlight": channel.highlight ? "true" : void 0,
+                    className: cn(
+                      rowBase,
+                      channel.highlight ? "bg-[var(--as-primary)] text-[var(--as-primary-fg)] shadow-[var(--as-shadow-2)] hover:bg-[var(--as-accent-strong)] hover:shadow-[var(--as-shadow-3)]" : "border border-[var(--as-border)] bg-[var(--as-surface-raised)] hover:border-[var(--as-primary)] hover:shadow-[var(--as-shadow-2)]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "flex size-9 shrink-0 items-center justify-center rounded-[var(--as-radius)] transition-transform group-hover:scale-105 [&_svg]:size-[18px]",
+                            channel.highlight ? "bg-[color-mix(in_srgb,var(--as-primary-fg)_18%,transparent)]" : "bg-[var(--as-secondary)] text-[var(--as-secondary-fg)]"
+                          ),
+                          children: /* @__PURE__ */ jsx(Icon, { className: "size-[18px]" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "block truncate text-sm font-semibold",
+                              channel.highlight ? "text-[var(--as-primary-fg)]" : "text-[var(--as-fg)]"
+                            ),
+                            children: channel.name
+                          }
+                        ),
+                        channel.description ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "block truncate text-xs",
+                              channel.highlight ? "text-[color-mix(in_srgb,var(--as-primary-fg)_78%,transparent)]" : "text-[var(--as-muted-fg)]"
+                            ),
+                            children: channel.description
+                          }
+                        ) : null
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "flex size-7 shrink-0 items-center justify-center rounded-full transition-all group-hover:scale-110",
+                            channel.highlight ? "bg-[color-mix(in_srgb,var(--as-primary-fg)_20%,transparent)] group-hover:bg-[color-mix(in_srgb,var(--as-primary-fg)_32%,transparent)]" : "text-[var(--as-muted-fg)] group-hover:text-[var(--as-primary)]"
+                          ),
+                          children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+                        }
+                      )
+                    ]
+                  }
+                ) }, channel.id);
+              })
+            }
+          ),
+          footnote ? /* @__PURE__ */ jsxs("p", { className: "relative flex items-center gap-2 border-t border-[var(--as-border)] pt-4 text-xs leading-relaxed text-[var(--as-muted-fg)]", children: [
+            /* @__PURE__ */ jsx(
+              Heart,
+              {
+                "aria-hidden": true,
+                className: "size-3.5 shrink-0 fill-[var(--as-danger)] text-[var(--as-danger)]"
+              }
+            ),
+            footnote
+          ] }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+var marks2 = {
+  health: HealthMark,
+  career: CareerMark,
+  study: StudyMark
+};
+var AboutPanel = React2.forwardRef(
+  function AboutPanel2({
+    appName,
+    familyCurrent,
+    logo,
+    tagline,
+    description,
+    version,
+    license,
+    licenseTitle = "License & open source",
+    licenseLinkLabel = "Read license",
+    links,
+    linksTitle = "Links",
+    creator,
+    creatorTitle = "Created by",
+    tech,
+    techTitle = "Built with",
+    note,
+    sponsor,
+    familyMembers,
+    hubUrl,
+    familyLabel,
+    familyBlurb,
+    familyCtaLabel,
+    familyCurrentLabel,
+    theme = "light",
+    copyright,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const DefaultMark = familyCurrent ? marks2[familyCurrent] : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-as": "about-panel",
+        className: cn("flex w-full flex-col gap-6", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("section", { className: "flex items-start gap-5", children: [
+            logo ?? (DefaultMark ? /* @__PURE__ */ jsx(DefaultMark, { size: 72, theme }) : null),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 pt-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--as-fg)]", children: appName }),
+                version ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", "data-as": "about-version", children: [
+                  "v",
+                  version
+                ] }) : null
+              ] }),
+              tagline ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--as-muted-fg)]", children: tagline }) : null,
+              description ? /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-sm leading-relaxed text-[var(--as-muted-fg)]", children: description }) : null
+            ] })
+          ] }),
+          creator || license || links?.length ? /* @__PURE__ */ jsxs("section", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+            creator && !familyCurrent ? /* @__PURE__ */ jsxs(AboutCard, { title: creatorTitle, children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--as-fg)]", children: creator.name }),
+              creator.role ? /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm text-[var(--as-muted-fg)]", children: creator.role }) : null,
+              creator.links?.length ? /* @__PURE__ */ jsx(AboutLinkList, { links: creator.links }) : null
+            ] }) : null,
+            license ? /* @__PURE__ */ jsx(AboutCard, { title: licenseTitle, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-muted)] px-4 py-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--as-fg)]", children: license.name }),
+              license.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: license.href,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "text-xs font-bold text-[var(--as-primary)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--as-primary)]",
+                  children: licenseLinkLabel
+                }
+              ) : null
+            ] }) }) : null,
+            links?.length ? /* @__PURE__ */ jsx(AboutCard, { title: linksTitle, children: /* @__PURE__ */ jsx(AboutLinkList, { links }) }) : null
+          ] }) : null,
+          sponsor ? /* @__PURE__ */ jsx(
+            SponsorCard,
+            {
+              channels: sponsor.channels,
+              title: sponsor.title,
+              description: sponsor.description,
+              footnote: sponsor.footnote,
+              channelsLabel: sponsor.channelsLabel
+            }
+          ) : null,
+          tech?.length ? /* @__PURE__ */ jsx(AboutCard, { title: techTitle, children: /* @__PURE__ */ jsx(TechChips, { items: tech }) }) : null,
+          note ? /* @__PURE__ */ jsx(AboutNote, { tone: note.tone, title: note.title, children: note.children }) : null,
+          familyCurrent ? /* @__PURE__ */ jsx(
+            FamilyBadge,
+            {
+              current: familyCurrent,
+              members: familyMembers,
+              creator: creator ? { name: creator.name, role: creator.role, href: creator.href } : void 0,
+              creatorLabel: creatorTitle,
+              hubUrl,
+              label: familyLabel,
+              blurb: familyBlurb,
+              ctaLabel: familyCtaLabel,
+              currentLabel: familyCurrentLabel,
+              theme
+            }
+          ) : null,
+          version || copyright ? /* @__PURE__ */ jsx(AboutFooterLine, { version, copyright }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+
+export { AboutCard, AboutFooterLine, AboutLinkList, AboutNote, AboutPanel, FamilyBadge, SponsorCard, TechChips };
+//# sourceMappingURL=chunk-7RTSSBBR.js.map
+//# sourceMappingURL=chunk-7RTSSBBR.js.map