@eduardoalvarez/arrecife 0.6.0 → 0.8.0

package/dist/social/index.cjs

@@ -0,0 +1,153 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// 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 SOLID = { fill: "currentColor", stroke: "none" };
+function drawShape(shape, index) {
+  if (shape.tag === "path") {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
+  }
+  if (shape.tag === "circle") {
+    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { glyph: gitHubGlyph, ...props });
+var LinkedIn = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: linkedInGlyph, ...props });
+var X = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: xGlyph, ...props });
+var Instagram = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: instagramGlyph, ...props });
+var Discord = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: discordGlyph, ...props });
+var YouTube = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: youTubeGlyph, ...props });
+var Rss = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: rssGlyph, ...props });
+var Email = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: emailGlyph, ...props });
+var Newsletter = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: newsletterGlyph, ...props });
+var Website = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { glyph: websiteGlyph, ...props });
+
+exports.Discord = Discord;
+exports.Email = Email;
+exports.GitHub = GitHub;
+exports.Instagram = Instagram;
+exports.LinkedIn = LinkedIn;
+exports.Newsletter = Newsletter;
+exports.Rss = Rss;
+exports.Website = Website;
+exports.X = X;
+exports.YouTube = YouTube;

package/dist/social/index.d.cts

@@ -0,0 +1,2 @@
+import 'react';
+export { D as Discord, E as Email, G as GitHub, I as Instagram, L as LinkedIn, N as Newsletter, R as Rss, S as SocialIconProps, W as Website, X, Y as YouTube } from '../index-BbRplw_B.cjs';

package/dist/social/index.d.ts

@@ -0,0 +1,2 @@
+import 'react';
+export { D as Discord, E as Email, G as GitHub, I as Instagram, L as LinkedIn, N as Newsletter, R as Rss, S as SocialIconProps, W as Website, X, Y as YouTube } from '../index-BbRplw_B.js';

package/dist/social/index.js

@@ -0,0 +1,3 @@
+export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube } from '../chunk-HOADZ6GS.js';
+import '../chunk-LXRGQKMG.js';
+import '../chunk-MLKGABMK.js';

package/dist/tokens/index.cjs

@@ -146,7 +146,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 },
   /**
@@ -200,7 +200,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
 };
@@ -215,6 +215,30 @@ var spacing = {
 var size = {
   /** Navigation bar height. */
   nav: 64,
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * 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/0.7.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
   /** Reading column width. */
   content: 760,
   /** Maximum page width. */
@@ -247,9 +271,9 @@ var gradient = {
     og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {

package/dist/tokens/index.d.cts

@@ -280,7 +280,7 @@ declare const 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/`.
      */
     readonly chip: {
         readonly family: "mono";
@@ -336,7 +336,7 @@ declare const radius: {
  *
  * Only the horizontal padding and the icon button's square. Height comes from
  * the type scale, and there is a single radius for all three sizes: see
- * `docs/decisions.md`.
+ * `docs/decisions/`.
  *
  * They are not in `spacing` because they are not page rhythm: 14, 22 and 30 do
  * not compose with 8/12/16/26/40 and must not be offered as margins.
@@ -360,7 +360,7 @@ declare const 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.
      */
     readonly iconSm: 32;
 };
@@ -397,6 +397,30 @@ declare const spacing: {
 declare const size: {
     /** Navigation bar height. */
     readonly nav: 64;
+    /**
+     * The bar when it shares the screen with a sidebar.
+     *
+     * It is not «a smaller bar because it looks better». At 64 the header of an
+     * app shell competes with the rail beside it for the same corner, and the two
+     * 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/0.7.md` § 30.
+     */
+    readonly navCompact: 56;
+    /**
+     * The admin sidebar, and the rail it collapses to.
+     *
+     * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+     * has to know BOTH: the layout beside it reserves one of the two, and two
+     * numbers written by hand in two files drift the first time one of them moves.
+     * A sidebar that never collapses is still just a box the layout sizes.
+     *
+     * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+     * a square corner instead of a step.
+     */
+    readonly sidebar: 256;
+    readonly sidebarRail: 56;
     /** Reading column width. */
     readonly content: 760;
     /** Maximum page width. */
@@ -464,7 +488,7 @@ declare const syntax: {
  *
  * A fifth series is not added by inventing a hue. If a chart needs five
  * categories, either there are too many categories or they need an «other»
- * bucket: see `docs/decisions.md`.
+ * bucket: see `docs/decisions/`.
  */
 declare const series: {
     readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
@@ -478,9 +502,9 @@ declare const gradient: {
         readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
     };
     readonly light: {
-        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
     };
 };
 /** A single level. There is no elevation scale. */
@@ -711,6 +735,9 @@ declare const tokens: {
     };
     readonly size: {
         readonly nav: 64;
+        readonly navCompact: 56;
+        readonly sidebar: 256;
+        readonly sidebarRail: 56;
         readonly content: 760;
         readonly wide: 1180;
     };
@@ -721,9 +748,9 @@ declare const tokens: {
             readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
         };
         readonly light: {
-            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
         };
     };
     readonly syntax: {

package/dist/tokens/index.d.ts

@@ -280,7 +280,7 @@ declare const 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/`.
      */
     readonly chip: {
         readonly family: "mono";
@@ -336,7 +336,7 @@ declare const radius: {
  *
  * Only the horizontal padding and the icon button's square. Height comes from
  * the type scale, and there is a single radius for all three sizes: see
- * `docs/decisions.md`.
+ * `docs/decisions/`.
  *
  * They are not in `spacing` because they are not page rhythm: 14, 22 and 30 do
  * not compose with 8/12/16/26/40 and must not be offered as margins.
@@ -360,7 +360,7 @@ declare const 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.
      */
     readonly iconSm: 32;
 };
@@ -397,6 +397,30 @@ declare const spacing: {
 declare const size: {
     /** Navigation bar height. */
     readonly nav: 64;
+    /**
+     * The bar when it shares the screen with a sidebar.
+     *
+     * It is not «a smaller bar because it looks better». At 64 the header of an
+     * app shell competes with the rail beside it for the same corner, and the two
+     * 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/0.7.md` § 30.
+     */
+    readonly navCompact: 56;
+    /**
+     * The admin sidebar, and the rail it collapses to.
+     *
+     * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+     * has to know BOTH: the layout beside it reserves one of the two, and two
+     * numbers written by hand in two files drift the first time one of them moves.
+     * A sidebar that never collapses is still just a box the layout sizes.
+     *
+     * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+     * a square corner instead of a step.
+     */
+    readonly sidebar: 256;
+    readonly sidebarRail: 56;
     /** Reading column width. */
     readonly content: 760;
     /** Maximum page width. */
@@ -464,7 +488,7 @@ declare const syntax: {
  *
  * A fifth series is not added by inventing a hue. If a chart needs five
  * categories, either there are too many categories or they need an «other»
- * bucket: see `docs/decisions.md`.
+ * bucket: see `docs/decisions/`.
  */
 declare const series: {
     readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
@@ -478,9 +502,9 @@ declare const gradient: {
         readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
     };
     readonly light: {
-        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
     };
 };
 /** A single level. There is no elevation scale. */
@@ -711,6 +735,9 @@ declare const tokens: {
     };
     readonly size: {
         readonly nav: 64;
+        readonly navCompact: 56;
+        readonly sidebar: 256;
+        readonly sidebarRail: 56;
         readonly content: 760;
         readonly wide: 1180;
     };
@@ -721,9 +748,9 @@ declare const tokens: {
             readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
         };
         readonly light: {
-            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
         };
     };
     readonly syntax: {

package/dist/tokens/index.js

@@ -1,3 +1,3 @@
-export { tokens } from '../chunk-PMN7NR3G.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-O4TAH7YJ.js';
+export { tokens } from '../chunk-5A5GH2PF.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-FGFNK72B.js';
 import '../chunk-MLKGABMK.js';

package/dist/tokens/theme.css

@@ -123,6 +123,9 @@
   --spacing-control-icon-sm: 32px;
 
   --spacing-nav: 64px;
+  --spacing-nav-compact: 56px;
+  --spacing-sidebar: 256px;
+  --spacing-sidebar-rail: 56px;
   --container-content: 760px;
   --container-wide: 1180px;
   --container-measure: 68ch;
@@ -204,9 +207,9 @@
   --color-series-3: #3E7CB1;
   --color-series-4: #626A75;
 
-  --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%);
-  --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
-  --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%);
+  --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%);
+  --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%);
+  --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%);
 }
 
 /* --- the system's two gradients, as utilities -------------------------------
@@ -244,27 +247,54 @@
   animation: arrecife-shimmer 1.4s linear infinite;
 }
 
-/* --- the fifth exception: the caret of the CLI signature --------------------
-   A terminal prompt with a caret that does not blink is a terminal that has
-   hung. The caret is the one piece of the footer that says the signature is a
-   prompt and not a decorative string, and a still block reads as a typo.
-
-   step-end and not a fade: a real caret is on or off, and easing it turns a
-   terminal into a pulsing dot. 1.06s is the cadence of a VT100 and of the site
-   this comes from.
-
-   It is the only exception that is not feedback about progress, and it earns its
-   place on the other half of the criterion the other four share: it is not
-   decoration, it is what makes the piece legible as what it is. Behind
-   motion-safe, where the caret stays solid — which is a caret at rest, not a
-   missing one. See docs/decisions.md § 23. */
-@keyframes arrecife-caret {
-  0%, 50% { opacity: 1; }
-  50.01%, 100% { opacity: 0; }
+/* --- the fifth exception: the halo the CLI signature ends in ----------------
+   The mark stays solid and RADIATES: a ring grows out of it to 5px and fades.
+   It never turns off, and nothing about it is on-or-off.
+
+   THIS IS WHAT THE CLI SIGNATURE ENDS IN. Both sites that draw that signature
+   had it — cursos in app/globals.css, eduardoalvarez.dev in base.css — under
+   the name cursor-ping, and the blog's copy sat there with nothing rendering
+   it, because adopting the library's Footer had replaced its mark with a blink.
+   The library had overruled the identity in the one direction it is not allowed
+   to: it invented.
+
+   That blink shipped in 0.6.0 as a caret utility and it is GONE. It was kept
+   for one release on the grounds that a terminal caret is a real thing to want,
+   which is true and is not a reason: nothing in the library drew it, no
+   consumer had ever asked for it, and the argument that justified it had been
+   written from first principles about terminals rather than read off the two
+   sites that already had a signature. A utility with no consumer and no origin
+   is not a feature, it is the invention still sitting there under a new label.
+   See docs/decisions/0.8.md § 45.
+
+   Its reason is the one the other four exceptions share: it is feedback about
+   PROGRESS. A prompt that radiates says the terminal is live, which is the same
+   thing the button spinner says and the same thing a still mark cannot say.
+   With the caret gone the criterion is ONE again — progress or spatial
+   continuity — and the legibility half § 23 opened turns out to have had
+   exactly one member for its whole life.
+
+   The color comes from --color-accent and not from a hex, so it follows the
+   mode. cursos wrote it against its own --primary, which freezes to whichever
+   mode was active; the blog hardcoded rgba(53, 214, 192, 0.7), which is this
+   accent at 70 % and goes stale the day the accent moves. 1.5s ease-in-out,
+   which is the cadence both arrived at.
+
+   Behind motion-safe at the call site — the half NOT copied from cursos, whose
+   span animates regardless. The blog guarded it, every other exception here is
+   guarded, and at rest the bar is simply solid.
+   See docs/decisions/0.8.md § 45. */
+@keyframes arrecife-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 70%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 5px transparent;
+  }
 }
 
-@utility caret {
-  animation: arrecife-caret 1.06s step-end infinite;
+@utility pulse-accent {
+  animation: arrecife-pulse 1.5s ease-in-out infinite;
 }
 
 /* --- the accordion exception -----------------------------------------------
@@ -335,6 +365,33 @@
   animation: arrecife-slide-out-bottom var(--duration-standard) var(--ease-standard);
 }
 
+/* --- the focus ring ---------------------------------------------------------
+   The document gives it once, on the primary button: «focus ring 2px #35D6C0 +
+   offset 3px». The code had it as three classes copied to twenty-nine call
+   sites in twenty-four files, all of them at offset 2, and three audits in a row
+   said so — the value was never argued down to 2, it was copied from the first
+   component and inherited by the next twenty-eight.
+
+   It is one utility for the reason § 15 gives: a list kept in sync by hand with
+   another list ends up out of sync. Twenty-nine copies is twenty-nine chances to
+   write the next one at offset 2 again, and nothing was checking.
+
+   focus-ring-warm exists for the ONE control the ring cannot be biolume on:
+   the conversion button is the system's only sand fill, and a biolume ring
+   around it puts both of the brand's accents in the same three pixels. It sets
+   only the color, so the width and the offset stay in one place. */
+@utility focus-ring {
+  &:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 3px;
+  }
+}
+@utility focus-ring-warm {
+  &:focus-visible {
+    outline-color: var(--color-warm);
+  }
+}
+
 /* The system's only transition, as a utility. States are communicated with
    border and color, not with movement: this class cannot animate anything else. */
 @utility transition-standard {

package/dist/variants/index.cjs

@@ -8,7 +8,7 @@ var button = classVarianceAuthority.cva(
     "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
     "rounded-control font-sans font-medium",
     "transition-standard",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:shrink-0"
   ],
@@ -19,7 +19,10 @@ var button = classVarianceAuthority.cva(
           "bg-accent text-accent-on hover:bg-accent-hover",
           "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
         ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        // 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 `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",
           "hover:border-accent hover:text-accent"
@@ -177,7 +180,7 @@ var CARD = [
   "group block cursor-pointer",
   CARD_SURFACE,
   CARD_HOVER,
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+  "focus-ring"
 ];
 
 exports.CARD = CARD;

package/dist/variants/index.d.cts

@@ -32,7 +32,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
  * actions and toolbars, next to «Editar» and «Duplicar», with no context to tell
  * them apart: with every one rendered as `secondary`, «Eliminar curso» looked
  * exactly like «Cancelar» and only the word separated them. See
- * `docs/decisions.md` § 21.
+ * `docs/decisions/0.6.md` § 21.
  *
  * `destructiveOutline` fills on hover, and that IS an exception to «secondary is
  * never filled» — declared here rather than discovered later. A destructive
@@ -151,7 +151,7 @@ declare const text: (props?: ({
  *
  * The radius: the document says 12, which is none of the system's five radii. It
  * uses the card radius rather than introducing a sixth — see
- * `docs/decisions.md`.
+ * `docs/decisions/`.
  */
 declare const alert: (props?: ({
     variant?: "error" | "accent" | "success" | "warning" | null | undefined;
@@ -174,7 +174,10 @@ declare const avatar: (props?: ({
  * hand: that project ships no framework JavaScript and cannot import a
  * component, so until now it copied the class list into its Astro. The copy had
  * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
- * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ * the token's `60%` and, at the time, `#EFE9DE`. Nothing compared them. The
+ * light gradient's second stop is `#FFFFFF` since § 9 was measured, which is the
+ * same lesson from the other side: a copied value goes stale when the original
+ * moves, and only the original is ever right.
  */
 declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
 /** Rule 6's hover: the border only. Applied where the card is clickable. */

package/dist/variants/index.d.ts

@@ -32,7 +32,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
  * actions and toolbars, next to «Editar» and «Duplicar», with no context to tell
  * them apart: with every one rendered as `secondary`, «Eliminar curso» looked
  * exactly like «Cancelar» and only the word separated them. See
- * `docs/decisions.md` § 21.
+ * `docs/decisions/0.6.md` § 21.
  *
  * `destructiveOutline` fills on hover, and that IS an exception to «secondary is
  * never filled» — declared here rather than discovered later. A destructive
@@ -151,7 +151,7 @@ declare const text: (props?: ({
  *
  * The radius: the document says 12, which is none of the system's five radii. It
  * uses the card radius rather than introducing a sixth — see
- * `docs/decisions.md`.
+ * `docs/decisions/`.
  */
 declare const alert: (props?: ({
     variant?: "error" | "accent" | "success" | "warning" | null | undefined;
@@ -174,7 +174,10 @@ declare const avatar: (props?: ({
  * hand: that project ships no framework JavaScript and cannot import a
  * component, so until now it copied the class list into its Astro. The copy had
  * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
- * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ * the token's `60%` and, at the time, `#EFE9DE`. Nothing compared them. The
+ * light gradient's second stop is `#FFFFFF` since § 9 was measured, which is the
+ * same lesson from the other side: a copied value goes stale when the original
+ * moves, and only the original is ever right.
  */
 declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
 /** Rule 6's hover: the border only. Applied where the card is clickable. */