@clicoh/orion-library 1.2.0-beta.21 → 1.2.0-beta.23

package/expresivo/ExpFigureBand/ExpFigureBand.jsx

@@ -0,0 +1,102 @@
+'use client';
+import { Each, Skeleton, Stat } from '@clicoh/orion-library';
+import clsx from 'clsx';
+import { useExpScope } from '../ExpScope/ExpScope';
+// The small eyebrow takes the strong shades: the base error, success and amber
+// sit below 4.5:1 on white at 10px.
+const toneMap = {
+    accent: 'text-lavender dark:text-lavender-dark',
+    success: 'text-success-strong dark:text-success-dark',
+    warning: 'text-amber-strong dark:text-amber-dark',
+    error: 'text-error-strong dark:text-error-dark',
+};
+const statTone = {
+    accent: 'default',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+function Highlight({ figure, tone, side, isLoading, }) {
+    return (<div className={clsx('col-span-2 flex min-w-0 items-center', side === 'start'
+            ? 'flex-row-reverse justify-end gap-5 lg:flex-[1.5] lg:gap-7'
+            : 'justify-between gap-5 lg:flex-[1.4]')}>
+      <dt className="flex min-w-0 flex-col gap-0.5">
+        {!!figure.eyebrow && (<span className={clsx('text-[10px] leading-[14px] font-semibold tracking-[0.04em] uppercase', toneMap[tone])}>
+            {figure.eyebrow}
+          </span>)}
+        <span className="text-[13px] leading-[18px] font-semibold text-black dark:text-white">
+          {figure.label}
+        </span>
+        {!!figure.hint && (<span className="text-gray-1 dark:text-gray-2 text-[11px] leading-4">
+            {figure.hint}
+          </span>)}
+      </dt>
+      <dd className="shrink-0 text-5xl leading-none font-bold whitespace-nowrap text-black tabular-nums lg:text-[56px] dark:text-white">
+        {isLoading ? (<Skeleton shape="rect" className="h-12 w-16"/>) : (figure.value)}
+      </dd>
+    </div>);
+}
+/**
+ * One band with the figures that sum up a list: a large figure at the start,
+ * smaller ones in the middle and, at the end, a large one to act on, such as a
+ * gap. It goes above the list, in place of a row of `Stat` cards.
+ *
+ * The band is a description list: each figure is read as its label, then its
+ * value. The eyebrows are color plus words, never color alone.
+ *
+ * Below `lg` it stacks: the lead and the callout take a row each and the
+ * smaller figures go two by two between them.
+ *
+ * Outside an `ExpScope` it falls back to a row of core `Stat` cards, with the
+ * eyebrow tone as the stat's dot.
+ *
+ * @component
+ * @example
+ * <ExpFigureBand
+ *   lead={{ value: 38, eyebrow: 'Active coverage', label: 'Repos in the whitelist', hint: '27 enabled' }}
+ *   figures={[
+ *     { value: 10, label: 'Indexed', hint: 'Ready for a diagnosis' },
+ *     { value: 28, label: 'Without a clone', hint: 'They wait for a sync' },
+ *   ]}
+ *   callout={{ value: 11, eyebrow: 'Gap to close', label: 'Cases without an indexed repo', tone: 'error' }}
+ * />
+ *
+ * @param {ExpFigureBandProps} props - The properties of the ExpFigureBand component.
+ * @param {ExpFigureHighlight} props.lead - The main figure, large, at the start.
+ * @param {ExpFigure[]} [props.figures] - Smaller figures, in the middle.
+ * @param {ExpFigureHighlight} [props.callout] - A figure to act on, large, at the end.
+ * @param {boolean} [props.isLoading=false] - Shows placeholders instead of the values.
+ *
+ * @returns {ReactNode} The band, or a row of core `Stat` cards outside an `ExpScope`.
+ */
+export function ExpFigureBand({ lead, figures = [], callout, isLoading = false, ...restProps }) {
+    const inScope = useExpScope();
+    if (!inScope) {
+        const stats = [
+            { ...lead, tone: statTone[lead.tone ?? 'accent'] },
+            ...figures.map((figure) => ({ ...figure, tone: 'default' })),
+            ...(callout
+                ? [{ ...callout, tone: statTone[callout.tone ?? 'error'] }]
+                : []),
+        ];
+        return (<div {...restProps} aria-busy={isLoading || undefined} className={clsx('grid gap-3 sm:grid-cols-2 lg:auto-cols-fr lg:grid-flow-col lg:grid-cols-none', restProps.className)}>
+        <Each of={stats} render={(stat) => (<Stat key={stat.label} label={stat.label} value={stat.value} hint={stat.hint} tone={stat.tone} isLoading={isLoading}/>)}/>
+      </div>);
+    }
+    return (<dl {...restProps} data-orion-part="exp-figure-band" aria-busy={isLoading || undefined} className={clsx('border-gray-5 grid grid-cols-2 gap-x-4 gap-y-6 rounded-2xl border bg-white p-5', 'lg:flex lg:items-center lg:gap-6 lg:px-8 lg:py-7', 'dark:border-gray-1 dark:bg-black', restProps.className)}>
+      <Highlight figure={lead} tone={lead.tone ?? 'accent'} side="start" isLoading={isLoading}/>
+      <Each of={figures} render={(figure) => (<div key={figure.label} className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1.5 lg:flex-1">
+            <dt className="col-start-2 row-start-1 text-[13px] leading-[18px] font-semibold text-black dark:text-white">
+              {figure.label}
+            </dt>
+            <dd className="col-start-1 row-start-1 text-[32px] leading-none font-bold whitespace-nowrap text-black tabular-nums dark:text-white">
+              {isLoading ? (<Skeleton shape="rect" className="h-8 w-10"/>) : (figure.value)}
+            </dd>
+            {!!figure.hint && (<dd className="text-gray-1 dark:text-gray-2 col-span-2 text-[11px] leading-4">
+                {figure.hint}
+              </dd>)}
+          </div>)}/>
+      {!!callout && (<Highlight figure={callout} tone={callout.tone ?? 'error'} side="end" isLoading={isLoading}/>)}
+    </dl>);
+}
+//# sourceMappingURL=ExpFigureBand.jsx.map

package/expresivo/ExpFigureBand/ExpFigureBand.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpFigureBand.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpFigureBand/ExpFigureBand.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpFigureBand/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExpFigureBand';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpFigureBand/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpFigureBand/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/expresivo/ExpFigureBand/index.js

@@ -0,0 +1,2 @@
+export * from './ExpFigureBand';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpFigureBand/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpFigureBand/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts

@@ -4,23 +4,34 @@ export type ExpGrowBarProps = {
     value: number;
     /** Accessible name of what the bar measures. */
     ariaLabel: string;
+    /** Position between 0 and 100 of a tick across the bar, such as an alert threshold. */
+    marker?: number;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
 /**
  * Progress bar whose fill grows in the clicOH gradient when it mounts. For
  * scores and shares shown at rest; for an operation that is still running,
  * use the core `ProgressBar`.
  *
- * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ * A `marker` draws an amber tick across the bar, such as an alert threshold.
+ * The tick is decoration: say what it marks in the text next to the bar.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`, without the
+ * tick.
  *
  * @component
  * @example
  * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
  *
+ * @example
+ * // Budget used, with the alert threshold at 80 %
+ * <ExpGrowBar value={35} marker={80} ariaLabel="Budget used" className="h-2.5" />
+ *
  * @param {Object} props - The properties of the ExpGrowBar component.
  * @param {number} props.value - Progress between 0 and 100.
  * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ * @param {number} [props.marker] - Position between 0 and 100 of an amber tick across the bar.
  *
  * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
  */
-export declare function ExpGrowBar({ value, ariaLabel, ...restProps }: ExpGrowBarProps): ReactNode;
+export declare function ExpGrowBar({ value, ariaLabel, marker, ...restProps }: ExpGrowBarProps): ReactNode;
 //# sourceMappingURL=ExpGrowBar.d.ts.map

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpGrowBar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,eAAe,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAI9D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAiC7B"}
+{"version":3,"file":"ExpGrowBar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,eAAe,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAI9D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAuC7B"}

package/expresivo/ExpGrowBar/ExpGrowBar.jsx

@@ -9,19 +9,28 @@ const clamp = (value) => Math.min(100, Math.max(0, value));
  * scores and shares shown at rest; for an operation that is still running,
  * use the core `ProgressBar`.
  *
- * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ * A `marker` draws an amber tick across the bar, such as an alert threshold.
+ * The tick is decoration: say what it marks in the text next to the bar.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`, without the
+ * tick.
  *
  * @component
  * @example
  * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
  *
+ * @example
+ * // Budget used, with the alert threshold at 80 %
+ * <ExpGrowBar value={35} marker={80} ariaLabel="Budget used" className="h-2.5" />
+ *
  * @param {Object} props - The properties of the ExpGrowBar component.
  * @param {number} props.value - Progress between 0 and 100.
  * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ * @param {number} [props.marker] - Position between 0 and 100 of an amber tick across the bar.
  *
  * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
  */
-export function ExpGrowBar({ value, ariaLabel, ...restProps }) {
+export function ExpGrowBar({ value, ariaLabel, marker, ...restProps }) {
     const inScope = useExpScope();
     const [shown, setShown] = useState(0);
     const percent = clamp(value);
@@ -32,8 +41,11 @@ export function ExpGrowBar({ value, ariaLabel, ...restProps }) {
     if (!inScope) {
         return <ProgressBar {...restProps} value={percent} ariaLabel={ariaLabel}/>;
     }
-    return (<div {...restProps} role="progressbar" aria-label={ariaLabel} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent} className={clsx('bg-gray-5 dark:bg-gray-dark-1 relative h-2 overflow-hidden rounded-full', restProps.className)}>
-      <span className="from-lavender to-violet absolute inset-y-0 left-0 rounded-full bg-linear-90 transition-[width] duration-900 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none" style={{ width: `${shown}%` }}/>
+    return (<div {...restProps} role="progressbar" aria-label={ariaLabel} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent} className={clsx('relative h-2 rounded-full', restProps.className)}>
+      <span className="bg-gray-5 dark:bg-gray-dark-1 absolute inset-0 overflow-hidden rounded-full">
+        <span className="from-lavender to-violet absolute inset-y-0 left-0 rounded-full bg-linear-90 transition-[width] duration-900 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none" style={{ width: `${shown}%` }}/>
+      </span>
+      {marker !== undefined && (<span aria-hidden="true" className="bg-amber dark:bg-amber-dark absolute -inset-y-1 w-0.5 -translate-x-1/2 rounded-full" style={{ left: `${clamp(marker)}%` }}/>)}
     </div>);
 }
 //# sourceMappingURL=ExpGrowBar.jsx.map

package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpGrowBar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACI;IAChB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAAC;IAC9E,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,aAAa,CAClB,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,aAAa,CAAC,CAAC,OAAO,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CACb,yEAAyE,EACzE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,SAAS,CAAC,4KAA4K,CACtL,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC,EAElC;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ExpGrowBar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAGL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAWnD,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACI;IAChB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CAAC,WAAW,CAAC,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAAC;IAC9E,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,aAAa,CAClB,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB,aAAa,CAAC,CAAC,OAAO,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAElE;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,6EAA6E,CAC3F;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,4KAA4K,CACtL,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC,EAElC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,MAAM,KAAK,SAAS,IAAI,CACvB,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,qFAAqF,CAC/F,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,EACrC,CACH,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts

@@ -9,6 +9,9 @@ export type ExpRepoAvatarProps = {
  * Little creature that stands for a repository next to its name. Decorative:
  * always `aria-hidden`, so the repo name next to it carries the meaning.
  *
+ * The drawings carry their own margin: no padding, circle or background around
+ * them. Under 20px they no longer read; there, show only the name.
+ *
  * Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
  *
  * @component

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpRepoAvatar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,WAAW,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAqBhC"}
+{"version":3,"file":"ExpRepoAvatar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,WAAW,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAqBhC"}

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx

@@ -6,6 +6,9 @@ import { repoAvatarCatalog } from './catalog';
  * Little creature that stands for a repository next to its name. Decorative:
  * always `aria-hidden`, so the repo name next to it carries the meaning.
  *
+ * The drawings carry their own margin: no padding, circle or background around
+ * them. Under 20px they no longer read; there, show only the name.
+ *
  * Outside an `ExpScope`, or with `mascots="hidden"`, it renders nothing.
  *
  * @component

package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpRepoAvatar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQtE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE7D;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CACjC,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ExpRepoAvatar.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/ExpRepoAvatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQtE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE7D;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CACjC,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpRepoAvatar/catalog.d.ts

@@ -1,6 +1,10 @@
 import type { StaticImageData } from 'next/image';
 /** Repo avatars, named after the drawing like their files. Which repo gets which one is the consumer's call. */
-export type ExpRepoAvatarName = 'pulpo' | 'pulpo-lentes' | 'pulpo-verde' | 'cohete' | 'dino' | 'caja' | 'caja-chispa';
-/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
+export type ExpRepoAvatarName = 'pulpo' | 'pulpo-lentes' | 'pulpo-verde' | 'cohete' | 'dino' | 'caja' | 'caja-chispa' | 'pulpo-morado' | 'robot-lente' | 'edificio-cupulas' | 'globo-anillo' | 'caja-ruedas' | 'cubo-morado' | 'dino-placas-azules' | 'criatura-tres-ojos' | 'cohete-azul' | 'dino-placas-amarillas' | 'cubo-brazos' | 'ventana-codigo';
+/**
+ * The first seven are PNGs about 60px wide, sharp up to 30px on high-density
+ * screens. The rest are SVGs drawn to read at 24px and sharp at any size;
+ * `ventana-codigo` is the neutral one for a repo without a drawing of its own.
+ */
 export declare const repoAvatarCatalog: Record<ExpRepoAvatarName, StaticImageData>;
 //# sourceMappingURL=catalog.d.ts.map

package/expresivo/ExpRepoAvatar/catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AASlD,gHAAgH;AAChH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,aAAa,CAAC;AAElB,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAQxE,CAAC"}
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAqBlD,gHAAgH;AAChH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,aAAa,GACb,cAAc,GACd,aAAa,GACb,kBAAkB,GAClB,cAAc,GACd,aAAa,GACb,aAAa,GACb,oBAAoB,GACpB,oBAAoB,GACpB,aAAa,GACb,uBAAuB,GACvB,aAAa,GACb,gBAAgB,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAoBxE,CAAC"}

package/expresivo/ExpRepoAvatar/catalog.js

@@ -1,11 +1,27 @@
 import cajaChispa from '@clicoh/orion-library/assets/avatares/caja-chispa.png';
+import cajaRuedas from '@clicoh/orion-library/assets/avatares/caja-ruedas.svg';
 import caja from '@clicoh/orion-library/assets/avatares/caja.png';
+import coheteAzul from '@clicoh/orion-library/assets/avatares/cohete-azul.svg';
 import cohete from '@clicoh/orion-library/assets/avatares/cohete.png';
+import criaturaTresOjos from '@clicoh/orion-library/assets/avatares/criatura-tres-ojos.svg';
+import cuboBrazos from '@clicoh/orion-library/assets/avatares/cubo-brazos.svg';
+import cuboMorado from '@clicoh/orion-library/assets/avatares/cubo-morado.svg';
+import dinoPlacasAmarillas from '@clicoh/orion-library/assets/avatares/dino-placas-amarillas.svg';
+import dinoPlacasAzules from '@clicoh/orion-library/assets/avatares/dino-placas-azules.svg';
 import dino from '@clicoh/orion-library/assets/avatares/dino.png';
+import edificioCupulas from '@clicoh/orion-library/assets/avatares/edificio-cupulas.svg';
+import globoAnillo from '@clicoh/orion-library/assets/avatares/globo-anillo.svg';
 import pulpoLentes from '@clicoh/orion-library/assets/avatares/pulpo-lentes.png';
+import pulpoMorado from '@clicoh/orion-library/assets/avatares/pulpo-morado.svg';
 import pulpoVerde from '@clicoh/orion-library/assets/avatares/pulpo-verde.png';
 import pulpo from '@clicoh/orion-library/assets/avatares/pulpo.png';
-/** PNGs about 60px wide: sharp up to 30px on high-density screens. */
+import robotLente from '@clicoh/orion-library/assets/avatares/robot-lente.svg';
+import ventanaCodigo from '@clicoh/orion-library/assets/avatares/ventana-codigo.svg';
+/**
+ * The first seven are PNGs about 60px wide, sharp up to 30px on high-density
+ * screens. The rest are SVGs drawn to read at 24px and sharp at any size;
+ * `ventana-codigo` is the neutral one for a repo without a drawing of its own.
+ */
 export const repoAvatarCatalog = {
     pulpo,
     'pulpo-lentes': pulpoLentes,
@@ -14,5 +30,17 @@ export const repoAvatarCatalog = {
     dino,
     caja,
     'caja-chispa': cajaChispa,
+    'pulpo-morado': pulpoMorado,
+    'robot-lente': robotLente,
+    'edificio-cupulas': edificioCupulas,
+    'globo-anillo': globoAnillo,
+    'caja-ruedas': cajaRuedas,
+    'cubo-morado': cuboMorado,
+    'dino-placas-azules': dinoPlacasAzules,
+    'criatura-tres-ojos': criaturaTresOjos,
+    'cohete-azul': coheteAzul,
+    'dino-placas-amarillas': dinoPlacasAmarillas,
+    'cubo-brazos': cuboBrazos,
+    'ventana-codigo': ventanaCodigo,
 };
 //# sourceMappingURL=catalog.js.map

package/expresivo/ExpRepoAvatar/catalog.js.map

@@ -1 +1 @@
-{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,MAAM,MAAM,kDAAkD,CAAC;AACtE,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,KAAK,MAAM,iDAAiD,CAAC;AAYpE,sEAAsE;AACtE,MAAM,CAAC,MAAM,iBAAiB,GAA+C;IAC3E,KAAK;IACL,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,aAAa,EAAE,UAAU;CAC1B,CAAC"}
+{"version":3,"file":"catalog.js","sourceRoot":"","sources":["../../src/expresivo/ExpRepoAvatar/catalog.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,MAAM,MAAM,kDAAkD,CAAC;AACtE,OAAO,gBAAgB,MAAM,8DAA8D,CAAC;AAC5F,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,iEAAiE,CAAC;AAClG,OAAO,gBAAgB,MAAM,8DAA8D,CAAC;AAC5F,OAAO,IAAI,MAAM,gDAAgD,CAAC;AAClE,OAAO,eAAe,MAAM,4DAA4D,CAAC;AACzF,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,WAAW,MAAM,wDAAwD,CAAC;AACjF,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,KAAK,MAAM,iDAAiD,CAAC;AACpE,OAAO,UAAU,MAAM,uDAAuD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAwBrF;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAA+C;IAC3E,KAAK;IACL,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,aAAa,EAAE,UAAU;IACzB,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,kBAAkB,EAAE,eAAe;IACnC,cAAc,EAAE,WAAW;IAC3B,aAAa,EAAE,UAAU;IACzB,aAAa,EAAE,UAAU;IACzB,oBAAoB,EAAE,gBAAgB;IACtC,oBAAoB,EAAE,gBAAgB;IACtC,aAAa,EAAE,UAAU;IACzB,uBAAuB,EAAE,mBAAmB;IAC5C,aAAa,EAAE,UAAU;IACzB,gBAAgB,EAAE,aAAa;CAChC,CAAC"}

package/expresivo/ExpSplitCard/ExpSplitCard.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** One column of the card: its accessible name and what goes in it. */
+export type ExpSplitCardColumn = {
+    label: string;
+    content: ReactNode;
+};
+export type ExpSplitCardProps = {
+    /** The columns, in order. The first one is a little wider. */
+    columns: ExpSplitCardColumn[];
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * One card split into columns by thin dividers, with the brand band along the
+ * top. For a few summaries that read together, such as a score, a budget and
+ * the goals, in place of a row of separate cards.
+ *
+ * Each column is a `section` named by its `label`. From `lg` the columns sit
+ * side by side and the first one is a little wider; below, they stack with a
+ * divider between them.
+ *
+ * Outside an `ExpScope` it falls back to a row of core `Card`s, one per column.
+ *
+ * @component
+ * @example
+ * <ExpSplitCard
+ *   columns={[
+ *     { label: 'Score', content: <ScoreSummary /> },
+ *     { label: 'Budget', content: <BudgetSummary /> },
+ *     { label: 'Goals', content: <GoalList /> },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpSplitCard component.
+ * @param {ExpSplitCardColumn[]} props.columns - The columns, each with its `label` and `content`.
+ *
+ * @returns {ReactNode} The card, or a row of core `Card`s outside an `ExpScope`.
+ */
+export declare function ExpSplitCard({ columns, ...restProps }: ExpSplitCardProps): ReactNode;
+//# sourceMappingURL=ExpSplitCard.d.ts.map

package/expresivo/ExpSplitCard/ExpSplitCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpSplitCard.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/ExpSplitCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,8DAA8D;IAC9D,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAyD/B"}

package/expresivo/ExpSplitCard/ExpSplitCard.jsx

@@ -0,0 +1,48 @@
+'use client';
+import { Card, Each } from '@clicoh/orion-library';
+import clsx from 'clsx';
+import { useExpScope } from '../ExpScope/ExpScope';
+/**
+ * One card split into columns by thin dividers, with the brand band along the
+ * top. For a few summaries that read together, such as a score, a budget and
+ * the goals, in place of a row of separate cards.
+ *
+ * Each column is a `section` named by its `label`. From `lg` the columns sit
+ * side by side and the first one is a little wider; below, they stack with a
+ * divider between them.
+ *
+ * Outside an `ExpScope` it falls back to a row of core `Card`s, one per column.
+ *
+ * @component
+ * @example
+ * <ExpSplitCard
+ *   columns={[
+ *     { label: 'Score', content: <ScoreSummary /> },
+ *     { label: 'Budget', content: <BudgetSummary /> },
+ *     { label: 'Goals', content: <GoalList /> },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpSplitCard component.
+ * @param {ExpSplitCardColumn[]} props.columns - The columns, each with its `label` and `content`.
+ *
+ * @returns {ReactNode} The card, or a row of core `Card`s outside an `ExpScope`.
+ */
+export function ExpSplitCard({ columns, ...restProps }) {
+    const inScope = useExpScope();
+    if (!inScope) {
+        return (<div {...restProps} className={clsx('grid grid-cols-1 gap-4 lg:auto-cols-fr lg:grid-flow-col', restProps.className)}>
+        <Each of={columns} render={(column) => (<Card key={column.label} as="section" aria-label={column.label} className="min-w-0">
+              {column.content}
+            </Card>)}/>
+      </div>);
+    }
+    return (<div {...restProps} data-orion-part="exp-split-card" className={clsx('flex flex-col overflow-hidden rounded-2xl border pt-1 text-black lg:flex-row dark:text-white', restProps.className)}>
+      <Each of={columns} render={(column, index) => (<section key={column.label} aria-label={column.label} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col justify-center gap-3 px-6 py-6 lg:px-8 lg:py-7', index === 0
+                ? 'lg:flex-[1.15]'
+                : 'border-t lg:flex-1 lg:border-t-0 lg:border-l')}>
+            {column.content}
+          </section>)}/>
+    </div>);
+}
+//# sourceMappingURL=ExpSplitCard.jsx.map

package/expresivo/ExpSplitCard/ExpSplitCard.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpSplitCard.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/ExpSplitCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAanD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,yDAAyD,EACzD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;QAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,OAAO,CAAC,CACZ,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAClB,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,EAAE,CAAC,SAAS,CACZ,UAAU,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACzB,SAAS,CAAC,SAAS,CAEnB;cAAA,CAAC,MAAM,CAAC,OAAO,CACjB;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,EAEN;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,eAAe,CAAC,gBAAgB,CAChC,SAAS,CAAC,CAAC,IAAI,CACb,8FAA8F,EAC9F,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,OAAO,CAAC,CACZ,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,CAAC,OAAO,CACN,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,UAAU,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACzB,SAAS,CAAC,CAAC,IAAI,CACb,uGAAuG,EACvG,KAAK,KAAK,CAAC;gBACT,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,8CAA8C,CACnD,CAAC,CAEF;YAAA,CAAC,MAAM,CAAC,OAAO,CACjB;UAAA,EAAE,OAAO,CAAC,CACX,CAAC,EAEN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpSplitCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExpSplitCard';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpSplitCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/expresivo/ExpSplitCard/index.js

@@ -0,0 +1,2 @@
+export * from './ExpSplitCard';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpSplitCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpSplitCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/expresivo/ExpStatusTag/ExpStatusTag.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ExpStatusTagModifier = 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
+export type ExpStatusTagProps = {
+    modifier: ExpStatusTagModifier;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/**
+ * Status as a flat tinted tag with a thick bar on its left edge, for a status
+ * column in a table where a row of outlined badges reads too busy. Same status
+ * modifiers as the core `Badge`; the label carries the message.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` with the same
+ * `modifier`.
+ *
+ * @component
+ * @example
+ * <ExpStatusTag modifier="success">Synced</ExpStatusTag>
+ *
+ * @param {ExpStatusTagProps} props - The properties of the ExpStatusTag component.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
+ * @param {ReactNode} props.children - Label of the status.
+ *
+ * @returns {ReactNode} The tag, or a core `Badge` outside an `ExpScope`.
+ */
+export declare function ExpStatusTag({ modifier, children, ...restProps }: ExpStatusTagProps): ReactNode;
+//# sourceMappingURL=ExpStatusTag.d.ts.map

package/expresivo/ExpStatusTag/ExpStatusTag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpStatusTag.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/ExpStatusTag.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAkBtD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAuB/B"}

package/expresivo/ExpStatusTag/ExpStatusTag.jsx

@@ -0,0 +1,44 @@
+'use client';
+import { Badge } from '@clicoh/orion-library';
+import clsx from 'clsx';
+import { useExpScope } from '../ExpScope/ExpScope';
+// The label takes the strong shade: the base `warning` and `success` hues sit
+// below 4.5:1 on their tint.
+const colorMap = {
+    success: 'border-success bg-success-1 text-success-strong dark:bg-success/16 dark:text-success',
+    warning: 'border-amber bg-warning-1 text-amber-strong dark:bg-warning/16 dark:text-amber',
+    error: 'border-error bg-error-1 text-error-strong dark:bg-error/16 dark:text-error',
+    info: 'border-info bg-info-1 text-info-dark-3 dark:bg-info/16 dark:text-info',
+    progress: 'border-lavender bg-lavender-2 text-lavender dark:bg-lavender/18 dark:text-lavender',
+    disabled: 'border-gray-1 bg-gray-6 text-gray-1 dark:border-gray-2 dark:bg-gray-2/16 dark:text-gray-2',
+};
+/**
+ * Status as a flat tinted tag with a thick bar on its left edge, for a status
+ * column in a table where a row of outlined badges reads too busy. Same status
+ * modifiers as the core `Badge`; the label carries the message.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` with the same
+ * `modifier`.
+ *
+ * @component
+ * @example
+ * <ExpStatusTag modifier="success">Synced</ExpStatusTag>
+ *
+ * @param {ExpStatusTagProps} props - The properties of the ExpStatusTag component.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
+ * @param {ReactNode} props.children - Label of the status.
+ *
+ * @returns {ReactNode} The tag, or a core `Badge` outside an `ExpScope`.
+ */
+export function ExpStatusTag({ modifier, children, ...restProps }) {
+    const inScope = useExpScope();
+    if (!inScope) {
+        return (<Badge {...restProps} modifier={modifier}>
+        {children}
+      </Badge>);
+    }
+    return (<span {...restProps} className={clsx('inline-flex items-center rounded-[3px_8px_8px_3px] border-l-3 px-2.5 py-1 text-xs leading-4 font-semibold whitespace-nowrap', colorMap[modifier], restProps.className)}>
+      {children}
+    </span>);
+}
+//# sourceMappingURL=ExpStatusTag.jsx.map

package/expresivo/ExpStatusTag/ExpStatusTag.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpStatusTag.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/ExpStatusTag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAenD,8EAA8E;AAC9E,6BAA6B;AAC7B,MAAM,QAAQ,GAAyC;IACrD,OAAO,EACL,sFAAsF;IACxF,OAAO,EACL,gFAAgF;IAClF,KAAK,EACH,4EAA4E;IAC9E,IAAI,EAAE,uEAAuE;IAC7E,QAAQ,EACN,oFAAoF;IACtF,QAAQ,EACN,2FAA2F;CAC9F,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACM;IAClB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACvC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,6HAA6H,EAC7H,QAAQ,CAAC,QAAQ,CAAC,EAClB,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpStatusTag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExpStatusTag';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpStatusTag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/expresivo/ExpStatusTag/index.js

@@ -0,0 +1,2 @@
+export * from './ExpStatusTag';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpStatusTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpStatusTag/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/expresivo/index.d.ts

@@ -19,4 +19,9 @@ export * from './ExpSearchField';
 export * from './ExpLadder';
 export * from './ExpRepoAvatar';
 export * from './ExpStatIcon';
+export * from './ExpFigureBand';
+export * from './ExpSplitCard';
+export * from './ExpStatusTag';
+export * from './ExpCodeHostIcon';
+export * from './ExpAccentNote';
 //# sourceMappingURL=index.d.ts.map

package/expresivo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/expresivo/index.js

@@ -19,4 +19,9 @@ export * from './ExpSearchField';
 export * from './ExpLadder';
 export * from './ExpRepoAvatar';
 export * from './ExpStatIcon';
+export * from './ExpFigureBand';
+export * from './ExpSplitCard';
+export * from './ExpStatusTag';
+export * from './ExpCodeHostIcon';
+export * from './ExpAccentNote';
 //# sourceMappingURL=index.js.map

package/expresivo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.2.0-beta.21",
+  "version": "1.2.0-beta.23",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",
     "clsx": "2.1.1",
     "leaflet": "^1.9.4",
     "next": "16.3.8",
+    "pdfjs-dist": "6.4.299",
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-icons": "5.2.1",