@eduardoalvarez/arrecife 0.7.0 → 0.8.0

package/dist/chart/index.d.ts

@@ -22,9 +22,15 @@ import { Legend, Tooltip } from 'recharts';
  *   3. The tooltip appears where it will stay: `isAnimationActive` is off
  *      everywhere, because the system does not animate position.
  *
- * The data pieces — `BarChart`, `Line`, `XAxis` — are NOT re-exported. They are
- * Recharts' API, the project already knows it, and wrapping them would be a
- * layer of names to keep in sync with the library's version.
+ * Recharts' data pieces — `Area`, `Line`, `XAxis` — are still NOT re-exported.
+ * They are Recharts' API, the project already knows it, and wrapping them would
+ * be a layer of names to keep in sync with the library's version.
+ *
+ * What IS published, since this version, are three CHART TYPES on top of that
+ * chassis: `AreaChart`, `BarChart` and `LineChart`. They are not wrappers over
+ * Recharts' components of the same name — they take `data`, `series` and `xKey`
+ * and draw the whole thing. See `docs/decisions/0.8.md` § 43 for why the names
+ * collide on purpose.
  */
 /**
  * The color of series `index`, as a custom property.
@@ -123,5 +129,109 @@ type ChartLegendContentProps = {
 };
 /** The legend, with the tooltip's same square swatch and the `label` scale. */
 declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
+/**
+ * One series: which key of the datum it reads, what it is called, and — only if
+ * you insist — what color it is.
+ *
+ * `color` is there for the case the palette cannot serve: a status series where
+ * «pagado» has to be `success` and not «the first of the four». Leaving it out
+ * is the normal case and the right one — `seriesColor(i)` follows the mode, and
+ * a hard-coded hex does not. See the note on `seriesColor` above.
+ */
+type ChartSeries = {
+    /** The key this series reads in each datum. */
+    key: string;
+    /** What the legend and the tooltip call it. User-facing, so Spanish. */
+    label: string;
+    /** Overrides the palette. Defaults to `seriesColor(index)`. */
+    color?: string | undefined;
+};
+/** A row of the chart: the category key plus one value per series. */
+type ChartDatum = Record<string, unknown>;
+/**
+ * What all three types take, and it is deliberately short: `data`, `series` and
+ * `xKey`, plus the container's own `label`.
+ *
+ * Everything that is NOT here is the part that was being copied — the gradient,
+ * the grid with no vertical lines, the axes with no line and no tick, the
+ * tooltip with no cursor. `cursos` wrote all of it four times, once per chart,
+ * and the fourth one would have had a different `strokeWidth` from the first.
+ * The drawing is the system's; the data is the project's.
+ */
+type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    /** The key on the category axis: the day, the month, the course. */
+    xKey: string;
+    /** Formats the value in the tooltip. The library imposes no locale. */
+    formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Shows the legend. It defaults to «only when there is more than one series»:
+     * a legend naming the one line already named by the chart's own heading is a
+     * row of pixels that says nothing.
+     */
+    legend?: boolean | undefined;
+};
+/**
+ * A series over time, with the fill fading out underneath it.
+ *
+ * The gradient is the whole reason this is a component and not three lines at
+ * the call site: it needs a `<linearGradient>` with an id, the id has to be
+ * unique on the page, and the two projects that wrote it by hand both hardcoded
+ * one — a second chart on the same screen would have taken the first one's fill.
+ * `useId` settles it.
+ *
+ * 0.5 down to 0.05 is the ramp `cursos` arrived at, and `type="natural"` is its
+ * curve: a monotone spline reads as a measurement and a straight segment reads
+ * as a schedule. The stroke is 2, which is the one weight in the system that is
+ * neither a hairline nor a border.
+ *
+ * With more than one series the areas OVERLAP rather than stack, because a
+ * stacked area answers «how much in total» and this library has no way to know
+ * that is the question. When it is, pass `stacked`. When you want to compare
+ * rather than add up, the answer is `LineChart`.
+ */
+type AreaChartProps = SeriesChartProps & {
+    /** Adds the series up instead of overlaying them. */
+    stacked?: boolean | undefined;
+};
+declare function AreaChart({ data, series, xKey, formatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
+/**
+ * Bars, upright or lying down.
+ *
+ * `orientation` is named for what you SEE and not for what Recharts calls it,
+ * and the two are opposites: Recharts' `layout="vertical"` draws horizontal
+ * bars. That inversion is a coin flip every time somebody writes it, so it is
+ * settled here once — `vertical` means the bars grow upwards.
+ *
+ * `horizontal` is the shape for a ranking, which is what `cursos` uses it for:
+ * course names on the left, one bar each. It reserves 130px for the category
+ * axis and hides the value axis, because a ranking is read by comparing lengths
+ * and not by reading a number off a scale — the number is in the tooltip.
+ *
+ * The corner radius is `radius.chip`, the system's smallest. A bar is a chip
+ * lying down, and picking a number that is not a token is how a fifth radius
+ * gets into the system without anybody deciding it should.
+ */
+type BarChartProps = SeriesChartProps & {
+    /** `vertical` grows the bars upwards, which is the default. `horizontal` is a ranking. */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Stacks the series instead of putting them side by side. */
+    stacked?: boolean | undefined;
+};
+declare function BarChart({ data, series, xKey, formatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
+/**
+ * Lines, for comparing series against each other.
+ *
+ * It is the type that does NOT add anything up, which is the whole reason it
+ * exists next to `AreaChart`: four filled areas on top of each other are a
+ * total, and four lines are four things you can tell apart.
+ *
+ * No dots at rest. A point per datum on a 90-day series is a dotted line, and
+ * the value is in the tooltip; the dot comes back on hover because that is
+ * where it means «this one».
+ */
+type LineChartProps = SeriesChartProps;
+declare function LineChart({ data, series, xKey, formatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
-export { ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, SERIES_COLORS, seriesColor };
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, ChartContainer, type ChartContainerProps, type ChartDatum, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, LineChart, type LineChartProps, SERIES_COLORS, type SeriesChartProps, seriesColor };

package/dist/chart/index.js

@@ -1,10 +1,11 @@
 'use client';
-import { Text } from '../chunk-WGNIRIN7.js';
+import { Text } from '../chunk-TRPBID2W.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-2WPWEIMD.js';
-import '../chunk-OMKSESQB.js';
+import { cn } from '../chunk-FAAGZG7A.js';
+import { radius } from '../chunk-FGFNK72B.js';
 import '../chunk-MLKGABMK.js';
-import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { useId } from 'react';
+import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function seriesColor(index) {
@@ -101,5 +102,128 @@ function ChartLegendContent({ payload, className }) {
     /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.value })
   ] }, `${String(item.dataKey ?? item.value ?? i)}`)) });
 }
+var rows = (data) => data;
+var color = (series, index) => series.color ?? seriesColor(index);
+var MARGIN = { left: 0, right: 12, top: 8, bottom: 0 };
+var AXIS = { tickLine: false, axisLine: false };
+var legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
+var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
+  ChartTooltip,
+  {
+    cursor: false,
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: formatter ? (value) => formatter(value) : void 0 })
+  },
+  "tooltip"
+);
+function AreaChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  legend,
+  stacked = false,
+  ...container
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${s.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color(s, i), stopOpacity: 0.5 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color(s, i), stopOpacity: 0.05 })
+    ] }, s.key)) }),
+    /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        fill: `url(#${id}-${s.key})`,
+        isAnimationActive: false,
+        ...stacked ? { stackId: "stack" } : {}
+      },
+      s.key
+    ))
+  ] }) });
+}
+function BarChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  legend,
+  orientation = "vertical",
+  stacked = false,
+  ...container
+}) {
+  const lying = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data: rows(data),
+      margin: MARGIN,
+      ...lying ? { layout: "vertical" } : {},
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: lying, horizontal: !lying }),
+        lying ? [
+          /* @__PURE__ */ jsx(YAxis, { dataKey: xKey, type: "category", ...AXIS, width: 130 }, "category"),
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true }, "value")
+        ] : [
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }, "category"),
+          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }, "value")
+        ],
+        tooltipOf(formatter),
+        legendOf(series, legend),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: s.key,
+            name: s.label,
+            fill: color(s, i),
+            radius: lying ? [0, radius.chip, radius.chip, 0] : [radius.chip, radius.chip, 0, 0],
+            isAnimationActive: false,
+            ...stacked ? { stackId: "stack" } : {}
+          },
+          s.key
+        ))
+      ]
+    }
+  ) });
+}
+function LineChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  legend,
+  ...container
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        dot: false,
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.key
+    ))
+  ] }) });
+}
 
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, SERIES_COLORS, seriesColor };
+export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, LineChart, SERIES_COLORS, seriesColor };

package/dist/{chunk-TA7TLWW4.js → chunk-5A5GH2PF.js}

@@ -1,4 +1,4 @@
-import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-OMKSESQB.js';
+import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-FGFNK72B.js';
 
 // src/tokens/index.ts
 var tokens = {

package/dist/{chunk-727HCBD4.js → chunk-6IGD5REB.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-2WPWEIMD.js';
+import { cn } from './chunk-FAAGZG7A.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-2WPWEIMD.js → chunk-FAAGZG7A.js}

@@ -1,4 +1,4 @@
-import { spacing, control, radius, typeScale } from './chunk-OMKSESQB.js';
+import { spacing, control, radius, typeScale } from './chunk-FGFNK72B.js';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 

package/dist/{chunk-OMKSESQB.js → chunk-FGFNK72B.js}

@@ -144,7 +144,7 @@ var typeScale = {
    * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
    * At 13 the three badge families grew past the size of a small button and
-   * outweighed the title they accompany. See `docs/decisions.md`.
+   * outweighed the title they accompany. See `docs/decisions/`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -198,7 +198,7 @@ var control = {
    * baseline; 28 would have been a fifth height that matches nothing.
    *
    * It does not replace `icon`. A page's primary action stays at 42; this is for
-   * a row of a table. See `docs/decisions.md` § 22.
+   * a row of a table. See `docs/decisions/0.6.md` § 22.
    */
   iconSm: 32
 };
@@ -221,7 +221,7 @@ var size = {
    * together eat the top of the content area. 56 is what `cursos` had arrived at
    * on its own, and it is the same reasoning as `control.iconSm`: the one admin
    * app of the five is denser than the four reading sites. See
-   * `docs/decisions.md` § 30.
+   * `docs/decisions/0.7.md` § 30.
    */
   navCompact: 56,
   /**

package/dist/chunk-HOADZ6GS.js

@@ -0,0 +1,72 @@
+import { gitHubGlyph, linkedInGlyph, xGlyph, instagramGlyph, discordGlyph, youTubeGlyph, rssGlyph, emailGlyph, newsletterGlyph, websiteGlyph, SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX } from './chunk-LXRGQKMG.js';
+import { __export } from './chunk-MLKGABMK.js';
+import { jsx } from 'react/jsx-runtime';
+
+// src/social/index.tsx
+var social_exports = {};
+__export(social_exports, {
+  Discord: () => Discord,
+  Email: () => Email,
+  GitHub: () => GitHub,
+  Instagram: () => Instagram,
+  LinkedIn: () => LinkedIn,
+  Newsletter: () => Newsletter,
+  Rss: () => Rss,
+  Website: () => Website,
+  X: () => X,
+  YouTube: () => YouTube
+});
+var SOLID = { fill: "currentColor", stroke: "none" };
+function drawShape(shape, index) {
+  if (shape.tag === "path") {
+    return /* @__PURE__ */ jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
+  }
+  if (shape.tag === "circle") {
+    return /* @__PURE__ */ jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
+  }
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: shape.x,
+      y: shape.y,
+      width: shape.width,
+      height: shape.height,
+      rx: shape.rx
+    },
+    index
+  );
+}
+function Glyph({ glyph, ...props }) {
+  const brand = glyph.kind === "brand";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: SOCIAL_VIEW_BOX,
+      width: "1em",
+      height: "1em",
+      fill: brand ? "currentColor" : "none",
+      ...brand ? {} : {
+        stroke: "currentColor",
+        strokeWidth: SOCIAL_STROKE_WIDTH,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children: glyph.shapes.map(drawShape)
+    }
+  );
+}
+var GitHub = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: gitHubGlyph, ...props });
+var LinkedIn = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: linkedInGlyph, ...props });
+var X = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: xGlyph, ...props });
+var Instagram = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: instagramGlyph, ...props });
+var Discord = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: discordGlyph, ...props });
+var YouTube = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: youTubeGlyph, ...props });
+var Rss = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: rssGlyph, ...props });
+var Email = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: emailGlyph, ...props });
+var Newsletter = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: newsletterGlyph, ...props });
+var Website = (props) => /* @__PURE__ */ jsx(Glyph, { glyph: websiteGlyph, ...props });
+
+export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube, social_exports };

package/dist/chunk-LXRGQKMG.js

@@ -0,0 +1,145 @@
+// src/social/data.ts
+var SOCIAL_STROKE_WIDTH = 1.6;
+var SOCIAL_VIEW_BOX = "0 0 24 24";
+var gitHubGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.91c.58.1.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z"
+    }
+  ]
+};
+var linkedInGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.71h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-3.97V9Z"
+    }
+  ]
+};
+var xGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M17.53 3h3.06l-6.69 7.64L21.75 21h-6.16l-4.83-6.3L5.25 21H2.19l7.15-8.17L2.5 3h6.32l4.36 5.77L17.53 3Zm-1.07 16.17h1.7L7.62 4.74H5.8l10.66 14.43Z"
+    }
+  ]
+};
+var instagramGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z"
+    }
+  ]
+};
+var discordGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M20.32 5.56A18.5 18.5 0 0 0 15.7 4.1a.07.07 0 0 0-.07.04c-.2.36-.42.82-.58 1.19a17 17 0 0 0-5.1 0c-.16-.38-.39-.83-.59-1.19a.07.07 0 0 0-.07-.04c-1.6.28-3.15.77-4.62 1.46a.06.06 0 0 0-.03.03C1.66 10 .9 14.28 1.28 18.5a.08.08 0 0 0 .03.05 18.6 18.6 0 0 0 5.6 2.84.07.07 0 0 0 .08-.03c.43-.59.81-1.21 1.14-1.86a.07.07 0 0 0-.04-.1c-.6-.23-1.18-.51-1.74-.83a.07.07 0 0 1-.01-.12l.35-.27a.07.07 0 0 1 .07-.01 13.3 13.3 0 0 0 11.3 0 .07.07 0 0 1 .08.01l.34.27c.04.04.04.1-.01.12-.55.33-1.13.6-1.74.83a.07.07 0 0 0-.04.1c.34.65.72 1.27 1.14 1.86a.07.07 0 0 0 .08.03 18.5 18.5 0 0 0 5.6-2.84.07.07 0 0 0 .04-.05c.45-4.88-.75-9.12-3.18-12.88a.06.06 0 0 0-.03-.03ZM8.4 15.93c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.9 2.25-2.02 2.25Zm7.22 0c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.89 2.25-2.02 2.25Z"
+    }
+  ]
+};
+var youTubeGlyph = {
+  kind: "brand",
+  shapes: [
+    {
+      tag: "path",
+      d: "M23.5 6.9a3 3 0 0 0-2.12-2.12C19.5 4.27 12 4.27 12 4.27s-7.5 0-9.38.51A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.12 2.12c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3 3 0 0 0 2.12-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6-6.24 3.6Z"
+    }
+  ]
+};
+var rssGlyph = {
+  kind: "functional",
+  shapes: [
+    { tag: "path", d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" },
+    { tag: "circle", cx: 5, cy: 19, r: 1.6, solid: true }
+  ]
+};
+var emailGlyph = {
+  kind: "functional",
+  shapes: [
+    { tag: "rect", x: 2.75, y: 4.75, width: 18.5, height: 14.5, rx: 2 },
+    { tag: "path", d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" }
+  ]
+};
+var newsletterGlyph = {
+  kind: "functional",
+  shapes: [
+    { tag: "path", d: "M18 8.5a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16s-2-1.5-2-6.5" },
+    { tag: "path", d: "M13.7 19a2 2 0 0 1-3.4 0" }
+  ]
+};
+var websiteGlyph = {
+  kind: "functional",
+  shapes: [
+    { tag: "circle", cx: 12, cy: 12, r: 9.25 },
+    { tag: "path", d: "M2.75 12h18.5" },
+    { tag: "path", d: "M12 2.75a14 14 0 0 1 0 18.5a14 14 0 0 1 0-18.5" }
+  ]
+};
+var socialGlyphs = {
+  Discord: discordGlyph,
+  Email: emailGlyph,
+  GitHub: gitHubGlyph,
+  Instagram: instagramGlyph,
+  LinkedIn: linkedInGlyph,
+  Newsletter: newsletterGlyph,
+  Rss: rssGlyph,
+  Website: websiteGlyph,
+  X: xGlyph,
+  YouTube: youTubeGlyph
+};
+var socialNames = Object.keys(socialGlyphs);
+var escape = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var attributes = (pairs) => Object.entries(pairs).map(([key, value]) => ` ${key}="${escape(String(value))}"`).join("");
+var shapeMarkup = (shape) => {
+  const solid = { fill: "currentColor", stroke: "none" };
+  if (shape.tag === "path") {
+    return `<path${attributes({ d: shape.d, ...shape.solid ? solid : {} })}/>`;
+  }
+  if (shape.tag === "circle") {
+    return `<circle${attributes({
+      cx: shape.cx,
+      cy: shape.cy,
+      r: shape.r,
+      ...shape.solid ? solid : {}
+    })}/>`;
+  }
+  return `<rect${attributes({
+    x: shape.x,
+    y: shape.y,
+    width: shape.width,
+    height: shape.height,
+    rx: shape.rx
+  })}/>`;
+};
+function socialSvg(name, extra = {}) {
+  const glyph = socialGlyphs[name];
+  const base = glyph.kind === "brand" ? { fill: "currentColor" } : {
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": SOCIAL_STROKE_WIDTH,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+  const open = attributes({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: SOCIAL_VIEW_BOX,
+    width: "1em",
+    height: "1em",
+    ...base,
+    "aria-hidden": "true",
+    focusable: "false",
+    ...extra
+  });
+  return `<svg${open}>${glyph.shapes.map(shapeMarkup).join("")}</svg>`;
+}
+
+export { SOCIAL_STROKE_WIDTH, SOCIAL_VIEW_BOX, discordGlyph, emailGlyph, gitHubGlyph, instagramGlyph, linkedInGlyph, newsletterGlyph, rssGlyph, socialGlyphs, socialNames, socialSvg, websiteGlyph, xGlyph, youTubeGlyph };

package/dist/{chunk-JN3IS5OS.js → chunk-MPZBF2TZ.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-2WPWEIMD.js';
 import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
-import { naming, tagline } from './chunk-OMKSESQB.js';
+import { cn } from './chunk-FAAGZG7A.js';
+import { naming, tagline } from './chunk-FGFNK72B.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Isotype({

package/dist/{chunk-WGNIRIN7.js → chunk-TRPBID2W.js}

@@ -1,5 +1,5 @@
 import { text } from './chunk-ODBFN44D.js';
-import { cn } from './chunk-2WPWEIMD.js';
+import { cn } from './chunk-FAAGZG7A.js';
 import { Slot } from '@radix-ui/react-slot';
 import 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-E6KFUSKB.js → chunk-XXDATT3A.js}

@@ -19,7 +19,7 @@ var button = cva(
         ],
         // The one control whose focus ring is not biolume. It is the system's
         // only sand fill, and a biolume ring three pixels off a sand button puts
-        // both of the brand's accents in the same glance. See `decisions.md` § 37.
+        // both of the brand's accents in the same glance. See `docs/decisions/0.7.md` § 37.
         conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
         secondary: [
           "border-hairline-hover border bg-transparent text-text-primary",