@eduardoalvarez/arrecife 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.9.0](https://github.com/Proskynete/arrecife/compare/v0.8.0...v0.9.0) (2026-09-08)
+
+
+### 🚀 Novedades
+
+* **chart:** the axes get their own tick formatters ([25e9311](https://github.com/Proskynete/arrecife/commit/25e93118775b9ce0c6091d3a98cd9067f7ddc8cb))
+* **components:** the signature prints the site's domain, not the identity's ([6d9839d](https://github.com/Proskynete/arrecife/commit/6d9839dbf43b8820431a78c9100dac607e6e1b8e))
+
 ## [0.8.0](https://github.com/Proskynete/arrecife/compare/v0.7.0...v0.8.0) (2026-09-06)
 
 

package/dist/chart/index.cjs

@@ -299,6 +299,7 @@ var rows = (data) => data;
 var color = (series2, index) => series2.color ?? seriesColor(index);
 var MARGIN = { left: 0, right: 12, top: 8, bottom: 0 };
 var AXIS = { tickLine: false, axisLine: false };
+var tickOf = (format) => format ? { tickFormatter: format } : {};
 var legendOf = (series2, legend) => legend ?? series2.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) }, "legend") : null;
 var tooltipOf = (formatter) => /* @__PURE__ */ jsxRuntime.jsx(
   ChartTooltip,
@@ -313,6 +314,8 @@ function AreaChart({
   series: series2,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   legend,
   stacked = false,
   ...container
@@ -324,8 +327,8 @@ function AreaChart({
       /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: color(s, i), stopOpacity: 0.05 })
     ] }, s.key)) }),
     /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
     tooltipOf(formatter),
     legendOf(series2, legend),
     series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -349,6 +352,8 @@ function BarChart({
   series: series2,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   legend,
   orientation = "vertical",
   stacked = false,
@@ -364,11 +369,30 @@ function BarChart({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: lying, horizontal: !lying }),
         lying ? [
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: xKey, type: "category", ...AXIS, width: 130 }, "category"),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", hide: true }, "value")
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              dataKey: xKey,
+              type: "category",
+              ...AXIS,
+              width: 130,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
         ] : [
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }, "category"),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }, "value")
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: xKey,
+              ...AXIS,
+              tickMargin: 8,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
         ],
         tooltipOf(formatter),
         legendOf(series2, legend),
@@ -393,13 +417,15 @@ function LineChart({
   series: series2,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   legend,
   ...container
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: rows(data), margin: MARGIN, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
     tooltipOf(formatter),
     legendOf(series2, legend),
     series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(

package/dist/chart/index.d.cts

@@ -165,6 +165,28 @@ type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
     xKey: string;
     /** Formats the value in the tooltip. The library imposes no locale. */
     formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Formats the TICK on the category axis. Returns a string, because an axis
+     * tick is an SVG `<text>` and not a place a node can go.
+     *
+     * It is separate from `formatter` because the two answer different questions.
+     * The tooltip has room for «15 de julio de 2026»; a tick on a 30-day series
+     * has room for «07-15», and without this the axis prints the raw key —
+     * `2026-07-15` repeated thirty times, overlapping into a grey band.
+     *
+     * The library imposes no format: a date key can be a day, a month or a course
+     * name, and only the project knows which. See `docs/decisions/0.9.md` § 50.
+     */
+    xTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * Formats the tick on the VALUE axis — the currency symbol, the thousands
+     * separator, the percent sign.
+     *
+     * Same reason as `xTickFormatter` and the same shape. `formatter` reaches the
+     * tooltip only, so without this a revenue chart reads «1200» on the axis and
+     * «$1200» in the tooltip, and the axis is the one you read while comparing.
+     */
+    yTickFormatter?: ((value: unknown) => string) | 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
@@ -195,7 +217,7 @@ 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;
+declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
 /**
  * Bars, upright or lying down.
  *
@@ -219,7 +241,7 @@ type BarChartProps = SeriesChartProps & {
     /** 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;
+declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
 /**
  * Lines, for comparing series against each other.
  *
@@ -232,6 +254,6 @@ declare function BarChart({ data, series, xKey, formatter, legend, orientation,
  * where it means «this one».
  */
 type LineChartProps = SeriesChartProps;
-declare function LineChart({ data, series, xKey, formatter, legend, ...container }: LineChartProps): react.JSX.Element;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
 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.d.ts

@@ -165,6 +165,28 @@ type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
     xKey: string;
     /** Formats the value in the tooltip. The library imposes no locale. */
     formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Formats the TICK on the category axis. Returns a string, because an axis
+     * tick is an SVG `<text>` and not a place a node can go.
+     *
+     * It is separate from `formatter` because the two answer different questions.
+     * The tooltip has room for «15 de julio de 2026»; a tick on a 30-day series
+     * has room for «07-15», and without this the axis prints the raw key —
+     * `2026-07-15` repeated thirty times, overlapping into a grey band.
+     *
+     * The library imposes no format: a date key can be a day, a month or a course
+     * name, and only the project knows which. See `docs/decisions/0.9.md` § 50.
+     */
+    xTickFormatter?: ((value: unknown) => string) | undefined;
+    /**
+     * Formats the tick on the VALUE axis — the currency symbol, the thousands
+     * separator, the percent sign.
+     *
+     * Same reason as `xTickFormatter` and the same shape. `formatter` reaches the
+     * tooltip only, so without this a revenue chart reads «1200» on the axis and
+     * «$1200» in the tooltip, and the axis is the one you read while comparing.
+     */
+    yTickFormatter?: ((value: unknown) => string) | 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
@@ -195,7 +217,7 @@ 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;
+declare function AreaChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
 /**
  * Bars, upright or lying down.
  *
@@ -219,7 +241,7 @@ type BarChartProps = SeriesChartProps & {
     /** 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;
+declare function BarChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
 /**
  * Lines, for comparing series against each other.
  *
@@ -232,6 +254,6 @@ declare function BarChart({ data, series, xKey, formatter, legend, orientation,
  * where it means «this one».
  */
 type LineChartProps = SeriesChartProps;
-declare function LineChart({ data, series, xKey, formatter, legend, ...container }: LineChartProps): react.JSX.Element;
+declare function LineChart({ data, series, xKey, formatter, xTickFormatter, yTickFormatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
 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

@@ -106,6 +106,7 @@ 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 tickOf = (format) => format ? { tickFormatter: format } : {};
 var legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
 var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
   ChartTooltip,
@@ -120,6 +121,8 @@ function AreaChart({
   series,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   legend,
   stacked = false,
   ...container
@@ -131,8 +134,8 @@ function AreaChart({
       /* @__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 }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(
@@ -156,6 +159,8 @@ function BarChart({
   series,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   legend,
   orientation = "vertical",
   stacked = false,
@@ -171,11 +176,30 @@ function BarChart({
       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(
+            YAxis,
+            {
+              dataKey: xKey,
+              type: "category",
+              ...AXIS,
+              width: 130,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
         ] : [
-          /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }, "category"),
-          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }, "value")
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xKey,
+              ...AXIS,
+              tickMargin: 8,
+              ...tickOf(xTickFormatter)
+            },
+            "category"
+          ),
+          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
         ],
         tooltipOf(formatter),
         legendOf(series, legend),
@@ -200,13 +224,15 @@ function LineChart({
   series,
   xKey,
   formatter,
+  xTickFormatter,
+  yTickFormatter,
   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 }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(

package/dist/index.cjs

@@ -3255,6 +3255,7 @@ function SocialRow({ social }) {
 function Signature({
   year,
   href,
+  domain: domainName = naming.domain,
   className
 }) {
   const domain = href ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3262,9 +3263,9 @@ function Signature({
     {
       href,
       className: "text-accent hover:text-text-primary transition-standard rounded-chip focus-ring cursor-pointer",
-      children: naming.domain
+      children: domainName
     }
-  ) : naming.domain;
+  ) : domainName;
   return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: cn("shrink-0", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
       "$",
@@ -3307,6 +3308,7 @@ function Footer({
   brand: brand2,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   signatureHref,
+  domain,
   className,
   ...rest
 }) {
@@ -3346,7 +3348,7 @@ function Footer({
           /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
         ] }, column.title)) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, className: "text-center sm:text-right" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "text-center sm:text-right" }) })
     ] });
   }
   const rows = [
@@ -3357,7 +3359,7 @@ function Footer({
   return /* @__PURE__ */ jsxRuntime.jsxs(Shell, { className, contentClassName: "gap-step-lg", ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
       first ?? null,
-      /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, className: "ml-auto" })
+      /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "ml-auto" })
     ] }),
     others
   ] });

package/dist/index.d.cts

@@ -950,9 +950,10 @@ declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteE
 /**
  * The footer, and the site's CLI signature: `$ cd ~/eduardoalvarez.dev/2026`.
  *
- * The domain comes from `naming.domain` and not from a hand-written string, for
+ * The domain defaults to `naming.domain` and not to a hand-written string, for
  * the same reason as the wordmark: if it changes, it changes in all five
- * projects at once.
+ * projects at once. A project that lives on its OWN domain passes `domain` —
+ * see `docs/decisions/0.9.md` § 49.
  *
  * The social links are icons with NO visible text, so `aria-label` is not an
  * improvement: it is the only thing that makes them legible. Which is why it is
@@ -1038,6 +1039,21 @@ type FooterBase = Omit<ComponentPropsWithoutRef<'footer'>, 'children'> & {
      * signature is text, which is what it has always been.
      */
     signatureHref?: string | undefined;
+    /**
+     * The domain the signature prints, defaulting to the identity's own.
+     *
+     * It exists because the default is right for the sites that ARE
+     * `eduardoalvarez.dev` and wrong for the ones that are not: `cursos` lives on
+     * `cursos.eduardoalvarez.dev` and had been printing it since before this
+     * component existed. Adopting the footer would have made a site sign with its
+     * parent's domain — a fact, not a style, and one nothing in the type could
+     * have warned about.
+     *
+     * It is a domain and not a whole signature: the `$`, the `cd ~/` and the year
+     * are the identity's and stay the component's. See `docs/decisions/0.9.md`
+     * § 49.
+     */
+    domain?: string | undefined;
 };
 type FooterProps = FooterBase & ({
     /** The shape the library has always had: stacked rows and the signature at the top right. */
@@ -1073,7 +1089,7 @@ type FooterProps = FooterBase & ({
         children: ReactNode;
     }) => ReactNode) | undefined;
 });
-declare function Footer({ variant, columns, description, action, linkAsChild, social, brand, year, signatureHref, className, ...rest }: FooterProps): react.JSX.Element;
+declare function Footer({ variant, columns, description, action, linkAsChild, social, brand, year, signatureHref, domain, className, ...rest }: FooterProps): react.JSX.Element;
 
 /**
  * ONE per site. It is the only piece in the system that is spent like the

package/dist/index.d.ts

@@ -950,9 +950,10 @@ declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteE
 /**
  * The footer, and the site's CLI signature: `$ cd ~/eduardoalvarez.dev/2026`.
  *
- * The domain comes from `naming.domain` and not from a hand-written string, for
+ * The domain defaults to `naming.domain` and not to a hand-written string, for
  * the same reason as the wordmark: if it changes, it changes in all five
- * projects at once.
+ * projects at once. A project that lives on its OWN domain passes `domain` —
+ * see `docs/decisions/0.9.md` § 49.
  *
  * The social links are icons with NO visible text, so `aria-label` is not an
  * improvement: it is the only thing that makes them legible. Which is why it is
@@ -1038,6 +1039,21 @@ type FooterBase = Omit<ComponentPropsWithoutRef<'footer'>, 'children'> & {
      * signature is text, which is what it has always been.
      */
     signatureHref?: string | undefined;
+    /**
+     * The domain the signature prints, defaulting to the identity's own.
+     *
+     * It exists because the default is right for the sites that ARE
+     * `eduardoalvarez.dev` and wrong for the ones that are not: `cursos` lives on
+     * `cursos.eduardoalvarez.dev` and had been printing it since before this
+     * component existed. Adopting the footer would have made a site sign with its
+     * parent's domain — a fact, not a style, and one nothing in the type could
+     * have warned about.
+     *
+     * It is a domain and not a whole signature: the `$`, the `cd ~/` and the year
+     * are the identity's and stay the component's. See `docs/decisions/0.9.md`
+     * § 49.
+     */
+    domain?: string | undefined;
 };
 type FooterProps = FooterBase & ({
     /** The shape the library has always had: stacked rows and the signature at the top right. */
@@ -1073,7 +1089,7 @@ type FooterProps = FooterBase & ({
         children: ReactNode;
     }) => ReactNode) | undefined;
 });
-declare function Footer({ variant, columns, description, action, linkAsChild, social, brand, year, signatureHref, className, ...rest }: FooterProps): react.JSX.Element;
+declare function Footer({ variant, columns, description, action, linkAsChild, social, brand, year, signatureHref, domain, className, ...rest }: FooterProps): react.JSX.Element;
 
 /**
  * ONE per site. It is the only piece in the system that is spent like the

package/dist/index.js

@@ -2510,6 +2510,7 @@ function SocialRow({ social }) {
 function Signature({
   year,
   href,
+  domain: domainName = naming.domain,
   className
 }) {
   const domain = href ? /* @__PURE__ */ jsx(
@@ -2517,9 +2518,9 @@ function Signature({
     {
       href,
       className: "text-accent hover:text-text-primary transition-standard rounded-chip focus-ring cursor-pointer",
-      children: naming.domain
+      children: domainName
     }
-  ) : naming.domain;
+  ) : domainName;
   return /* @__PURE__ */ jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: cn("shrink-0", className), children: [
     /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
       "$",
@@ -2562,6 +2563,7 @@ function Footer({
   brand: brand2,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   signatureHref,
+  domain,
   className,
   ...rest
 }) {
@@ -2601,7 +2603,7 @@ function Footer({
           /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
         ] }, column.title)) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, className: "text-center sm:text-right" }) })
+      /* @__PURE__ */ jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, domain, className: "text-center sm:text-right" }) })
     ] });
   }
   const rows = [
@@ -2612,7 +2614,7 @@ function Footer({
   return /* @__PURE__ */ jsxs(Shell, { className, contentClassName: "gap-step-lg", ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
       first ?? null,
-      /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, className: "ml-auto" })
+      /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, domain, className: "ml-auto" })
     ] }),
     others
   ] });

package/llms.txt

@@ -1448,6 +1448,7 @@ Source: `src/components/footer/index.tsx`
 | `brand` | `ReactNode` |  |  | The brand row: the fin and the wordmark, at the very top. |
 | `columns` | `readonly FooterColumn[]` |  |  | The link columns. Mandatory: without them `full` is the default form with extra steps. |
 | `description` | `ReactNode` |  |  | One line under the brand, saying what the site is. |
+| `domain` | `string` |  |  | The domain the signature prints, defaulting to the identity's own. |
 | `linkAsChild` | `(props: { href: string; children: ReactNode; }) => ReactNode` |  |  | Renders the column links through the child, to plug in the framework's `Link`. It receives each `href` in the Slot's `props`. |
 | `signatureHref` | `string` |  |  | Makes the domain inside the signature a link, keeping the `$`, the path and the prompt's mark as text. |
 | `social` | `readonly SocialLink[]` |  |  |  |
@@ -1863,6 +1864,8 @@ A series over time, with the fill fading out underneath it.
 | `stacked` | `boolean \| undefined` |  | `false` | Adds the series up instead of overlaying them. |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
 
 **BarChart**
 Bars, upright or lying down.
@@ -1881,6 +1884,8 @@ Bars, upright or lying down.
 | `stacked` | `boolean \| undefined` |  | `false` | Stacks the series instead of putting them side by side. |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
 
 **LineChart**
 Lines, for comparing series against each other.
@@ -1897,6 +1902,8 @@ Lines, for comparing series against each other.
 | `series` | `readonly ChartSeries[]` | yes |  |  |
 | `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
 | `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
 
 ## Exports that are not components
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The component library of Eduardo Álvarez’s visual identity",
   "license": "MIT",
   "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",