@logicplanes/kaeso-ui 0.2.1 → 0.2.2

package/ai/component-guides.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui component guides
 
-Version 0.2.1. Generated from the showcase's demo modules (apps/showcase/src/demos); do not edit. For each component: what it is for, its import, keyboard, accessibility, do and don't, and every example's code. Props and variants: `component-registry.md`.
+Version 0.2.2. Generated from the showcase's demo modules (apps/showcase/src/demos); do not edit. For each component: what it is for, its import, keyboard, accessibility, do and don't, and every example's code. Props and variants: `component-registry.md`.
 
 ## AlertDialog
 
@@ -3310,6 +3310,32 @@ One of a few choices: an ink donut around a panel center; RadioCards for choices
 </div>
 ```
 
+## ReleaseArt
+
+Flat geometric artwork for a release, from a stored spec or a seed: the same picture every time, a new one for every release.
+
+`import { ReleaseArt } from "@logicplanes/kaeso-ui";`
+
+### Accessibility
+
+- The artwork is an image with a label; the title drawn on it is part of the picture, so say it in the label too.
+
+### Examples
+
+#### What's new
+
+```tsx
+<div className="w-full max-w-640">
+  <ReleaseArt
+    seed="0.3.0"
+    art={{ version: 1, seed: 2886621037, style: "stripes", palette: 6 }}
+    label="Kaeso 0.3.0"
+    eyebrow="What's new in Kaeso"
+    title="0.3.0"
+  />
+</div>
+```
+
 ## ResourceList
 
 A searchable list with group headers, row actions and a selection bar.

package/ai/component-registry.json

@@ -1,6 +1,6 @@
 {
   "package": "@logicplanes/kaeso-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "components": [
     {
       "entry": "app-frame",
@@ -9683,6 +9683,82 @@
         }
       }
     },
+    {
+      "entry": "release-art",
+      "kind": "components",
+      "import": "@logicplanes/kaeso-ui/release-art",
+      "components": [
+        {
+          "name": "ReleaseArt",
+          "description": "A release's artwork: flat geometric art in one of eight styles and Kaeso's palettes, drawn from a stored art spec or a seed, with an optional title floating on it.",
+          "props": [
+            {
+              "name": "label",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "What the picture shows, read by screen readers: \"Kaeso 0.3.0\"."
+            },
+            {
+              "name": "seed",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "What the artwork is drawn from when there is no `art`, e.g. `0.3.0`; the same seed always draws the same picture."
+            },
+            {
+              "name": "art",
+              "type": "ReleaseArtSpec",
+              "required": false,
+              "default": null,
+              "description": "The release's stored artwork, e.g. from `nextReleaseArt`; it always draws the same picture and wins over `seed`."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
+            },
+            {
+              "name": "eyebrow",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Small text above the title, e.g. “What's new in Kaeso”."
+            },
+            {
+              "name": "shape",
+              "type": "\"banner\" | \"wide\"",
+              "required": false,
+              "default": "banner",
+              "description": "The artwork's aspect ratio."
+            },
+            {
+              "name": "title",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Large text on the artwork, e.g. the version number."
+            }
+          ],
+          "file": "src/components/release-art/release-art.tsx"
+        }
+      ],
+      "variants": {
+        "RELEASE_ART": {
+          "axes": {
+            "shape": {
+              "banner": "16:9: the head of a dialog or a card (default)",
+              "wide": "21:9: a wide strip above a page's content"
+            }
+          },
+          "defaults": {
+            "shape": "banner"
+          }
+        }
+      }
+    },
     {
       "entry": "resource-list",
       "kind": "blocks",
@@ -11077,6 +11153,13 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "icon",
+              "type": "IconSvgElement",
+              "required": false,
+              "default": null,
+              "description": "A mark before the word in the same color, e.g. `icons.success` for “Up to date”."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\"",
@@ -11112,6 +11195,13 @@
               "default": null,
               "description": "Classes for the layout of the outer element: margin, width and placement, never its look."
             },
+            {
+              "name": "icon",
+              "type": "IconSvgElement",
+              "required": false,
+              "default": null,
+              "description": "A mark before the word in the same color, e.g. `icons.success` for “Up to date”."
+            },
             {
               "name": "size",
               "type": "\"md\" | \"sm\"",

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui component registry
 
-Version 0.2.1. Generated from the component types, their descriptions and variants; do not edit.
+Version 0.2.2. Generated from the component types, their descriptions and variants; do not edit.
 
 ## app-frame
 
@@ -2260,6 +2260,26 @@ Choices with descriptions as rows in a settings group.
 | `orientation` | `"horizontal" \| "vertical"` | `vertical` | Lays the items out in a row (`horizontal`) or a column (`vertical`). |
 | `value` | `string` |  | The chosen option, when you control it. |
 
+## release-art
+
+`import { ReleaseArt } from "@logicplanes/kaeso-ui/release-art";`
+
+- **shape** (release_art): `banner` (default) — 16:9: the head of a dialog or a card (default); `wide` — 21:9: a wide strip above a page's content
+
+### ReleaseArt
+
+A release's artwork: flat geometric art in one of eight styles and Kaeso's palettes, drawn from a stored art spec or a seed, with an optional title floating on it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` * | `string` |  | What the picture shows, read by screen readers: "Kaeso 0.3.0". |
+| `seed` * | `string` |  | What the artwork is drawn from when there is no `art`, e.g. `0.3.0`; the same seed always draws the same picture. |
+| `art` | `ReleaseArtSpec` |  | The release's stored artwork, e.g. from `nextReleaseArt`; it always draws the same picture and wins over `seed`. |
+| `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `eyebrow` | `ReactNode` |  | Small text above the title, e.g. “What's new in Kaeso”. |
+| `shape` | `"banner" \| "wide"` | `banner` | The artwork's aspect ratio. |
+| `title` | `ReactNode` |  | Large text on the artwork, e.g. the version number. |
+
 ## resource-list
 
 `import { ResourceList } from "@logicplanes/kaeso-ui/blocks/resource-list";`
@@ -2637,6 +2657,7 @@ The same component under its plain name.
 |---|---|---|---|
 | `children` | `ReactNode` |  | The word that carries the meaning. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `icon` | `IconSvgElement` |  | A mark before the word in the same color, e.g. `icons.success` for “Up to date”. |
 | `size` | `"md" \| "sm"` | `md` | The text size. |
 | `tone` | `"neutral" \| "success" \| "warning" \| "danger" \| "info"` | `neutral` | The status it marks. |
 
@@ -2648,6 +2669,7 @@ A status word: "Active", "Expiring", "Down".
 |---|---|---|---|
 | `children` | `ReactNode` |  | The word that carries the meaning. |
 | `className` | `string` |  | Classes for the layout of the outer element: margin, width and placement, never its look. |
+| `icon` | `IconSvgElement` |  | A mark before the word in the same color, e.g. `icons.success` for “Up to date”. |
 | `size` | `"md" \| "sm"` | `md` | The dot's size. |
 | `tone` | `"neutral" \| "success" \| "warning" \| "danger" \| "info"` | `neutral` | The status the dot marks; keep it next to words that say the same. |
 

package/ai/icons.md

@@ -1,6 +1,6 @@
 # Icon vocabulary
 
-Version 0.2.1. Generated from `src/icons/vocabulary.ts`; do not edit. Use the name, never an icon picked by look: `icons.key` always means a key. Hugeicons, Stroke Rounded. Rules: `foundations/icons.md`.
+Version 0.2.2. Generated from `src/icons/vocabulary.ts`; do not edit. Use the name, never an icon picked by look: `icons.key` always means a key. Hugeicons, Stroke Rounded. Rules: `foundations/icons.md`.
 
 ## Kaeso objects
 

package/ai/tokens.md

@@ -1,6 +1,6 @@
 # @logicplanes/kaeso-ui tokens
 
-Version 0.2.1. Generated from `@logicplanes/kaeso-tokens`; do not edit. Components use these through role names (`bg-panel`, `text-fg-secondary`, `h-36`, `rounded-pill`); a raw value never appears in a component. How to use them: `foundations/*.md`.
+Version 0.2.2. Generated from `@logicplanes/kaeso-tokens`; do not edit. Components use these through role names (`bg-panel`, `text-fg-secondary`, `h-36`, `rounded-pill`); a raw value never appears in a component. How to use them: `foundations/*.md`.
 
 ## Neutrals