@caqophony/ui 0.3.1 → 0.5.0

package/dist/material-art.d.mts

@@ -0,0 +1,137 @@
+import { ReactElement } from 'react';
+import { Tone } from './material-tones.mjs';
+
+/**
+ * #5962 (epic #5944 step 4) — the art slot's one renderer. A product's art is
+ * data, a closed tree a generated app holds as JSON, and this is the only code
+ * that turns it into SVG. So there is no art source to police: a script, a
+ * handler, an external reference, `foreignObject` or a computed element has no
+ * way to be written in the format, and this file has no case for it.
+ *
+ * Each attribute is written out by name from the node's own fields, so a key the
+ * format does not have reaches nothing. An element or a paint outside the format
+ * throws here, even if the tree skipped its check: the validator, which is not
+ * published, gives the exact errors at build time.
+ *
+ * Published alone as `@caqophony/ui/material-art`, built with no client directive
+ * (`server-entries.json`), so a server component can render art. It imports only
+ * the tone tables, and not `cn`: a client chunk here would carry the directive.
+ *
+ * Held from the authors until step 5, with the rest of `material`.
+ *
+ * Authored by Caqophony
+ */
+
+/** A tone, or no paint, or the colour of the surrounding text (a mark in a header). */
+type ArtPaint = Tone | 'none' | 'currentColor';
+type ArtTransform = {
+    op: 'translate';
+    x: number;
+    y: number;
+} | {
+    op: 'rotate';
+    deg: number;
+    cx?: number;
+    cy?: number;
+} | {
+    op: 'scale';
+    by: number;
+};
+/** What every element may say about how it is drawn. */
+interface ArtDrawing {
+    stroke?: ArtPaint;
+    strokeWidth?: number;
+    strokeDasharray?: readonly number[];
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    opacity?: number;
+    transform?: readonly ArtTransform[];
+}
+/** A shape with an area. A `line` has none, so it takes no fill. */
+interface ArtFilled extends ArtDrawing {
+    fill?: ArtPaint;
+}
+interface ArtGroup extends ArtFilled {
+    el: 'g';
+    children: readonly ArtNode[];
+}
+interface ArtPath extends ArtFilled {
+    el: 'path';
+    d: string;
+}
+interface ArtRect extends ArtFilled {
+    el: 'rect';
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+}
+interface ArtCircle extends ArtFilled {
+    el: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+}
+interface ArtEllipse extends ArtFilled {
+    el: 'ellipse';
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+interface ArtLine extends ArtDrawing {
+    el: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+interface ArtPoly extends ArtFilled {
+    el: 'polygon' | 'polyline';
+    points: ReadonlyArray<readonly [number, number]>;
+}
+interface ArtText extends ArtFilled {
+    el: 'text';
+    x: number;
+    y: number;
+    anchor?: 'start' | 'middle' | 'end';
+    fontSize: number;
+    fontWeight?: 400 | 500 | 600 | 700;
+    /** Words on the page, apart from the drawing: step 5 holds them to the Brief. */
+    copy: string;
+}
+type ArtNode = ArtGroup | ArtPath | ArtRect | ArtCircle | ArtEllipse | ArtLine | ArtPoly | ArtText;
+/** Where a frame stays when its box has another shape. */
+type ArtAnchor = 'top' | 'center' | 'bottom' | 'right';
+/** `cover` fills the box and may cut the frame; `contain` keeps all of it. */
+type ArtFit = 'cover' | 'contain';
+/** `phone`/`desktop` cut at `md`; `stack`/`side`, a `HeroScene`'s subject, cut at `lg`. */
+type ArtOnly = 'phone' | 'desktop' | 'stack' | 'side';
+/** One SVG: `0 0 width height`, in its box as `fit` says. */
+interface ArtFrame {
+    width: number;
+    height: number;
+    /** Which part stays in view when the box's shape differs. */
+    anchor: ArtAnchor;
+    /** Absent: `cover`, as all art drew before #5978. */
+    fit?: ArtFit;
+    /** Show on one side of a cut only. */
+    only?: ArtOnly;
+    nodes: readonly ArtNode[];
+}
+/** A piece of art: one frame, or a `phone` and `desktop` pair, or a `stack` and `side` pair. */
+interface ArtTree {
+    frames: readonly ArtFrame[];
+}
+/** The one writer of how a frame sits in its box, for `Art` and `SkyField`. */
+declare const preserveOf: (anchor: ArtAnchor, fit?: ArtFit) => string;
+/** The one writer of where frames are cut, for `Art` and `SkyField`. */
+declare const frameClass: (only: ArtOnly | undefined) => string;
+/** Draws a piece of art, for a `Figure`'s slot or a mark. */
+declare function Art({ tree }: {
+    tree: ArtTree;
+}): ReactElement;
+
+export { Art, type ArtAnchor, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFit, type ArtFrame, type ArtGroup, type ArtLine, type ArtNode, type ArtOnly, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree, frameClass, preserveOf };

package/dist/material-art.js

@@ -0,0 +1,210 @@
+// src/material/tones.ts
+var FILL = {
+  "night-0": "fill-night-0",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+
+// src/material/art.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var ANCHOR = {
+  top: "xMidYMin",
+  center: "xMidYMid",
+  bottom: "xMidYMax",
+  right: "xMaxYMid"
+};
+var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${fit === "contain" ? "meet" : "slice"}`;
+var SHOWN = {
+  phone: "size-full md:hidden",
+  desktop: "hidden size-full md:block",
+  stack: "size-full lg:hidden",
+  side: "hidden size-full lg:block"
+};
+var frameClass = (only) => only ? SHOWN[only] : "size-full";
+function classOf(table, paint, attribute) {
+  if (!Object.prototype.hasOwnProperty.call(table, paint))
+    throw new Error(
+      `Art: \`${attribute}\` is ${JSON.stringify(paint)}, which is not a tone`
+    );
+  return table[paint];
+}
+function painted({ fill, stroke }) {
+  const direct = (paint) => paint === "none" || paint === "currentColor" ? paint : void 0;
+  const classes = [
+    fill === void 0 || direct(fill) ? "" : classOf(FILL, fill, "fill"),
+    stroke === void 0 || direct(stroke) ? "" : classOf(STROKE, stroke, "stroke")
+  ].filter(Boolean);
+  return {
+    fill: direct(fill),
+    stroke: direct(stroke),
+    className: classes.length > 0 ? classes.join(" ") : void 0
+  };
+}
+function transformOf(step) {
+  switch (step.op) {
+    case "translate":
+      return `translate(${step.x} ${step.y})`;
+    case "scale":
+      return `scale(${step.by})`;
+    case "rotate":
+      return step.cx === void 0 || step.cy === void 0 ? `rotate(${step.deg})` : `rotate(${step.deg} ${step.cx} ${step.cy})`;
+  }
+}
+function drawn(node) {
+  return {
+    ...painted(node),
+    strokeWidth: node.strokeWidth,
+    strokeDasharray: node.strokeDasharray?.join(" "),
+    strokeLinecap: node.strokeLinecap,
+    strokeLinejoin: node.strokeLinejoin,
+    opacity: node.opacity,
+    transform: node.transform?.map(transformOf).join(" ")
+  };
+}
+function render(node, key) {
+  switch (node.el) {
+    case "g":
+      return /* @__PURE__ */ jsx("g", { ...drawn(node), children: node.children.map(render) }, key);
+    case "path":
+      return /* @__PURE__ */ jsx("path", { d: node.d, ...drawn(node) }, key);
+    case "rect":
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          rx: node.rx,
+          ry: node.ry,
+          ...drawn(node)
+        },
+        key
+      );
+    case "circle":
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: node.cx,
+          cy: node.cy,
+          r: node.r,
+          ...drawn(node)
+        },
+        key
+      );
+    case "ellipse":
+      return /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx: node.cx,
+          cy: node.cy,
+          rx: node.rx,
+          ry: node.ry,
+          ...drawn(node)
+        },
+        key
+      );
+    case "line":
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: node.x1,
+          y1: node.y1,
+          x2: node.x2,
+          y2: node.y2,
+          ...drawn(node)
+        },
+        key
+      );
+    case "polygon":
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: node.points.map((p) => p.join(",")).join(" "),
+          ...drawn(node)
+        },
+        key
+      );
+    case "polyline":
+      return /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: node.points.map((p) => p.join(",")).join(" "),
+          ...drawn(node)
+        },
+        key
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: node.x,
+          y: node.y,
+          textAnchor: node.anchor,
+          fontSize: node.fontSize,
+          fontWeight: node.fontWeight,
+          ...drawn(node),
+          children: node.copy
+        },
+        key
+      );
+    default:
+      throw new Error(
+        `Art: <${String(node.el)}> is not an art element`
+        // SAFE: reached only by a tree that skipped its check
+      );
+  }
+}
+function Art({ tree }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: tree.frames.map((frame, i) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: `0 0 ${frame.width} ${frame.height}`,
+      preserveAspectRatio: preserveOf(frame.anchor, frame.fit),
+      "aria-hidden": "true",
+      className: frameClass(frame.only),
+      children: frame.nodes.map(render)
+    },
+    i
+  )) });
+}
+export {
+  Art,
+  frameClass,
+  preserveOf
+};

package/dist/material-tones.d.mts

@@ -0,0 +1,23 @@
+/**
+ * #5956 — the closed tone vocabulary of the material layer. Each tone is a
+ * theme token, derived per project from its brand (`deriveMaterialRamp`), so a
+ * theme change reaches every band, figure and field. Every class is written
+ * out in full so an app's Tailwind scan sees it. `Tone` is held to the ramp's
+ * own step list by `material-primitives-5956.test.ts`.
+ *
+ * `paper` and `ink` hold in dark mode, as a brand step does: art printed on
+ * white stays on white. `page` is the page's own surface, in either scheme: the
+ * tone for a band that should follow it, such as the one behind a footer.
+ *
+ * Published alone as `@caqophony/ui/material-tones`, with no client directive
+ * (`server-entries.json`), so a server component's art can read `FILL` and
+ * `STROKE`. It must import nothing: a shared chunk would carry the directive.
+ *
+ * Authored by Caqophony
+ */
+type Tone = 'night-0' | 'night-1' | 'night-2' | 'sky-0' | 'sky-1' | 'sky-2' | 'sky-3' | 'sky-4' | 'glow' | 'glow-soft' | 'glow-pale' | 'canvas' | 'mist-1' | 'mist-2' | 'mist-3' | 'paper' | 'ink' | 'page';
+declare const FILL: Readonly<Record<Tone, string>>;
+declare const STROKE: Readonly<Record<Tone, string>>;
+declare const BG: Readonly<Record<Tone, string>>;
+
+export { BG, FILL, STROKE, type Tone };

package/dist/material-tones.js

@@ -0,0 +1,66 @@
+// src/material/tones.ts
+var FILL = {
+  "night-0": "fill-night-0",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+var BG = {
+  "night-0": "bg-night-0",
+  "night-1": "bg-night-1",
+  "night-2": "bg-night-2",
+  "sky-0": "bg-sky-0",
+  "sky-1": "bg-sky-1",
+  "sky-2": "bg-sky-2",
+  "sky-3": "bg-sky-3",
+  "sky-4": "bg-sky-4",
+  glow: "bg-glow",
+  "glow-soft": "bg-glow-soft",
+  "glow-pale": "bg-glow-pale",
+  canvas: "bg-canvas",
+  "mist-1": "bg-mist-1",
+  "mist-2": "bg-mist-2",
+  "mist-3": "bg-mist-3",
+  paper: "bg-paper",
+  ink: "bg-ink",
+  page: "bg-background"
+};
+export {
+  BG,
+  FILL,
+  STROKE
+};