@almadar/ui 5.133.0 → 5.135.0

package/dist/marketing/index.cjs

@@ -2958,6 +2958,53 @@ var Stack = ({
 };
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
+
+// lib/format.ts
+function formatDate(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function formatTime(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function formatDateTime(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return `${formatDate(value)} ${formatTime(value)}`;
+}
+function asYesNo(value) {
+  return value === false || value === 0 || String(value) === "false" ? "No" : "Yes";
+}
+function formatValue(value, format) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "boolean") return asYesNo(value);
+  switch (format) {
+    case "date":
+      return formatDate(value);
+    case "time":
+      return formatTime(value);
+    case "datetime":
+      return formatDateTime(value);
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return asYesNo(value);
+    default:
+      return String(value);
+  }
+}
+
+// components/core/atoms/Typography.tsx
 var variantStyles = {
   h1: "text-4xl font-bold tracking-tight text-foreground",
   h2: "text-3xl font-bold tracking-tight text-foreground",
@@ -3045,11 +3092,16 @@ var Typography = ({
   id,
   className,
   style,
+  format,
   content,
   children
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
+  let body = children ?? content;
+  if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
+    body = formatValue(body, format);
+  }
   return React12__namespace.default.createElement(
     Component,
     {
@@ -3066,7 +3118,7 @@ var Typography = ({
       ),
       style
     },
-    children ?? content
+    body
   );
 };
 Typography.displayName = "Typography";

package/dist/marketing/index.d.cts

@@ -165,6 +165,12 @@ interface TypographyProps {
     className?: string;
     /** Inline style */
     style?: React.CSSProperties;
+    /**
+     * Value formatting applied to string/number/Date content — `none` (the
+     * default) renders content as-is. Covers the raw-ISO-date class: a bound
+     * datetime renders human-readable via `format="date"|"time"|"datetime"`.
+     */
+    format?: "none" | "date" | "time" | "datetime" | "number" | "currency" | "percent";
     /** Text content (alternative to children) */
     content?: React.ReactNode;
     /** Children elements */

package/dist/marketing/index.d.ts

@@ -165,6 +165,12 @@ interface TypographyProps {
     className?: string;
     /** Inline style */
     style?: React.CSSProperties;
+    /**
+     * Value formatting applied to string/number/Date content — `none` (the
+     * default) renders content as-is. Covers the raw-ISO-date class: a bound
+     * datetime renders human-readable via `format="date"|"time"|"datetime"`.
+     */
+    format?: "none" | "date" | "time" | "datetime" | "number" | "currency" | "percent";
     /** Text content (alternative to children) */
     content?: React.ReactNode;
     /** Children elements */

package/dist/marketing/index.js

@@ -2937,6 +2937,53 @@ var Stack = ({
 };
 var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
+
+// lib/format.ts
+function formatDate(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function formatTime(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function formatDateTime(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return `${formatDate(value)} ${formatTime(value)}`;
+}
+function asYesNo(value) {
+  return value === false || value === 0 || String(value) === "false" ? "No" : "Yes";
+}
+function formatValue(value, format) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "boolean") return asYesNo(value);
+  switch (format) {
+    case "date":
+      return formatDate(value);
+    case "time":
+      return formatTime(value);
+    case "datetime":
+      return formatDateTime(value);
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return asYesNo(value);
+    default:
+      return String(value);
+  }
+}
+
+// components/core/atoms/Typography.tsx
 var variantStyles = {
   h1: "text-4xl font-bold tracking-tight text-foreground",
   h2: "text-3xl font-bold tracking-tight text-foreground",
@@ -3024,11 +3071,16 @@ var Typography = ({
   id,
   className,
   style,
+  format,
   content,
   children
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component = as || defaultElements[variant];
+  let body = children ?? content;
+  if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
+    body = formatValue(body, format);
+  }
   return React12__default.createElement(
     Component,
     {
@@ -3045,7 +3097,7 @@ var Typography = ({
       ),
       style
     },
-    children ?? content
+    body
   );
 };
 Typography.displayName = "Typography";

package/dist/{paintDispatch-BXJgISot.d.cts → paintDispatch-Bl2sfRFb.d.cts}

@@ -100,16 +100,16 @@ interface DrawSpriteProps extends DrawableBase {
  * ONE descriptor (`DrawShapeProps`, grounded in core `ScenePos`) with TWO
  * backends: `paintShape` (2D, here) and an R3F ground-plane mesh (`Shape3D` in
  * `lib/drawable/mesh3d`, kept OUT of this file so the 2D path never pulls R3F).
- * Paints a cell footprint, an axis-aligned rect, an ellipse, or a poly at a scene
- * position, fill and/or stroke. Genre uses (tile fallback, iso/hex diamond
- * fallback, cell highlight, feature disc, unit selection ring, unit fallback
- * circle, ground/ghost discs, solid backgrounds, side-view platform rects) are
- * all this atom with different `shape`/`anchor`/geometry — composed in `.lolo`,
- * not here. The React component renders `null`; it exists so the pattern pipeline
+ * Paints a cell footprint, an axis-aligned rect, an ellipse, a poly, or an SVG
+ * path at a scene position, fill and/or stroke. Genre uses (tile fallback, iso/hex
+ * diamond fallback, cell highlight, feature disc, unit selection ring, unit
+ * fallback circle, ground/ghost discs, solid backgrounds, side-view platform
+ * rects, hand-authored vector art) are all this atom with different
+ * `shape`/`anchor`/geometry — composed in `.lolo`, not here. The React component renders `null`; it exists so the pattern pipeline
  * registers a `draw-shape` pattern and standalone pages stay inspectable.
  */
 
-type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly';
+type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly' | 'path';
 interface DrawShapeProps extends DrawableBase {
     type: 'draw-shape';
     shape: ShapeKind;
@@ -130,6 +130,8 @@ interface DrawShapeProps extends DrawableBase {
     offsetY?: number;
     /** Poly vertices as world-unit offsets relative to the cell's projected top-left. */
     points?: PainterPoint[];
+    /** SVG path data in world units relative to the cell's projected top-left — same coordinate convention as `points`. */
+    d?: string;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
@@ -162,6 +164,33 @@ interface DrawTextProps extends DrawableBase {
     opacity?: number;
 }
 
+/**
+ * `draw-group` — the drawable CONTAINER atom (dimension-agnostic).
+ *
+ * Multi-shape art (a hero token = cloak + head + sword shapes) travels as ONE
+ * node: the host paints the group by translating to its projected position,
+ * applying `scale`/`rotate`/`opacity`, then painting each `items` descriptor
+ * through the normal dispatch. `items` is a plain data prop (NOT `children`,
+ * which UISlotRenderer special-cases) — same convention as the `draw-*-layer`
+ * molecules. The React component renders `null`; it exists so the pattern
+ * pipeline registers a `draw-group` pattern and standalone pages stay
+ * inspectable. 2D-canvas only — the 3D backend skips it with a warn.
+ */
+
+interface DrawGroupProps extends DrawableBase {
+    type: 'draw-group';
+    /** Logical scene position; the projector maps it to pixels / world. */
+    position: ScenePos;
+    /** Uniform scale applied to the whole group. */
+    scale?: number;
+    /** Rotation in radians (painter units). */
+    rotate?: number;
+    /** 0..1 opacity. */
+    opacity?: number;
+    /** The grouped drawables, painted through the normal dispatch. */
+    items: DrawableNode[];
+}
+
 /**
  * `draw-sprite-layer` — batch multiple sprites in one descriptor for O(layers) rendering.
  *
@@ -218,6 +247,6 @@ interface DrawTextLayerProps extends DrawableBase {
  */
 
 /** Every drawable descriptor. The host's `children` are a `DrawableNode[]`. */
-type DrawableNode = DrawSpriteProps | DrawShapeProps | DrawTextProps | DrawSpriteLayerProps | DrawShapeLayerProps | DrawTextLayerProps;
+type DrawableNode = DrawSpriteProps | DrawShapeProps | DrawTextProps | DrawGroupProps | DrawSpriteLayerProps | DrawShapeLayerProps | DrawTextLayerProps;
 
 export type { DrawableNode as D };

package/dist/{paintDispatch-BXJgISot.d.ts → paintDispatch-Bl2sfRFb.d.ts}

@@ -100,16 +100,16 @@ interface DrawSpriteProps extends DrawableBase {
  * ONE descriptor (`DrawShapeProps`, grounded in core `ScenePos`) with TWO
  * backends: `paintShape` (2D, here) and an R3F ground-plane mesh (`Shape3D` in
  * `lib/drawable/mesh3d`, kept OUT of this file so the 2D path never pulls R3F).
- * Paints a cell footprint, an axis-aligned rect, an ellipse, or a poly at a scene
- * position, fill and/or stroke. Genre uses (tile fallback, iso/hex diamond
- * fallback, cell highlight, feature disc, unit selection ring, unit fallback
- * circle, ground/ghost discs, solid backgrounds, side-view platform rects) are
- * all this atom with different `shape`/`anchor`/geometry — composed in `.lolo`,
- * not here. The React component renders `null`; it exists so the pattern pipeline
+ * Paints a cell footprint, an axis-aligned rect, an ellipse, a poly, or an SVG
+ * path at a scene position, fill and/or stroke. Genre uses (tile fallback, iso/hex
+ * diamond fallback, cell highlight, feature disc, unit selection ring, unit
+ * fallback circle, ground/ghost discs, solid backgrounds, side-view platform
+ * rects, hand-authored vector art) are all this atom with different
+ * `shape`/`anchor`/geometry — composed in `.lolo`, not here. The React component renders `null`; it exists so the pattern pipeline
  * registers a `draw-shape` pattern and standalone pages stay inspectable.
  */
 
-type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly';
+type ShapeKind = 'cell' | 'rect' | 'ellipse' | 'poly' | 'path';
 interface DrawShapeProps extends DrawableBase {
     type: 'draw-shape';
     shape: ShapeKind;
@@ -130,6 +130,8 @@ interface DrawShapeProps extends DrawableBase {
     offsetY?: number;
     /** Poly vertices as world-unit offsets relative to the cell's projected top-left. */
     points?: PainterPoint[];
+    /** SVG path data in world units relative to the cell's projected top-left — same coordinate convention as `points`. */
+    d?: string;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
@@ -162,6 +164,33 @@ interface DrawTextProps extends DrawableBase {
     opacity?: number;
 }
 
+/**
+ * `draw-group` — the drawable CONTAINER atom (dimension-agnostic).
+ *
+ * Multi-shape art (a hero token = cloak + head + sword shapes) travels as ONE
+ * node: the host paints the group by translating to its projected position,
+ * applying `scale`/`rotate`/`opacity`, then painting each `items` descriptor
+ * through the normal dispatch. `items` is a plain data prop (NOT `children`,
+ * which UISlotRenderer special-cases) — same convention as the `draw-*-layer`
+ * molecules. The React component renders `null`; it exists so the pattern
+ * pipeline registers a `draw-group` pattern and standalone pages stay
+ * inspectable. 2D-canvas only — the 3D backend skips it with a warn.
+ */
+
+interface DrawGroupProps extends DrawableBase {
+    type: 'draw-group';
+    /** Logical scene position; the projector maps it to pixels / world. */
+    position: ScenePos;
+    /** Uniform scale applied to the whole group. */
+    scale?: number;
+    /** Rotation in radians (painter units). */
+    rotate?: number;
+    /** 0..1 opacity. */
+    opacity?: number;
+    /** The grouped drawables, painted through the normal dispatch. */
+    items: DrawableNode[];
+}
+
 /**
  * `draw-sprite-layer` — batch multiple sprites in one descriptor for O(layers) rendering.
  *
@@ -218,6 +247,6 @@ interface DrawTextLayerProps extends DrawableBase {
  */
 
 /** Every drawable descriptor. The host's `children` are a `DrawableNode[]`. */
-type DrawableNode = DrawSpriteProps | DrawShapeProps | DrawTextProps | DrawSpriteLayerProps | DrawShapeLayerProps | DrawTextLayerProps;
+type DrawableNode = DrawSpriteProps | DrawShapeProps | DrawTextProps | DrawGroupProps | DrawSpriteLayerProps | DrawShapeLayerProps | DrawTextLayerProps;
 
 export type { DrawableNode as D };