@stackone/malachite 2.51.1 → 2.52.0

package/COMPONENTS.md

@@ -13,7 +13,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`DisclosureArrow`** — The expand/collapse triangle disclosure UI shares (`Accordion`, `Surface.ExpandableRow`). Owns its colour states so they never drift between usages: `text-primary` when expanded, `text-placeholder` otherwise, and dark on hover inside a `group` ancestor — put `group` on the clickable header or row so that hover state activates. _Key props:_ `expanded`, `size`, `className`.
 - **`Card`** — Generic content card.
 - **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a top-right action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `actions` stands in the card’s top-right corner, on the eyebrow row, and renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. Nothing else marks that corner: the flared outline, the tint and the green eyebrow already say which card is selected, so a radio there would only repeat them. `onDismiss` adds an x after `actions`, tinted like the eyebrow so it reads as part of the card — for discarding a draft card; `dismissDisabledReason` disables it and explains why in its tooltip. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the actions, which read as things to press. `address` puts a one-line chip above the count for a copyable address such as a server URL: its `label` is cut short with an ellipsis, and its full `value` shows in a tooltip and is copied on click, without selecting the card. It takes the place of `description`, since the card has room for one or the other. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `address` (`label`, `value`), `countLabel`, `actions`, `onDismiss` (`dismissLabel`, `dismissDisabledReason`), `selected`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
-- **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
+- **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. A strip too narrow to show a card beside `leading` scrolls it with the cards rather than squeezing them, so the selected card always has its full width. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
 - **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
 - **`PageLayout`** — Standard page chrome: a bordered card holding a breadcrumb bar, an optional alert strip, and a header block (subtitle, title + suffix, description) above the page body. Used as `PageLayout.Regular`; `PageLayout.Empty` is the chrome-only variant for pre-auth and error screens, with `headerActions` and `background` slots. Actions are declared as data (`buttons`) rather than children, and any that do not fit collapse into an overflow `ActionMenu` via `OverflowRow`. A client-side-routed app must pass `renderLink` so crumbs and the back button go through its router instead of reloading the document. Both layouts render a `main` landmark, demoted via `role` when the app owns its own. Deliberately not a `Surface` — the page card is 16px and carries no shadow. _Key props:_ `PageLayout.Regular`: `breadcrumbLinks`, `breadcrumbActions`, `renderLink`, `title`, `titleSuffix`, `subtitle`, `description`, `buttons`, `loading`, `centered`, `noPadding`, `contentGap` (`small` | `medium` | `large` | `xlarge`, default `small`), `alert`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`. `PageLayout.Empty`: `title`, `centered`, `uniformPadding`, `headerActions`, `background`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`.
 - **`WizardLayout`** — Full-screen wizard scaffold: top bar (back button, right-aligned stepper, trailing slot), pinned `header` slot, centered scrolling content column, and a pinned footer (above sticky body content). `footerGlass` gives the footer a frosted translucent + backdrop-blur treatment. _Key props:_ `showBack`, `onBack`, `stepper`, `trailing`, `header`, `footer`, `footerGlass`, `center`, `contentWidth`, `minWidth`.
@@ -108,8 +108,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 
 - **`Table`** — Data table with columns, sizing, pagination and row selection. `column.align` places a column's header as well as its cells. What lands on the aligned edge is the last thing in the header row rather than the title: the sort caret on a sortable column, the info icon on one carrying `info` without a sorter. `headerVariant` picks the header layout, and only `inline` lines header and body up exactly, because both are cells of one `<table>`. `detached` builds them from flex rows, where a sortable header cell is 32px narrower than a non-sortable one — its padding sits on the inner button rather than on the flex item — so its header cells sit 15–17px off their column at any alignment; reach for `inline` where exact alignment matters. Sorting is internal, so the array passed as `data` is not the order rendered once a column is sorted: `onVisibleOrderChange` reports the rows in render order — the whole of `data`, compared by `rowKey` so an equal order never re-fires — for a consumer stepping a master-detail view the way the user sees it. _Key props:_ `TableColumns` (incl. `align`), `TableSize`, `TableType`, `TableRowSelection`, `TablePaginationPosition`, `headerVariant`, `onVisibleOrderChange`.
 - **`Statistic`** — Displays a statistic value with a label; primary/secondary sizes. _Key props:_ `StatisticValueSize`.
-- **`Avatar`** — Logo/initial avatar. Renders the image when available, otherwise a coloured tile with the first letter of `name`. Encapsulates the fallback colour. _Key props:_ `src`, `name`, `size`, `shape="square" | "circle"`.
-- **`AppLogo`** — A connector's mark, optionally with its name and version tag. Builds on `Avatar`, so a missing or broken logo falls back to a coloured initial. The gap tightens below 18px so the mark and label still read as one unit. _Key props:_ `src`, `name`, `showName`, `size`, `nameSize`, `nameWeight`, `version`, `truncate`, `className`.
+- **`Avatar`** — Logo/initial avatar. Renders the image when available, otherwise a coloured tile with the first letter of `name`, or with `fallback="placeholder"` the generic "no logo available" tile. Encapsulates the fallback colour. _Key props:_ `src`, `name`, `size`, `shape="square" | "circle"`, `fallback="initial" | "placeholder"`.
+- **`AppLogo`** — A connector's mark, optionally with its name and version tag. Builds on `Avatar`, so a missing or broken logo falls back to the generic "no logo available" placeholder, an accent tile with a white dot. The gap tightens below 18px so the mark and label still read as one unit. _Key props:_ `src`, `name`, `showName`, `size`, `nameSize`, `nameWeight`, `version`, `truncate`, `className`.
 - **`ConnectionHeader`** — Two tilted logo tiles (from → to) showing a connection between apps. _Key props:_ `from`, `to` (`ConnectionEndpoint`: `icon`, `label`, `background`).
 - **`CodeBlock`** — Syntax-styled code block. _Key props:_ `code`.
 - **`Stepper`** — Progress dots/segments for a multi-step flow; optionally clickable. _Key props:_ `steps`, `active`, `onChange`.

package/dist/components/AppLogo.js

@@ -1,43 +1,63 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { Avatar as p } from "./Avatar.js";
-import { Tag as g } from "./Tag.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { Avatar as s } from "./Avatar.js";
+import { Tag as d } from "./Tag.js";
 import { Typography as m } from "./Typography/index.js";
-import { getFontWeight as d, getFontSize as u } from "./Typography/textStyles.js";
-const j = ({
-  src: i,
-  name: e,
-  showName: f = !0,
+import { getFontWeight as g, getFontSize as u } from "./Typography/textStyles.js";
+const W = ({
+  src: l,
+  name: t,
+  showName: c = !0,
   size: r = 24,
-  nameSize: o = "medium",
-  nameWeight: a = "normal",
-  version: n,
-  truncate: c = !1,
-  className: s = ""
+  nameSize: a = "medium",
+  nameWeight: i = "normal",
+  version: o,
+  truncate: f = !1,
+  className: n = ""
 }) => {
   const h = r <= 18 ? "gap-2" : "gap-3";
-  return f ? (
+  return c ? (
     // `max-w-full` is what makes `truncate` work — without it the box is floored at the name's min-content width.
-    /* @__PURE__ */ l("span", { className: `inline-flex items-center ${h} max-w-full ${s}`.trim(), children: [
-      /* @__PURE__ */ t(p, { src: i, name: e, size: r, shape: "square", className: "shrink-0" }),
-      /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
-        c ? /* @__PURE__ */ t(
+    /* @__PURE__ */ p("span", { className: `inline-flex items-center ${h} max-w-full ${n}`.trim(), children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          src: l,
+          name: t,
+          size: r,
+          shape: "square",
+          fallback: "placeholder",
+          className: "shrink-0"
+        }
+      ),
+      /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
+        f ? /* @__PURE__ */ e(
           m.EllipsisText,
           {
             maxWidth: "100%",
-            tooltip: e,
+            tooltip: t,
             style: {
-              fontSize: u(o),
-              fontWeight: d(a)
+              fontSize: u(a),
+              fontWeight: g(i)
             },
-            children: e
+            children: t
           }
-        ) : /* @__PURE__ */ t(m.Text, { size: o, fontWeight: a, children: e }),
-        n ? /* @__PURE__ */ t("span", { className: "shrink-0", children: /* @__PURE__ */ t(g, { value: n, textTransform: "none", paddingSize: "compact" }) }) : null
+        ) : /* @__PURE__ */ e(m.Text, { size: a, fontWeight: i, children: t }),
+        o ? /* @__PURE__ */ e("span", { className: "shrink-0", children: /* @__PURE__ */ e(d, { value: o, textTransform: "none", paddingSize: "compact" }) }) : null
       ] })
     ] })
-  ) : /* @__PURE__ */ t(p, { src: i, name: e, size: r, shape: "square", className: s });
+  ) : /* @__PURE__ */ e(
+    s,
+    {
+      src: l,
+      name: t,
+      size: r,
+      shape: "square",
+      fallback: "placeholder",
+      className: n
+    }
+  );
 };
 export {
-  j as default
+  W as default
 };
 //# sourceMappingURL=AppLogo.js.map

package/dist/components/AppLogo.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLogo.js","sources":["../../src/components/AppLogo.tsx"],"sourcesContent":["import React from 'react';\nimport Avatar from './Avatar';\nimport Tag from './Tag';\nimport Typography from './Typography';\nimport type { FontSize, FontWeight } from './Typography/Text';\nimport { getFontSize, getFontWeight } from './Typography/textStyles';\n\nexport interface AppLogoProps {\n    /** Connector logo URL. Falls back to a coloured initial tile when missing or broken. */\n    src?: string;\n    /** Connector name — the accessible label, the fallback initial, and the visible text. */\n    name: string;\n    /** Renders the name beside the mark. Omit for a bare logo (e.g. inside a dense row). */\n    showName?: boolean;\n    /** Pixel size of the square mark. */\n    size?: number;\n    nameSize?: FontSize;\n    /** Defaults to `normal`. Raise it when the logo doubles as a page title. */\n    nameWeight?: FontWeight;\n    /** Rendered as a tag after the name, e.g. `v1.2.0` or `Legacy`. */\n    version?: string;\n    /** Truncates a long name with an ellipsis and reveals the full value on hover. */\n    truncate?: boolean;\n    className?: string;\n}\n\nconst AppLogo: React.FC<AppLogoProps> = ({\n    src,\n    name,\n    showName = true,\n    size = 24,\n    nameSize = 'medium',\n    nameWeight = 'normal',\n    version,\n    truncate = false,\n    className = '',\n}) => {\n    const gap = size <= 18 ? 'gap-2' : 'gap-3';\n\n    if (!showName) {\n        return <Avatar src={src} name={name} size={size} shape=\"square\" className={className} />;\n    }\n\n    return (\n        // `max-w-full` is what makes `truncate` work — without it the box is floored at the name's min-content width.\n        <span className={`inline-flex items-center ${gap} max-w-full ${className}`.trim()}>\n            <Avatar src={src} name={name} size={size} shape=\"square\" className=\"shrink-0\" />\n            <span className=\"inline-flex items-center gap-2 min-w-0\">\n                {truncate ? (\n                    <Typography.EllipsisText\n                        maxWidth=\"100%\"\n                        tooltip={name}\n                        style={{\n                            fontSize: getFontSize(nameSize),\n                            fontWeight: getFontWeight(nameWeight),\n                        }}\n                    >\n                        {name}\n                    </Typography.EllipsisText>\n                ) : (\n                    <Typography.Text size={nameSize} fontWeight={nameWeight}>\n                        {name}\n                    </Typography.Text>\n                )}\n                {version ? (\n                    <span className=\"shrink-0\">\n                        <Tag value={version} textTransform=\"none\" paddingSize=\"compact\" />\n                    </span>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default AppLogo;\n"],"names":["AppLogo","src","name","showName","size","nameSize","nameWeight","version","truncate","className","gap","jsxs","jsx","Avatar","Typography","getFontSize","getFontWeight","Tag"],"mappings":";;;;;AA0BA,MAAMA,IAAkC,CAAC;AAAA,EACrC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAMN,KAAQ,KAAK,UAAU;AAEnC,SAAKD;AAAA;AAAA,IAMD,gBAAAQ,EAAC,UAAK,WAAW,4BAA4BD,CAAG,eAAeD,CAAS,GAAG,KAAA,GACvE,UAAA;AAAA,MAAA,gBAAAG,EAACC,KAAO,KAAAZ,GAAU,MAAAC,GAAY,MAAAE,GAAY,OAAM,UAAS,WAAU,YAAW;AAAA,MAC9E,gBAAAO,EAAC,QAAA,EAAK,WAAU,0CACX,UAAA;AAAA,QAAAH,IACG,gBAAAI;AAAA,UAACE,EAAW;AAAA,UAAX;AAAA,YACG,UAAS;AAAA,YACT,SAASZ;AAAA,YACT,OAAO;AAAA,cACH,UAAUa,EAAYV,CAAQ;AAAA,cAC9B,YAAYW,EAAcV,CAAU;AAAA,YAAA;AAAA,YAGvC,UAAAJ;AAAA,UAAA;AAAA,QAAA,sBAGJY,EAAW,MAAX,EAAgB,MAAMT,GAAU,YAAYC,GACxC,UAAAJ,GACL;AAAA,QAEHK,IACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,YACZ,UAAA,gBAAAA,EAACK,GAAA,EAAI,OAAOV,GAAS,eAAc,QAAO,aAAY,UAAA,CAAU,GACpE,IACA;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACJ;AAAA,wBA9BQM,GAAA,EAAO,KAAAZ,GAAU,MAAAC,GAAY,MAAAE,GAAY,OAAM,UAAS,WAAAK,GAAsB;AAgC9F;"}
+{"version":3,"file":"AppLogo.js","sources":["../../src/components/AppLogo.tsx"],"sourcesContent":["import React from 'react';\nimport Avatar from './Avatar';\nimport Tag from './Tag';\nimport Typography from './Typography';\nimport type { FontSize, FontWeight } from './Typography/Text';\nimport { getFontSize, getFontWeight } from './Typography/textStyles';\n\nexport interface AppLogoProps {\n    /** Connector logo URL. Falls back to a \"no logo available\" placeholder when missing or broken. */\n    src?: string;\n    /** Connector name — the accessible label and the visible text. */\n    name: string;\n    /** Renders the name beside the mark. Omit for a bare logo (e.g. inside a dense row). */\n    showName?: boolean;\n    /** Pixel size of the square mark. */\n    size?: number;\n    nameSize?: FontSize;\n    /** Defaults to `normal`. Raise it when the logo doubles as a page title. */\n    nameWeight?: FontWeight;\n    /** Rendered as a tag after the name, e.g. `v1.2.0` or `Legacy`. */\n    version?: string;\n    /** Truncates a long name with an ellipsis and reveals the full value on hover. */\n    truncate?: boolean;\n    className?: string;\n}\n\nconst AppLogo: React.FC<AppLogoProps> = ({\n    src,\n    name,\n    showName = true,\n    size = 24,\n    nameSize = 'medium',\n    nameWeight = 'normal',\n    version,\n    truncate = false,\n    className = '',\n}) => {\n    const gap = size <= 18 ? 'gap-2' : 'gap-3';\n\n    if (!showName) {\n        return (\n            <Avatar\n                src={src}\n                name={name}\n                size={size}\n                shape=\"square\"\n                fallback=\"placeholder\"\n                className={className}\n            />\n        );\n    }\n\n    return (\n        // `max-w-full` is what makes `truncate` work — without it the box is floored at the name's min-content width.\n        <span className={`inline-flex items-center ${gap} max-w-full ${className}`.trim()}>\n            <Avatar\n                src={src}\n                name={name}\n                size={size}\n                shape=\"square\"\n                fallback=\"placeholder\"\n                className=\"shrink-0\"\n            />\n            <span className=\"inline-flex items-center gap-2 min-w-0\">\n                {truncate ? (\n                    <Typography.EllipsisText\n                        maxWidth=\"100%\"\n                        tooltip={name}\n                        style={{\n                            fontSize: getFontSize(nameSize),\n                            fontWeight: getFontWeight(nameWeight),\n                        }}\n                    >\n                        {name}\n                    </Typography.EllipsisText>\n                ) : (\n                    <Typography.Text size={nameSize} fontWeight={nameWeight}>\n                        {name}\n                    </Typography.Text>\n                )}\n                {version ? (\n                    <span className=\"shrink-0\">\n                        <Tag value={version} textTransform=\"none\" paddingSize=\"compact\" />\n                    </span>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default AppLogo;\n"],"names":["AppLogo","src","name","showName","size","nameSize","nameWeight","version","truncate","className","gap","jsxs","jsx","Avatar","Typography","getFontSize","getFontWeight","Tag"],"mappings":";;;;;AA0BA,MAAMA,IAAkC,CAAC;AAAA,EACrC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAMN,KAAQ,KAAK,UAAU;AAEnC,SAAKD;AAAA;AAAA,IAeD,gBAAAQ,EAAC,UAAK,WAAW,4BAA4BD,CAAG,eAAeD,CAAS,GAAG,KAAA,GACvE,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,KAAAZ;AAAA,UACA,MAAAC;AAAA,UACA,MAAAE;AAAA,UACA,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEd,gBAAAO,EAAC,QAAA,EAAK,WAAU,0CACX,UAAA;AAAA,QAAAH,IACG,gBAAAI;AAAA,UAACE,EAAW;AAAA,UAAX;AAAA,YACG,UAAS;AAAA,YACT,SAASZ;AAAA,YACT,OAAO;AAAA,cACH,UAAUa,EAAYV,CAAQ;AAAA,cAC9B,YAAYW,EAAcV,CAAU;AAAA,YAAA;AAAA,YAGvC,UAAAJ;AAAA,UAAA;AAAA,QAAA,sBAGJY,EAAW,MAAX,EAAgB,MAAMT,GAAU,YAAYC,GACxC,UAAAJ,GACL;AAAA,QAEHK,IACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,YACZ,UAAA,gBAAAA,EAACK,GAAA,EAAI,OAAOV,GAAS,eAAc,QAAO,aAAY,UAAA,CAAU,GACpE,IACA;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACJ;AAAA,MA7CI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAZ;AAAA,MACA,MAAAC;AAAA,MACA,MAAAE;AAAA,MACA,OAAM;AAAA,MACN,UAAS;AAAA,MACT,WAAAK;AAAA,IAAA;AAAA,EAAA;AAyChB;"}

package/dist/components/Avatar.js

@@ -1,61 +1,96 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useState as f } from "react";
-const c = (e) => {
+import { jsx as i } from "react/jsx-runtime";
+import { useState as g } from "react";
+const p = (e) => {
   let r = 0;
   for (let t = 0; t < e.length; t += 1)
     r = e.charCodeAt(t) + ((r << 5) - r);
   return `hsl(${Math.abs(r) % 360}, 55%, 52%)`;
-}, g = ({
+}, b = ({
   src: e,
   name: r,
   size: t = 24,
-  shape: l = "square",
-  className: i = ""
+  shape: h = "square",
+  fallback: c = "initial",
+  className: o = ""
 }) => {
-  const [d, h] = f(void 0), o = (r == null ? void 0 : r.trim()) ?? "", n = l === "circle" ? "50%" : `${Math.round(t * 0.25)}px`;
-  return e && d !== e ? /* @__PURE__ */ a(
-    "img",
-    {
-      src: e,
-      alt: o,
-      loading: "lazy",
-      decoding: "async",
-      onError: () => h(e),
-      className: i,
-      style: {
-        width: `${t}px`,
-        height: `${t}px`,
-        borderRadius: n,
-        objectFit: "contain",
-        flexShrink: 0
+  const [f, u] = g(void 0), n = (r == null ? void 0 : r.trim()) ?? "", a = h === "circle" ? "50%" : `${Math.round(t * 0.25)}px`;
+  if (e && f !== e)
+    return /* @__PURE__ */ i(
+      "img",
+      {
+        src: e,
+        alt: n,
+        loading: "lazy",
+        decoding: "async",
+        onError: () => u(e),
+        className: o,
+        style: {
+          width: `${t}px`,
+          height: `${t}px`,
+          borderRadius: a,
+          objectFit: "contain",
+          flexShrink: 0
+        }
       }
-    }
-  ) : /* @__PURE__ */ a(
+    );
+  const l = n ? { role: "img", "aria-label": n } : { "aria-hidden": !0 };
+  if (c === "placeholder") {
+    const d = `${Math.round(t * 0.25)}px`;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ...l,
+        className: o,
+        style: {
+          width: `${t}px`,
+          height: `${t}px`,
+          flexShrink: 0,
+          borderRadius: a,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--malachite-accent-background, rgb(0, 175, 102))"
+        },
+        children: /* @__PURE__ */ i(
+          "span",
+          {
+            style: {
+              width: d,
+              height: d,
+              borderRadius: "50%",
+              background: "rgba(255, 255, 255, 0.8)"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ i(
     "div",
     {
-      ...o ? { role: "img", "aria-label": o } : { "aria-hidden": !0 },
-      className: i,
+      ...l,
+      className: o,
       style: {
         width: `${t}px`,
         height: `${t}px`,
         flexShrink: 0,
-        borderRadius: n,
+        borderRadius: a,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        background: c(o),
+        background: p(n),
         color: "#ffffff",
         fontWeight: 600,
         fontSize: `${Math.round(t * 0.45)}px`,
         lineHeight: 1,
         textTransform: "uppercase"
       },
-      children: o.charAt(0) || "?"
+      children: n.charAt(0) || "?"
     }
   );
 };
 export {
-  g as Avatar,
-  g as default
+  b as Avatar,
+  b as default
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nexport type AvatarShape = 'square' | 'circle';\n\nexport interface AvatarProps {\n    /** Image URL (logo/photo). Falls back to the initial of `name` when missing or it fails to load. */\n    src?: string;\n    /** Used for the initial fallback and as the image alt / accessible label. */\n    name?: string;\n    /** Pixel size of the (square) avatar. */\n    size?: number;\n    shape?: AvatarShape;\n    className?: string;\n}\n\n// Deterministic, evenly-distributed hue from the label so the same entity always gets\n// the same colour. Saturation/lightness are fixed for a consistent, on-brand feel.\n// NOTE: avatar identity colours (this hue and the white text below) are intentionally\n// NOT theme tokens — they are a generated identity palette, an explicit exception to\n// the \"colours come from theme tokens\" rule (there is no avatar-colour token group).\nconst backgroundFor = (seed: string): string => {\n    let hash = 0;\n    for (let index = 0; index < seed.length; index += 1) {\n        hash = seed.charCodeAt(index) + ((hash << 5) - hash);\n    }\n    return `hsl(${Math.abs(hash) % 360}, 55%, 52%)`;\n};\n\n/**\n * A logo/initial avatar. Renders `src` when available, otherwise a coloured tile\n * with the first letter of `name`. Encapsulates the fallback colour so consumers\n * never hand-roll it.\n */\nconst Avatar: React.FC<AvatarProps> = ({\n    src,\n    name,\n    size = 24,\n    shape = 'square',\n    className = '',\n}) => {\n    // Track which src failed (not a boolean) so switching `src` to a new URL retries the\n    // image instead of staying stuck on the fallback.\n    const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n    const label = name?.trim() ?? '';\n    const borderRadius = shape === 'circle' ? '50%' : `${Math.round(size * 0.25)}px`;\n\n    if (src && failedSrc !== src) {\n        return (\n            <img\n                src={src}\n                alt={label}\n                loading=\"lazy\"\n                decoding=\"async\"\n                onError={() => setFailedSrc(src)}\n                className={className}\n                style={{\n                    width: `${size}px`,\n                    height: `${size}px`,\n                    borderRadius,\n                    objectFit: 'contain',\n                    flexShrink: 0,\n                }}\n            />\n        );\n    }\n\n    // With a label the tile is an image with an accessible name; without one it carries\n    // no information, so mark it decorative (aria-hidden, no role) to avoid an unnamed\n    // image in the accessibility tree.\n    return (\n        <div\n            {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}\n            className={className}\n            style={{\n                width: `${size}px`,\n                height: `${size}px`,\n                flexShrink: 0,\n                borderRadius,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                background: backgroundFor(label),\n                color: '#ffffff',\n                fontWeight: 600,\n                fontSize: `${Math.round(size * 0.45)}px`,\n                lineHeight: 1,\n                textTransform: 'uppercase',\n            }}\n        >\n            {label.charAt(0) || '?'}\n        </div>\n    );\n};\n\nexport default Avatar;\nexport { Avatar };\n"],"names":["backgroundFor","seed","hash","index","Avatar","src","name","size","shape","className","failedSrc","setFailedSrc","useState","label","borderRadius","jsx"],"mappings":";;AAoBA,MAAMA,IAAgB,CAACC,MAAyB;AAC5C,MAAIC,IAAO;AACX,WAASC,IAAQ,GAAGA,IAAQF,EAAK,QAAQE,KAAS;AAC9C,IAAAD,IAAOD,EAAK,WAAWE,CAAK,MAAMD,KAAQ,KAAKA;AAEnD,SAAO,OAAO,KAAK,IAAIA,CAAI,IAAI,GAAG;AACtC,GAOME,IAAgC,CAAC;AAAA,EACnC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAChB,MAAM;AAGF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA6B,MAAS,GAClEC,KAAQP,KAAA,gBAAAA,EAAM,WAAU,IACxBQ,IAAeN,MAAU,WAAW,QAAQ,GAAG,KAAK,MAAMD,IAAO,IAAI,CAAC;AAE5E,SAAIF,KAAOK,MAAcL,IAEjB,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAV;AAAA,MACA,KAAKQ;AAAA,MACL,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,SAAS,MAAMF,EAAaN,CAAG;AAAA,MAC/B,WAAAI;AAAA,MACA,OAAO;AAAA,QACH,OAAO,GAAGF,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,cAAAO;AAAA,QACA,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA,IASR,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIF,IAAQ,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAU,EAAE,eAAe,GAAA;AAAA,MACrE,WAAAJ;AAAA,MACA,OAAO;AAAA,QACH,OAAO,GAAGF,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,YAAY;AAAA,QACZ,cAAAO;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,YAAYd,EAAca,CAAK;AAAA,QAC/B,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU,GAAG,KAAK,MAAMN,IAAO,IAAI,CAAC;AAAA,QACpC,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAGlB,UAAAM,EAAM,OAAO,CAAC,KAAK;AAAA,IAAA;AAAA,EAAA;AAGhC;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nexport type AvatarShape = 'square' | 'circle';\n\n/** `initial` suits a named entity (a person, a model); `placeholder` says \"no logo available\". */\nexport type AvatarFallback = 'initial' | 'placeholder';\n\nexport interface AvatarProps {\n    /** Image URL (logo/photo). Falls back to `fallback` when missing or it fails to load. */\n    src?: string;\n    /** Used for the initial fallback and as the image alt / accessible label. */\n    name?: string;\n    /** Pixel size of the (square) avatar. */\n    size?: number;\n    shape?: AvatarShape;\n    /** What shows when `src` is missing or fails to load. Defaults to `initial`. */\n    fallback?: AvatarFallback;\n    className?: string;\n}\n\n// Deterministic, evenly-distributed hue from the label so the same entity always gets\n// the same colour. Saturation/lightness are fixed for a consistent, on-brand feel.\n// NOTE: avatar identity colours (this hue and the white text below) are intentionally\n// NOT theme tokens — they are a generated identity palette, an explicit exception to\n// the \"colours come from theme tokens\" rule (there is no avatar-colour token group).\nconst backgroundFor = (seed: string): string => {\n    let hash = 0;\n    for (let index = 0; index < seed.length; index += 1) {\n        hash = seed.charCodeAt(index) + ((hash << 5) - hash);\n    }\n    return `hsl(${Math.abs(hash) % 360}, 55%, 52%)`;\n};\n\n/**\n * A logo/initial avatar. Renders `src` when available, otherwise a coloured tile\n * with the first letter of `name`. Encapsulates the fallback colour so consumers\n * never hand-roll it.\n */\nconst Avatar: React.FC<AvatarProps> = ({\n    src,\n    name,\n    size = 24,\n    shape = 'square',\n    fallback = 'initial',\n    className = '',\n}) => {\n    // Track which src failed (not a boolean) so switching `src` to a new URL retries the\n    // image instead of staying stuck on the fallback.\n    const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n    const label = name?.trim() ?? '';\n    const borderRadius = shape === 'circle' ? '50%' : `${Math.round(size * 0.25)}px`;\n\n    if (src && failedSrc !== src) {\n        return (\n            <img\n                src={src}\n                alt={label}\n                loading=\"lazy\"\n                decoding=\"async\"\n                onError={() => setFailedSrc(src)}\n                className={className}\n                style={{\n                    width: `${size}px`,\n                    height: `${size}px`,\n                    borderRadius,\n                    objectFit: 'contain',\n                    flexShrink: 0,\n                }}\n            />\n        );\n    }\n\n    // With a label the tile is an image with an accessible name; without one it carries\n    // no information, so mark it decorative (aria-hidden, no role) to avoid an unnamed\n    // image in the accessibility tree.\n    const tileSemantics = label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true };\n\n    if (fallback === 'placeholder') {\n        const dotSize = `${Math.round(size * 0.25)}px`;\n        return (\n            <div\n                {...tileSemantics}\n                className={className}\n                style={{\n                    width: `${size}px`,\n                    height: `${size}px`,\n                    flexShrink: 0,\n                    borderRadius,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    background: 'var(--malachite-accent-background, rgb(0, 175, 102))',\n                }}\n            >\n                {/* The website's and docs' \"no logo\" mark: its white dot is part of the mark, not a theme colour. */}\n                <span\n                    style={{\n                        width: dotSize,\n                        height: dotSize,\n                        borderRadius: '50%',\n                        background: 'rgba(255, 255, 255, 0.8)',\n                    }}\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...tileSemantics}\n            className={className}\n            style={{\n                width: `${size}px`,\n                height: `${size}px`,\n                flexShrink: 0,\n                borderRadius,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                background: backgroundFor(label),\n                color: '#ffffff',\n                fontWeight: 600,\n                fontSize: `${Math.round(size * 0.45)}px`,\n                lineHeight: 1,\n                textTransform: 'uppercase',\n            }}\n        >\n            {label.charAt(0) || '?'}\n        </div>\n    );\n};\n\nexport default Avatar;\nexport { Avatar };\n"],"names":["backgroundFor","seed","hash","index","Avatar","src","name","size","shape","fallback","className","failedSrc","setFailedSrc","useState","label","borderRadius","jsx","tileSemantics","dotSize"],"mappings":";;AAyBA,MAAMA,IAAgB,CAACC,MAAyB;AAC5C,MAAIC,IAAO;AACX,WAASC,IAAQ,GAAGA,IAAQF,EAAK,QAAQE,KAAS;AAC9C,IAAAD,IAAOD,EAAK,WAAWE,CAAK,MAAMD,KAAQ,KAAKA;AAEnD,SAAO,OAAO,KAAK,IAAIA,CAAI,IAAI,GAAG;AACtC,GAOME,IAAgC,CAAC;AAAA,EACnC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MAAM;AAGF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA6B,MAAS,GAClEC,KAAQR,KAAA,gBAAAA,EAAM,WAAU,IACxBS,IAAeP,MAAU,WAAW,QAAQ,GAAG,KAAK,MAAMD,IAAO,IAAI,CAAC;AAE5E,MAAIF,KAAOM,MAAcN;AACrB,WACI,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAX;AAAA,QACA,KAAKS;AAAA,QACL,SAAQ;AAAA,QACR,UAAS;AAAA,QACT,SAAS,MAAMF,EAAaP,CAAG;AAAA,QAC/B,WAAAK;AAAA,QACA,OAAO;AAAA,UACH,OAAO,GAAGH,CAAI;AAAA,UACd,QAAQ,GAAGA,CAAI;AAAA,UACf,cAAAQ;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAQZ,QAAME,IAAgBH,IAAQ,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAU,EAAE,eAAe,GAAA;AAEtF,MAAIL,MAAa,eAAe;AAC5B,UAAMS,IAAU,GAAG,KAAK,MAAMX,IAAO,IAAI,CAAC;AAC1C,WACI,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGC;AAAA,QACJ,WAAAP;AAAA,QACA,OAAO;AAAA,UACH,OAAO,GAAGH,CAAI;AAAA,UACd,QAAQ,GAAGA,CAAI;AAAA,UACf,YAAY;AAAA,UACZ,cAAAQ;AAAA,UACA,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,YAAY;AAAA,QAAA;AAAA,QAIhB,UAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAOE;AAAA,cACP,QAAQA;AAAA,cACR,cAAc;AAAA,cACd,YAAY;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC;AAAA,MACJ,WAAAP;AAAA,MACA,OAAO;AAAA,QACH,OAAO,GAAGH,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,YAAY;AAAA,QACZ,cAAAQ;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,YAAYf,EAAcc,CAAK;AAAA,QAC/B,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU,GAAG,KAAK,MAAMP,IAAO,IAAI,CAAC;AAAA,QACpC,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAGlB,UAAAO,EAAM,OAAO,CAAC,KAAK;AAAA,IAAA;AAAA,EAAA;AAGhC;"}