@fiestaboard/ui 3.4.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/README.md +13 -1
  2. package/dist/components/board/board-backdrop.d.ts +60 -0
  3. package/dist/components/board/board-backdrop.js +71 -0
  4. package/dist/components/board/board-backdrop.js.map +1 -0
  5. package/dist/components/board/board-display.js +123 -123
  6. package/dist/components/board/board-display.js.map +1 -1
  7. package/dist/components/board/static-board-display.js +32 -32
  8. package/dist/components/chrome/fiesta-logo.js +2 -2
  9. package/dist/components/chrome/fiesta-logo.js.map +1 -1
  10. package/dist/components/chrome/page-header.d.ts +66 -4
  11. package/dist/components/chrome/page-header.js +31 -11
  12. package/dist/components/chrome/page-header.js.map +1 -1
  13. package/dist/components/chrome/page-layout.js +1 -1
  14. package/dist/components/chrome/page-layout.js.map +1 -1
  15. package/dist/components/chrome/sidebar.d.ts +2 -5
  16. package/dist/components/chrome/sidebar.js +152 -173
  17. package/dist/components/chrome/sidebar.js.map +1 -1
  18. package/dist/components/containment/json-tree.js +2 -2
  19. package/dist/components/containment/json-tree.js.map +1 -1
  20. package/dist/components/editor/node-views/wrapped-text-view.js +1 -1
  21. package/dist/components/editor/node-views/wrapped-text-view.js.map +1 -1
  22. package/dist/components/editor/variable-picker-content.js +4 -4
  23. package/dist/components/feedback/alert.js +4 -4
  24. package/dist/components/feedback/alert.js.map +1 -1
  25. package/dist/components/feedback/badge.js +4 -4
  26. package/dist/components/feedback/badge.js.map +1 -1
  27. package/dist/components/forms/button.js +5 -5
  28. package/dist/components/forms/button.js.map +1 -1
  29. package/dist/components/layout/flex.d.ts +1 -1
  30. package/dist/components/layout/grid.d.ts +1 -1
  31. package/dist/components/layout/stack.d.ts +1 -1
  32. package/dist/components/plugin/board-showcase.js +2 -2
  33. package/dist/components/plugin/board-showcase.js.map +1 -1
  34. package/dist/components/plugin/plugin-category-badge.d.ts +27 -1
  35. package/dist/components/plugin/plugin-category-badge.js +18 -14
  36. package/dist/components/plugin/plugin-category-badge.js.map +1 -1
  37. package/dist/components/typography/text.js +1 -1
  38. package/dist/components/typography/text.js.map +1 -1
  39. package/dist/components/wizard/wizard-progress.d.ts +29 -0
  40. package/dist/components/wizard/wizard-progress.js +27 -0
  41. package/dist/components/wizard/wizard-progress.js.map +1 -0
  42. package/dist/components/wizard/wizard-shell.d.ts +63 -0
  43. package/dist/components/wizard/wizard-shell.js +69 -0
  44. package/dist/components/wizard/wizard-shell.js.map +1 -0
  45. package/dist/editor.css +10 -3
  46. package/dist/fonts.css +16 -8
  47. package/dist/index.d.ts +3 -5
  48. package/dist/index.js +90 -92
  49. package/dist/theme.css +684 -519
  50. package/package.json +4 -6
  51. package/dist/components/effects/aurora.d.ts +0 -9
  52. package/dist/components/effects/aurora.js +0 -121
  53. package/dist/components/effects/aurora.js.map +0 -1
  54. package/dist/components/effects/react-bits/decrypted-text.d.ts +0 -14
  55. package/dist/components/effects/react-bits/decrypted-text.js +0 -88
  56. package/dist/components/effects/react-bits/decrypted-text.js.map +0 -1
  57. package/dist/components/seasons/aurora-canvas.d.ts +0 -22
  58. package/dist/components/seasons/aurora-canvas.js +0 -91
  59. package/dist/components/seasons/aurora-canvas.js.map +0 -1
  60. package/dist/components/seasons/sidebar-aurora-horizontal.d.ts +0 -3
  61. package/dist/components/seasons/sidebar-aurora-horizontal.js +0 -47
  62. package/dist/components/seasons/sidebar-aurora-horizontal.js.map +0 -1
  63. package/dist/components/seasons/sidebar-aurora.d.ts +0 -3
  64. package/dist/components/seasons/sidebar-aurora.js +0 -57
  65. package/dist/components/seasons/sidebar-aurora.js.map +0 -1
  66. package/dist/lib/seasons-drafts.d.ts +0 -26
  67. package/dist/lib/seasons-drafts.js +0 -106
  68. package/dist/lib/seasons-drafts.js.map +0 -1
  69. package/dist/lib/seasons.d.ts +0 -52
  70. package/dist/lib/seasons.js +0 -59
  71. package/dist/lib/seasons.js.map +0 -1
  72. package/dist/seasons/christmas.css +0 -64
  73. package/dist/seasons/easter.css +0 -62
  74. package/dist/seasons/fathers-day.css +0 -62
  75. package/dist/seasons/halloween.css +0 -69
  76. package/dist/seasons/mothers-day.css +0 -63
  77. package/dist/seasons/new-year.css +0 -66
  78. package/dist/seasons/pride.css +0 -68
  79. package/dist/seasons/thanksgiving.css +0 -64
package/README.md CHANGED
@@ -33,10 +33,22 @@ FiestaUI ships **no compiled utility CSS**. The consuming app runs Tailwind v4 a
33
33
  ```
34
34
 
35
35
  - `theme.css` carries the design tokens (`@theme inline`, `:root` / `.dark` custom properties), the base layer, the component animation keyframes, and the `dark` custom variant.
36
- - `fonts.css` is the **opt-in** Geist font registration (`@fontsource-variable/geist` + `@fontsource-variable/geist-mono` `@font-face` rules, ~52 KB fetched for a Latin-only page). Import it alongside `theme.css` unless your app supplies Geist itself — e.g. via `next/font`, a CDN, or a self-hosted subset. If you self-host, skip `fonts.css` and register faces named `"Geist Variable"` / `"Geist Mono Variable"` (the names `theme.css`'s `--font-geist-sans` / `--font-geist-mono` tokens reference); without either, the tokens degrade gracefully to the system font stack.
36
+ - `fonts.css` is the **opt-in** font registration (`@fontsource-variable/archivo` + `@fontsource-variable/spline-sans-mono` `@font-face` rules, ~70 KB fetched for a Latin-only page). Import it alongside `theme.css` unless your app supplies the faces itself — e.g. via `next/font`, a CDN, or a self-hosted subset. If you self-host, skip `fonts.css` and register faces named `"Archivo Variable"` / `"Spline Sans Mono Variable"` (the names `theme.css`'s `--font-sans-stack` / `--font-mono-stack` tokens reference); without either, the tokens degrade gracefully to the system font stack.
37
37
  - The `@source` line is **mandatory** — Tailwind v4 does not scan `node_modules` by default, and without it component styles silently vanish. Adjust the relative path to wherever your CSS file lives.
38
38
  - Dark mode is class-based: toggle the `dark` class on `<html>`. FiestaUI only defines the variant; your app owns the toggle.
39
39
 
40
+ ### Typeface
41
+
42
+ The sans face is **Archivo** as of 5.0.0, replacing Geist. Archivo is drawn from American grotesque signage — the same world the split-flap hardware lives in — and carries a `wdth` 62–125 axis, so headings can run expanded into departure-board territory while UI text stays at normal width, from one family.
43
+
44
+ `fonts.css` registers the **weight-only** Archivo file (`wght` 100–900, ~34 KB Latin). The width axis lives in the larger `@fontsource-variable/archivo/wdth.css` entrypoint (~88 KB Latin) and is not imported, because nothing in this package sets `font-stretch` yet. Swap the import when expanded display type ships — the family name is identical, so no token or consumer change is needed.
45
+
46
+ The token names `--font-sans-stack` / `--font-mono-stack` name the **role**, not the vendor. The former `--font-geist-sans` / `--font-geist-mono` names are aliased to them for one minor and will be removed in the next major; nothing in this package references the old names.
47
+
48
+ Archivo's vertical metrics are meaningfully tighter than Geist's — a 1.089em natural line box against Geist's 1.30em — so text set without an explicit `line-height` renders more compactly. Tailwind's `text-*` utilities set line-height, so most surfaces are unaffected; `heading.stories.tsx` documents where the difference does bite.
49
+
50
+ The mono face is **Spline Sans Mono**, also as of 5.0.0. It is not a code-editor setting: every split-flap glyph the product draws is `font-mono font-semibold` (`board-display.tsx`, `static-board-display.tsx`), and the template editor that previews the board follows the same token. It was picked on the two metrics that govern a fixed character cell read from a distance — cap height 72.7% of em against Geist Mono's 71.0%, at the same 60.0% glyph advance. Its weight range is 300–700; the only weights paired with `font-mono` in this package are 500 and 600, so no weight synthesizes.
51
+
40
52
  ### Seasonal theming
41
53
 
42
54
  `theme.css` inlines only the **live** season (Pride) — it activates automatically when the app shell stamps `.pride-month` on `<html>`. The other seasons are design drafts and are shipped as **opt-in** stylesheets rather than bundled into every consumer, so you only pay for the ones you use:
package/dist/components/board/board-backdrop.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ export interface BoardBackdropProps {
2
+ /**
3
+ * Short board phrases to draw from — the kind of line this product actually
4
+ * displays. They are packed edge to edge to build each row, so give it more
5
+ * than you need: variety across the field comes from the size of this pool.
6
+ */
7
+ phrases: string[];
8
+ /** Number of rows to build. */
9
+ rowCount?: number;
10
+ /** Tiles per row before the field is scaled up to cover. */
11
+ tiles?: number;
12
+ /** Rows past this index are `display:none` below `sm`. */
13
+ mobileRows?: number;
14
+ /** Changes the arrangement. Same seed always yields the same field. */
15
+ seed?: number;
16
+ /**
17
+ * Pin to the viewport instead of the nearest positioned ancestor.
18
+ *
19
+ * Use this inside a full-screen scrolling shell. Positioned `absolute` there,
20
+ * the field is only as tall as the scroll container's first screen, so it
21
+ * scrolls away and the array visibly ends — which is the one thing a
22
+ * "continues past every edge" background must never do.
23
+ */
24
+ fixed?: boolean;
25
+ className?: string;
26
+ }
27
+ /**
28
+ * A field of split-flap rows, used as a page backdrop.
29
+ *
30
+ * This replaces the WebGL `Aurora` that used to sit behind the setup wizard.
31
+ * The aurora was a generic gradient that could have been behind any product;
32
+ * this is the actual object the user just bought, showing the kind of line it
33
+ * is about to display.
34
+ *
35
+ * THE PERFORMANCE STORY IS THE WHOLE DESIGN, because a first-run screen is
36
+ * disproportionately likely to be opened on a phone:
37
+ *
38
+ * * `BoardTeaser` is static — `memo` + `useMemo`, no effects, no rAF. Once
39
+ * painted, a row costs nothing. The aurora it replaces held a WebGL
40
+ * context open and ran a shader every frame for as long as the screen was
41
+ * up, which is the single most expensive thing a background can do.
42
+ * * The reveal is ONE-SHOT. Rows settle in on mount and then stop; there is
43
+ * no loop to keep the compositor awake. "Splashy" is an entrance here, not
44
+ * an ambient state.
45
+ * * It animates `transform` and `opacity` only, so the settle stays on the
46
+ * compositor and never triggers layout or paint.
47
+ * * Rows past `mobileRows` are `display:none` below `sm`. To be precise
48
+ * about what that does and does not buy: React still builds those tiles,
49
+ * so it saves layout, paint and compositing, not reconciliation. Skipping
50
+ * the render outright would need a viewport hook, which is JS on the
51
+ * critical path of a first-run screen — a worse trade than the DOM it
52
+ * would save.
53
+ * * `prefers-reduced-motion` renders the field already settled, with no
54
+ * animation declared.
55
+ *
56
+ * The mask is what keeps it a backdrop rather than a picture: the field fades
57
+ * out toward the centre so foreground content always sits on flat surface, and
58
+ * the rows read as something happening behind the app.
59
+ */
60
+ export declare function BoardBackdrop({ phrases, rowCount, tiles, mobileRows, seed, fixed, className, }: BoardBackdropProps): import("react").JSX.Element;
package/dist/components/board/board-backdrop.js ADDED
@@ -0,0 +1,71 @@
1
+ import { cn as e } from "../../lib/utils.js";
2
+ import { BoardTeaser as t } from "./board-teaser.js";
3
+ import { useMemo as n } from "react";
4
+ import { jsx as r } from "react/jsx-runtime";
5
+ //#region src/components/board/board-backdrop.tsx
6
+ var i = [
7
+ "{63}",
8
+ "{64}",
9
+ "{65}",
10
+ "{66}",
11
+ "{67}",
12
+ "{68}"
13
+ ];
14
+ function a(e) {
15
+ let t = e | 0;
16
+ return () => {
17
+ t = t + 1831565813 | 0;
18
+ let e = Math.imul(t ^ t >>> 15, 1 | t);
19
+ return e = e + Math.imul(e ^ e >>> 7, 61 | e) ^ e, ((e ^ e >>> 14) >>> 0) / 4294967296;
20
+ };
21
+ }
22
+ function o(e) {
23
+ return e.replace(/\{\d+\}/g, "#").length;
24
+ }
25
+ function s(e, t, n, r) {
26
+ let s = a(r), c = [];
27
+ for (let r = 0; r < t; r++) {
28
+ let t = "", r = 0;
29
+ for (; o(t) < n && r++ < 40;) s() < .22 ? t += i[Math.floor(s() * i.length)] : t += e[Math.floor(s() * e.length)], t += " ".repeat(1 + Math.floor(s() * 3));
30
+ let a = "";
31
+ for (let e of t.match(/\{\d+\}|./g) ?? []) {
32
+ if (o(a + e) > n) break;
33
+ a += e;
34
+ }
35
+ c.push(a);
36
+ }
37
+ return c;
38
+ }
39
+ function c({ phrases: i, rowCount: a = 16, tiles: o = 30, mobileRows: c = 14, seed: l = 7, fixed: u = !1, className: d }) {
40
+ let f = n(() => s(i, a, o, l), [
41
+ i,
42
+ a,
43
+ o,
44
+ l
45
+ ]);
46
+ return /* @__PURE__ */ r("div", {
47
+ "aria-hidden": "true",
48
+ "data-slot": "board-backdrop",
49
+ className: e("pointer-events-none inset-0 overflow-hidden select-none", u ? "fixed" : "absolute", "[mask-image:radial-gradient(78%_62%_at_50%_45%,transparent_8%,rgba(0,0,0,0.6)_46%,#000_82%)]", "[-webkit-mask-image:radial-gradient(78%_62%_at_50%_45%,transparent_8%,rgba(0,0,0,0.6)_46%,#000_82%)]", d),
50
+ children: /* @__PURE__ */ r("div", {
51
+ className: "absolute inset-0 flex origin-center scale-[1.7] items-center justify-center sm:scale-[1.9]",
52
+ children: /* @__PURE__ */ r("div", {
53
+ className: "flex flex-col gap-[3px] sm:gap-[4px] md:gap-[5px] lg:gap-[6px]",
54
+ children: f.map((n, i) => /* @__PURE__ */ r("div", {
55
+ className: e("board-backdrop-row", i >= c && "hidden sm:block"),
56
+ style: { animationDelay: `${50 + i * 55}ms` },
57
+ children: /* @__PURE__ */ r(t, {
58
+ teaser: n,
59
+ tiles: o,
60
+ size: "md",
61
+ boardType: "black"
62
+ })
63
+ }, `${i}-${n}`))
64
+ })
65
+ })
66
+ });
67
+ }
68
+ //#endregion
69
+ export { c as BoardBackdrop };
70
+
71
+ //# sourceMappingURL=board-backdrop.js.map
package/dist/components/board/board-backdrop.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"board-backdrop.js","names":[],"sources":["../../../src/components/board/board-backdrop.tsx"],"mappings":";;;;;AAiCA,IAAM,IAAc;CAAC;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;AAAM;AAUnE,SAAS,EAAI,GAAc;CACzB,IAAI,IAAI,IAAO;CACf,aAAa;EACX,IAAK,IAAI,aAAc;EACvB,IAAI,IAAI,KAAK,KAAK,IAAK,MAAM,IAAK,IAAI,CAAC;EAEvC,OADA,IAAK,IAAI,KAAK,KAAK,IAAK,MAAM,GAAI,KAAK,CAAC,IAAK,KACpC,IAAK,MAAM,QAAS,KAAK;CACpC;AACF;AAGA,SAAS,EAAU,GAAW;CAC5B,OAAO,EAAE,QAAQ,YAAY,GAAG,CAAC,CAAC;AACpC;AASA,SAAS,EAAU,GAAmB,GAAkB,GAAe,GAAwB;CAC7F,IAAM,IAAO,EAAI,CAAI,GACf,IAAgB,CAAC;CACvB,KAAK,IAAI,IAAI,GAAG,IAAI,GAAU,KAAK;EACjC,IAAI,IAAM,IAGN,IAAQ;EACZ,OAAO,EAAU,CAAG,IAAI,KAAS,MAAU,KAGzC,AAFI,EAAK,IAAI,MAAM,KAAO,EAAY,KAAK,MAAM,EAAK,IAAI,EAAY,MAAM,KACvE,KAAO,EAAQ,KAAK,MAAM,EAAK,IAAI,EAAQ,MAAM,IACtD,KAAO,IAAI,OAAO,IAAI,KAAK,MAAM,EAAK,IAAI,CAAC,CAAC;EAG9C,IAAI,IAAM;EACV,KAAK,IAAM,KAAS,EAAI,MAAM,YAAY,KAAK,CAAC,GAAG;GACjD,IAAI,EAAU,IAAM,CAAK,IAAI,GAAO;GACpC,KAAO;EACT;EACA,EAAI,KAAK,CAAG;CACd;CACA,OAAO;AACT;AAmCA,SAAgB,EAAc,EAC5B,YACA,cAAW,IACX,WAAQ,IACR,gBAAa,IACb,UAAO,GACP,WAAQ,IACR,gBACqB;CACrB,IAAM,IAAO,QAAc,EAAU,GAAS,GAAU,GAAO,CAAI,GAAG;EAAC;EAAS;EAAU;EAAO;CAAI,CAAC;CACtG,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,aAAU;EACV,WAAW,EACT,2DACA,IAAQ,UAAU,YAMlB,gGACA,wGACA,CACF;EAOA,UAAA,kBAAC,OAAD;GAAK,WAAU;GAIb,UAAA,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,EAAK,KAAK,GAAK,MACd,kBAAC,OAAD;KAEE,WAAW,EAAG,sBAAsB,KAAK,KAAc,iBAAiB;KACxE,OAAO,EAAE,gBAAgB,GAAG,KAAK,IAAI,GAAG,IAAI;KAE5C,UAAA,kBAAC,GAAD;MAAa,QAAQ;MAAY;MAAO,MAAK;MAAK,WAAU;KAAS,CAAA;IAClE,GALE,GAAG,EAAE,GAAG,GAKV,CACN;GACE,CAAA;EACF,CAAA;CACF,CAAA;AAET"}