@krizaka/ui 3.50.0 → 3.52.0

package/dist/argument-card.js

@@ -1,9 +1,9 @@
-import {
-  Facts
-} from "./chunk-YKEIOYJ5.js";
 import {
   cardHoverClass
 } from "./chunk-IBDTAMPF.js";
+import {
+  Facts
+} from "./chunk-YKEIOYJ5.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";

package/dist/blocks.css

@@ -140,6 +140,191 @@
   .kz-heading-actions { grid-column: 1; grid-row: auto; }
 }
 
+/* ─── Explained figures, next actions and the host's glossary ─── */
+.kz-kpi,
+.kz-next-actions,
+.kz-glossary {
+  min-width: 0;
+  color: var(--kz-text-primary);
+}
+.kz-kpi {
+  display: grid;
+  gap: 12px;
+  padding: clamp(16px, 3vw, 24px);
+  border: 1px solid var(--kz-border-default);
+  border-radius: 8px;
+  background: var(--kz-surface-1);
+}
+.kz-kpi-head,
+.kz-next-action-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+}
+.kz-kpi-label,
+.kz-next-actions-title,
+.kz-glossary-title,
+.kz-next-action-heading h3 {
+  margin: 0;
+  color: var(--kz-text-primary);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+.kz-kpi-state,
+.kz-kpi-stale,
+.kz-next-action-urgency {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 2px 8px;
+  border: 1px solid var(--kz-border-default);
+  border-radius: 999px;
+  color: var(--kz-text-primary);
+  background: var(--kz-surface-2);
+  font-size: 0.75rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.kz-kpi-state[data-state="watch"],
+.kz-kpi-stale,
+.kz-next-action-urgency[data-urgency="medium"] {
+  border-color: color-mix(in srgb, var(--kz-warning) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-warning) 10%, var(--kz-surface-1));
+}
+.kz-kpi-state[data-state="act"],
+.kz-next-action-urgency[data-urgency="high"] {
+  border-color: color-mix(in srgb, var(--kz-danger) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-danger) 10%, var(--kz-surface-1));
+}
+.kz-next-action-urgency[data-urgency="low"] {
+  border-color: color-mix(in srgb, var(--kz-success) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-success) 10%, var(--kz-surface-1));
+}
+.kz-kpi-value {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kz-text-primary);
+  font-family: var(--kz-font-display);
+  font-size: clamp(1.75rem, 5vw, 2.5rem);
+  font-variant-numeric: var(--kz-figures, tabular-nums);
+  font-weight: 700;
+  line-height: 1.15;
+}
+.kz-kpi-meaning,
+.kz-next-action-copy p {
+  margin: 0;
+  color: var(--kz-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.kz-kpi-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 12px 20px;
+  margin: 0;
+}
+.kz-kpi-details > div { min-width: 0; }
+.kz-kpi-details dt {
+  margin-bottom: 3px;
+  color: var(--kz-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+.kz-kpi-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kz-text-primary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.kz-kpi-verify { display: inline-flex; margin-inline-start: 10px; }
+.kz-kpi-freshness {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin: 0;
+  color: var(--kz-text-secondary);
+  font-size: 0.75rem;
+}
+.kz-kpi-sparkline { min-width: 0; }
+.kz-next-actions,
+.kz-glossary {
+  display: grid;
+  gap: 16px;
+}
+.kz-next-actions-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kz-next-action {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--kz-border-default);
+  border-radius: 8px;
+  background: var(--kz-surface-1);
+}
+.kz-next-action-rank { color: var(--kz-text-secondary); font-weight: 650; font-variant-numeric: var(--kz-figures, lining-nums tabular-nums); }
+.kz-next-action-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px 20px;
+  min-width: 0;
+}
+.kz-next-action-copy { display: grid; min-width: 0; gap: 5px; }
+.kz-next-action-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.kz-glossary-list { display: grid; gap: 12px; margin: 0; }
+.kz-glossary-entry {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
+  gap: 8px 20px;
+  padding-block: 12px;
+  border-bottom: 1px solid var(--kz-border-subtle);
+}
+.kz-glossary-entry dt { color: var(--kz-text-primary); font-weight: 650; }
+.kz-glossary-entry dd { margin: 0; color: var(--kz-text-secondary); line-height: 1.55; }
+.kz-glossary-term {
+  border-radius: 2px;
+  color: inherit;
+  font-style: inherit;
+  text-decoration-line: underline;
+  text-decoration-color: var(--kz-accent);
+  text-decoration-style: dotted;
+  text-underline-offset: 0.2em;
+  cursor: help;
+}
+.kz-glossary-term:focus-visible {
+  outline: 2px solid var(--kz-ring, var(--kz-accent));
+  outline-offset: 3px;
+}
+@media (max-width: 520px) {
+  .kz-next-action-content { grid-template-columns: minmax(0, 1fr); }
+  .kz-glossary-entry { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kz-kpi, .kz-next-action, .kz-glossary-entry, .kz-glossary-term { animation: none; scroll-behavior: auto; transition: none; }
+}
+@media print {
+  .kz-kpi, .kz-next-actions, .kz-glossary, .kz-next-action, .kz-glossary-entry {
+    break-inside: avoid;
+    box-shadow: none;
+    background: transparent;
+  }
+  .kz-kpi, .kz-next-action, .kz-glossary-entry { border-color: currentColor; }
+  .kz-kpi-stale, .kz-kpi-state, .kz-next-action-urgency { border-color: currentColor; }
+}
+
 /* Ticks: a word between backticks in a sentence reads as code. */
 .kz-ic {
   padding: 0.08em 0.38em;
@@ -979,6 +1164,30 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tag .kz-stamp[data-tone="construction"] { --kz-stamp-ink: color-mix(in oklab, var(--kz-paper-rule-margin) 72%, var(--kz-paper-tag-ink)); }
 
 /* BirdPlate and AnatomyPlate — a sheet of the field guide. */
+/* ─── The taped photo (ADR-004): a print stuck in the notebook — tilted (`--kz-taped-tilt`, eased on a phone), a thin warm
+   print border, a layered paper shadow (hard offsets, no blur — the Cahier's rule), tape at two opposite corners or one strip at the top. The print stays
+   paper in the dark too (a photo is a photo), a shade dimmer. Transform only: the picture keeps its box, nothing shifts. ─── */
+.kz-taped { position: relative; margin: 0; --kz-print: hsl(44 30% 96%); --kz-print-ink: hsl(215 35% 22%); --kz-tape: hsl(46 58% 82% / 0.72);
+  --kz-tape-w: clamp(54px, 8vw, 92px); --kz-tape-h: clamp(17px, 2.4vw, 26px);
+  padding: clamp(7px, 1.2vw, 14px); background: var(--kz-print); transform: rotate(var(--kz-taped-tilt, -1.6deg)); transform-origin: 50% 60%;
+  box-shadow: 0 1px 0 hsl(30 20% 8% / 0.22), 2px 4px 0 hsl(30 20% 8% / 0.14), 4px 8px 0 -2px hsl(30 20% 8% / 0.08); }
+:root:not(.light) .kz-taped { --kz-print: hsl(42 22% 88%); --kz-tape: hsl(46 40% 70% / 0.62); }
+.kz-taped::before, .kz-taped::after { content: ""; position: absolute; z-index: 1; width: var(--kz-tape-w); height: var(--kz-tape-h); background: var(--kz-tape);
+  box-shadow: 0 1px 0 hsl(30 20% 8% / 0.2); pointer-events: none;
+  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
+.kz-taped::before { top: calc(-0.55 * var(--kz-tape-h)); left: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped::after { bottom: calc(-0.55 * var(--kz-tape-h)); right: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped[data-tape="top"]::before { top: calc(-0.5 * var(--kz-tape-h)); left: calc(50% - var(--kz-tape-w) / 2); transform: rotate(-3deg); }
+.kz-taped[data-tape="top"]::after, .kz-taped[data-tape="none"]::before, .kz-taped[data-tape="none"]::after { display: none; }
+.kz-taped-picture { position: relative; overflow: hidden; }
+.kz-taped-picture > img, .kz-taped-picture > video { display: block; width: 100%; height: auto; }
+.kz-taped-caption { margin: 0; padding: 10px 4px 2px; font-family: var(--kz-font-mono); font-size: 13px; line-height: 20px; color: var(--kz-print-ink); }
+@media (max-width: 640px) {
+  .kz-taped { transform: rotate(calc(var(--kz-taped-tilt, -1.6deg) * 0.6)); }
+  .kz-taped::before { left: -4px; } .kz-taped::after { right: -4px; }
+  .kz-taped[data-tape="top"]::before { left: calc(50% - var(--kz-tape-w) / 2); }
+}
+
 .kz-plate, .kz-anatomy {
   margin: 0;
   padding: 20px 24px 24px;

package/dist/chunk-YATTFMDV.js

@@ -0,0 +1,45 @@
+"use client";
+import {
+  floating
+} from "./chunk-J3NC6ER4.js";
+import {
+  cn
+} from "./chunk-NSLXEDIS.js";
+
+// src/tooltip/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  content,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300,
+  container,
+  sideOffset = 6,
+  collisionPadding = 8,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        sideOffset,
+        collisionPadding,
+        className: cn(floating, "max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)", className),
+        ...props,
+        children: content
+      }
+    ) })
+  ] }) });
+}
+
+export {
+  TooltipProvider,
+  Tooltip
+};
+//# sourceMappingURL=chunk-YATTFMDV.js.map

package/dist/chunk-YATTFMDV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/tooltip.tsx"],"sourcesContent":["// Client (a portal). A short label for a control, on hover after `delayDuration` and on keyboard focus at once;\n// Escape dismisses it. It names nothing: the control keeps its own accessible name (an IconButton's `label`).\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\n/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Content>, \"content\" | \"children\"> & {\n  /** What the tooltip says — passed translated. */\n  content: React.ReactNode;\n  /** The trigger, rendered as is (`asChild`): a focusable element. */\n  children: React.ReactNode;\n  /** Open or closed (controlled), with `onOpenChange`. */\n  open?: boolean;\n  /** Open at first, uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when it opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Hover delay in ms before it opens (300 by default). */\n  delayDuration?: number;\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function Tooltip({\n  content,\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration = 300,\n  container,\n  sideOffset = 6,\n  collisionPadding = 8,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider delayDuration={delayDuration}>\n      <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <TooltipPrimitive.Content\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(floating, \"max-w-xs px-2.5 py-1.5 text-xs font-medium origin-(--radix-tooltip-content-transform-origin)\", className)}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,WAAW,wBAAwB;AAyCtC,SACE,KADF;AAlCC,IAAM,kBAAkB,iBAAiB;AAmBzC,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,eACzB,+BAAC,iBAAiB,MAAjB,EAAsB,MAAY,aAA0B,cAC3D;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,SAAO,MAAE,UAAS;AAAA,IAC5C,oBAAC,iBAAiB,QAAjB,EAAwB,WACvB;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,UAAU,gGAAgG,SAAS;AAAA,QAChI,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/glossary-term.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface GlossaryTermProps {
+    /** The word in the host's glossary. */
+    term: string;
+    /** The host's definition. */
+    definition: React.ReactNode;
+}
+/** An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip. */
+declare function GlossaryTerm({ term, definition }: GlossaryTermProps): React.JSX.Element;
+
+export { GlossaryTerm, type GlossaryTermProps };

package/dist/glossary-term.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  Tooltip
+} from "./chunk-YATTFMDV.js";
+import "./chunk-J3NC6ER4.js";
+import "./chunk-NSLXEDIS.js";
+
+// src/glossary-term/glossary-term.tsx
+import { jsx } from "react/jsx-runtime";
+function GlossaryTerm({ term, definition }) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: definition, children: /* @__PURE__ */ jsx("dfn", { tabIndex: 0, className: "kz-glossary-term", children: term }) });
+}
+export {
+  GlossaryTerm
+};
+//# sourceMappingURL=glossary-term.js.map

package/dist/glossary-term.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/glossary-term/glossary-term.tsx"],"sourcesContent":["// Client (Radix Tooltip): an inline term whose definition is available on keyboard focus as well as hover.\nimport type * as React from \"react\";\n\nimport { Tooltip } from \"../tooltip\";\n\nexport interface GlossaryTermProps {\n  /** The word in the host's glossary. */\n  term: string;\n  /** The host's definition. */\n  definition: React.ReactNode;\n}\n\n/** An underlined glossary word with a keyboard- and screen-reader-accessible definition tooltip. */\nexport function GlossaryTerm({ term, definition }: GlossaryTermProps) {\n  return (\n    <Tooltip content={definition}>\n      <dfn tabIndex={0} className=\"kz-glossary-term\">{term}</dfn>\n    </Tooltip>\n  );\n}\n"],"mappings":";;;;;;;;AAgBM;AAHC,SAAS,aAAa,EAAE,MAAM,WAAW,GAAsB;AACpE,SACE,oBAAC,WAAQ,SAAS,YAChB,8BAAC,SAAI,UAAU,GAAG,WAAU,oBAAoB,gBAAK,GACvD;AAEJ;","names":[]}

package/dist/glossary.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface GlossaryEntry {
+    /** A stable key supplied by the host. */
+    id: string;
+    /** The term in the host's glossary. */
+    term: React.ReactNode;
+    /** The host's definition. */
+    definition: React.ReactNode;
+}
+interface GlossaryProps extends Omit<React.ComponentProps<"section">, "children" | "title"> {
+    /** The section's visible heading. */
+    title: React.ReactNode;
+    /** The terms and definitions from the host's catalogue, in the desired reading order. */
+    terms: readonly GlossaryEntry[];
+}
+/** A page or panel listing the terms and definitions from the host's glossary catalogue. */
+declare function Glossary({ title, terms, className, ...props }: GlossaryProps): React.JSX.Element;
+
+export { Glossary, type GlossaryEntry, type GlossaryProps };

package/dist/glossary.js

@@ -0,0 +1,17 @@
+// src/glossary/glossary.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glossary({ title, terms, className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${id}-title`, className: ["kz-glossary", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsx("h2", { id: `${id}-title`, className: "kz-glossary-title", children: title }),
+    /* @__PURE__ */ jsx("dl", { className: "kz-glossary-list", children: terms.map(({ id: termId, term, definition }) => /* @__PURE__ */ jsxs("div", { className: "kz-glossary-entry", children: [
+      /* @__PURE__ */ jsx("dt", { children: term }),
+      /* @__PURE__ */ jsx("dd", { children: definition })
+    ] }, termId)) })
+  ] });
+}
+export {
+  Glossary
+};
+//# sourceMappingURL=glossary.js.map

package/dist/glossary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/glossary/glossary.tsx"],"sourcesContent":["// Server-safe. The full list from the host's glossary catalogue.\nimport * as React from \"react\";\n\nexport interface GlossaryEntry {\n  /** A stable key supplied by the host. */\n  id: string;\n  /** The term in the host's glossary. */\n  term: React.ReactNode;\n  /** The host's definition. */\n  definition: React.ReactNode;\n}\n\nexport interface GlossaryProps extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n  /** The section's visible heading. */\n  title: React.ReactNode;\n  /** The terms and definitions from the host's catalogue, in the desired reading order. */\n  terms: readonly GlossaryEntry[];\n}\n\n/** A page or panel listing the terms and definitions from the host's glossary catalogue. */\nexport function Glossary({ title, terms, className, ...props }: GlossaryProps) {\n  const id = React.useId();\n  return (\n    <section aria-labelledby={`${id}-title`} className={[\"kz-glossary\", className].filter(Boolean).join(\" \")} {...props}>\n      <h2 id={`${id}-title`} className=\"kz-glossary-title\">{title}</h2>\n      <dl className=\"kz-glossary-list\">\n        {terms.map(({ id: termId, term, definition }) => (\n          <div className=\"kz-glossary-entry\" key={termId}>\n            <dt>{term}</dt>\n            <dd>{definition}</dd>\n          </div>\n        ))}\n      </dl>\n    </section>\n  );\n}\n"],"mappings":";AACA,YAAY,WAAW;AAuBjB,cAGI,YAHJ;AAJC,SAAS,SAAS,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAkB;AAC7E,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,aAAQ,mBAAiB,GAAG,EAAE,UAAU,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAC5G;AAAA,wBAAC,QAAG,IAAI,GAAG,EAAE,UAAU,WAAU,qBAAqB,iBAAM;AAAA,IAC5D,oBAAC,QAAG,WAAU,oBACX,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,WAAW,MACzC,qBAAC,SAAI,WAAU,qBACb;AAAA,0BAAC,QAAI,gBAAK;AAAA,MACV,oBAAC,QAAI,sBAAW;AAAA,SAFsB,MAGxC,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.js

@@ -1,11 +1,4 @@
 "use client";
-import {
-  cx
-} from "./chunk-6ISW63JI.js";
-import {
-  MotionObserver,
-  RotatingWord
-} from "./chunk-4JO5GSSD.js";
 import {
   AkinazaLogo,
   KachizakaLogo,
@@ -21,6 +14,13 @@ import {
   neutral,
   useIds
 } from "./chunk-4E5IUZHR.js";
+import {
+  cx
+} from "./chunk-6ISW63JI.js";
+import {
+  MotionObserver,
+  RotatingWord
+} from "./chunk-4JO5GSSD.js";
 
 // src/marks/wu-sama-geometry.ts
 import { marks } from "@krizaka/tokens/native";

package/dist/kpi-explained.d.ts

@@ -0,0 +1,66 @@
+import { Locale, DateInput } from '@krizaka/intl';
+import * as React from 'react';
+
+type KpiNumberOptions = Omit<Intl.NumberFormatOptions, "style" | "currency" | "currencyDisplay">;
+type KpiFormat = {
+    type: "money";
+    currency: string;
+    minorUnitDigits?: number;
+} | {
+    type: "number";
+    options?: KpiNumberOptions;
+} | {
+    type: "percent";
+    options?: KpiNumberOptions;
+};
+type KpiState = "ok" | "watch" | "act";
+interface KpiExplainedProps extends Omit<React.ComponentProps<"article">, "children"> {
+    /** The figure's name. */
+    label: React.ReactNode;
+    /** The raw number: money is integer minor units; percentages are ratios such as 0.125. */
+    value: number;
+    /** How to format the value with `@krizaka/intl`. */
+    format: KpiFormat;
+    /** The app's locale, e.g. `fr-CA`. */
+    locale: Locale;
+    /** The IANA time zone for freshness dates; defaults to UTC for deterministic rendering. */
+    timeZone?: string;
+    /** One plain-language sentence about what the figure means. */
+    meaning: string;
+    /** The localized label for the formula row. */
+    formulaLabel: React.ReactNode;
+    /** The calculation in words, e.g. “dépenses TTC ÷ ventes TTC”. */
+    formula: string;
+    /** The localized label for the source row. */
+    sourceLabel: React.ReactNode;
+    /** The source link or file name, supplied by the host. */
+    source: React.ReactNode;
+    /** A host-provided action such as “Verify”, next to the source. */
+    verify?: React.ReactNode;
+    /** Host-provided thresholds in the same units as `value`. */
+    thresholds: {
+        direction: "above" | "below";
+        watchAt: number;
+        actAt: number;
+    };
+    /** Host-provided words for the derived state. */
+    stateLabels: Record<KpiState, React.ReactNode>;
+    /** Reading time and the expected next reading time (the host derives it from its cadence). */
+    freshness: {
+        lastRead: DateInput;
+        expectedAt: DateInput;
+        now: DateInput;
+        lastReadLabel: React.ReactNode;
+        staleLabel: React.ReactNode;
+    };
+    /** An optional Sparkline from `@krizaka/charts`, with its own accessible summary. */
+    sparkline?: React.ReactNode;
+    /** Replace every non-space character in the value while preserving its formatted shape. */
+    masked?: boolean;
+    /** The accessible name shown instead of the value when masked. */
+    maskedLabel: string;
+}
+/** A key figure that explains what it means, how it is calculated and where it came from. */
+declare function KpiExplained({ label, value, format, locale, timeZone, meaning, formulaLabel, formula, sourceLabel, source, verify, thresholds, stateLabels, freshness, sparkline, masked, maskedLabel, className, ...props }: KpiExplainedProps): React.JSX.Element;
+
+export { KpiExplained, type KpiExplainedProps, type KpiFormat, type KpiNumberOptions, type KpiState };

package/dist/kpi-explained.js

@@ -0,0 +1,84 @@
+// src/kpi-explained/kpi-explained.tsx
+import { formatDate, formatMoney, formatNumber, formatPercent } from "@krizaka/intl";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatValue(value, format, locale) {
+  switch (format.type) {
+    case "money":
+      return formatMoney(value, { currency: format.currency, locale, minorUnitDigits: format.minorUnitDigits });
+    case "percent":
+      return formatPercent(value, { locale, ...format.options });
+    case "number":
+      return formatNumber(value, { locale, ...format.options });
+  }
+}
+function stateFor(value, thresholds) {
+  if (thresholds.direction === "above") {
+    return value >= thresholds.actAt ? "act" : value >= thresholds.watchAt ? "watch" : "ok";
+  }
+  return value <= thresholds.actAt ? "act" : value <= thresholds.watchAt ? "watch" : "ok";
+}
+function maskValue(value) {
+  return value.replace(/[^\s]/gu, "\u2022");
+}
+function KpiExplained({
+  label,
+  value,
+  format,
+  locale,
+  timeZone = "UTC",
+  meaning,
+  formulaLabel,
+  formula,
+  sourceLabel,
+  source,
+  verify,
+  thresholds,
+  stateLabels,
+  freshness,
+  sparkline,
+  masked = false,
+  maskedLabel,
+  className,
+  ...props
+}) {
+  const id = React.useId();
+  const state = stateFor(value, thresholds);
+  const formattedValue = formatValue(value, format, locale);
+  const lastRead = new Date(freshness.lastRead);
+  const stale = new Date(freshness.now) >= new Date(freshness.expectedAt);
+  return /* @__PURE__ */ jsxs("article", { "aria-labelledby": `${id}-label`, className: ["kz-kpi", className].filter(Boolean).join(" "), "data-state": state, ...props, children: [
+    /* @__PURE__ */ jsxs("header", { className: "kz-kpi-head", children: [
+      /* @__PURE__ */ jsx("h3", { id: `${id}-label`, className: "kz-kpi-label", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "kz-kpi-state", "data-state": state, children: stateLabels[state] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "kz-kpi-value", children: masked ? /* @__PURE__ */ jsx("span", { role: "img", "aria-label": maskedLabel, children: maskValue(formattedValue) }) : formattedValue }),
+    /* @__PURE__ */ jsx("p", { className: "kz-kpi-meaning", children: meaning }),
+    /* @__PURE__ */ jsxs("dl", { className: "kz-kpi-details", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: formulaLabel }),
+        /* @__PURE__ */ jsx("dd", { children: formula })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("dt", { children: sourceLabel }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          source,
+          verify ? /* @__PURE__ */ jsx("span", { className: "kz-kpi-verify", children: verify }) : null
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "kz-kpi-freshness", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        freshness.lastReadLabel,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx("time", { dateTime: lastRead.toISOString(), children: formatDate(lastRead, { locale, style: "medium", timeStyle: "short", timeZone }) }),
+      stale ? /* @__PURE__ */ jsx("span", { className: "kz-kpi-stale", role: "status", children: freshness.staleLabel }) : null
+    ] }),
+    sparkline ? /* @__PURE__ */ jsx("div", { className: "kz-kpi-sparkline", children: sparkline }) : null
+  ] });
+}
+export {
+  KpiExplained
+};
+//# sourceMappingURL=kpi-explained.js.map

package/dist/kpi-explained.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kpi-explained/kpi-explained.tsx"],"sourcesContent":["// Server-safe. A figure whose meaning, formula, source and freshness travel with its value.\nimport { type DateInput, formatDate, formatMoney, formatNumber, formatPercent, type Locale } from \"@krizaka/intl\";\nimport * as React from \"react\";\n\nexport type KpiNumberOptions = Omit<Intl.NumberFormatOptions, \"style\" | \"currency\" | \"currencyDisplay\">;\n\nexport type KpiFormat =\n  | { type: \"money\"; currency: string; minorUnitDigits?: number }\n  | { type: \"number\"; options?: KpiNumberOptions }\n  | { type: \"percent\"; options?: KpiNumberOptions };\n\nexport type KpiState = \"ok\" | \"watch\" | \"act\";\n\nexport interface KpiExplainedProps extends Omit<React.ComponentProps<\"article\">, \"children\"> {\n  /** The figure's name. */\n  label: React.ReactNode;\n  /** The raw number: money is integer minor units; percentages are ratios such as 0.125. */\n  value: number;\n  /** How to format the value with `@krizaka/intl`. */\n  format: KpiFormat;\n  /** The app's locale, e.g. `fr-CA`. */\n  locale: Locale;\n  /** The IANA time zone for freshness dates; defaults to UTC for deterministic rendering. */\n  timeZone?: string;\n  /** One plain-language sentence about what the figure means. */\n  meaning: string;\n  /** The localized label for the formula row. */\n  formulaLabel: React.ReactNode;\n  /** The calculation in words, e.g. “dépenses TTC ÷ ventes TTC”. */\n  formula: string;\n  /** The localized label for the source row. */\n  sourceLabel: React.ReactNode;\n  /** The source link or file name, supplied by the host. */\n  source: React.ReactNode;\n  /** A host-provided action such as “Verify”, next to the source. */\n  verify?: React.ReactNode;\n  /** Host-provided thresholds in the same units as `value`. */\n  thresholds: {\n    direction: \"above\" | \"below\";\n    watchAt: number;\n    actAt: number;\n  };\n  /** Host-provided words for the derived state. */\n  stateLabels: Record<KpiState, React.ReactNode>;\n  /** Reading time and the expected next reading time (the host derives it from its cadence). */\n  freshness: {\n    lastRead: DateInput;\n    expectedAt: DateInput;\n    now: DateInput;\n    lastReadLabel: React.ReactNode;\n    staleLabel: React.ReactNode;\n  };\n  /** An optional Sparkline from `@krizaka/charts`, with its own accessible summary. */\n  sparkline?: React.ReactNode;\n  /** Replace every non-space character in the value while preserving its formatted shape. */\n  masked?: boolean;\n  /** The accessible name shown instead of the value when masked. */\n  maskedLabel: string;\n}\n\nfunction formatValue(value: number, format: KpiFormat, locale: Locale): string {\n  switch (format.type) {\n    case \"money\":\n      return formatMoney(value, { currency: format.currency, locale, minorUnitDigits: format.minorUnitDigits });\n    case \"percent\":\n      return formatPercent(value, { locale, ...format.options });\n    case \"number\":\n      return formatNumber(value, { locale, ...format.options });\n  }\n}\n\nfunction stateFor(value: number, thresholds: KpiExplainedProps[\"thresholds\"]): KpiState {\n  if (thresholds.direction === \"above\") {\n    return value >= thresholds.actAt ? \"act\" : value >= thresholds.watchAt ? \"watch\" : \"ok\";\n  }\n  return value <= thresholds.actAt ? \"act\" : value <= thresholds.watchAt ? \"watch\" : \"ok\";\n}\n\nfunction maskValue(value: string): string {\n  return value.replace(/[^\\s]/gu, \"•\");\n}\n\n/** A key figure that explains what it means, how it is calculated and where it came from. */\nexport function KpiExplained({\n  label,\n  value,\n  format,\n  locale,\n  timeZone = \"UTC\",\n  meaning,\n  formulaLabel,\n  formula,\n  sourceLabel,\n  source,\n  verify,\n  thresholds,\n  stateLabels,\n  freshness,\n  sparkline,\n  masked = false,\n  maskedLabel,\n  className,\n  ...props\n}: KpiExplainedProps) {\n  const id = React.useId();\n  const state = stateFor(value, thresholds);\n  const formattedValue = formatValue(value, format, locale);\n  const lastRead = new Date(freshness.lastRead);\n  const stale = new Date(freshness.now) >= new Date(freshness.expectedAt);\n\n  return (\n    <article aria-labelledby={`${id}-label`} className={[\"kz-kpi\", className].filter(Boolean).join(\" \")} data-state={state} {...props}>\n      <header className=\"kz-kpi-head\">\n        <h3 id={`${id}-label`} className=\"kz-kpi-label\">{label}</h3>\n        <span className=\"kz-kpi-state\" data-state={state}>{stateLabels[state]}</span>\n      </header>\n      <p className=\"kz-kpi-value\">\n        {masked ? <span role=\"img\" aria-label={maskedLabel}>{maskValue(formattedValue)}</span> : formattedValue}\n      </p>\n      <p className=\"kz-kpi-meaning\">{meaning}</p>\n      <dl className=\"kz-kpi-details\">\n        <div><dt>{formulaLabel}</dt><dd>{formula}</dd></div>\n        <div><dt>{sourceLabel}</dt><dd>{source}{verify ? <span className=\"kz-kpi-verify\">{verify}</span> : null}</dd></div>\n      </dl>\n      <p className=\"kz-kpi-freshness\">\n        <span>{freshness.lastReadLabel}: </span>\n        <time dateTime={lastRead.toISOString()}>{formatDate(lastRead, { locale, style: \"medium\", timeStyle: \"short\", timeZone })}</time>\n        {stale ? <span className=\"kz-kpi-stale\" role=\"status\">{freshness.staleLabel}</span> : null}\n      </p>\n      {sparkline ? <div className=\"kz-kpi-sparkline\">{sparkline}</div> : null}\n    </article>\n  );\n}\n"],"mappings":";AACA,SAAyB,YAAY,aAAa,cAAc,qBAAkC;AAClG,YAAY,WAAW;AA8GjB,SACE,KADF;AApDN,SAAS,YAAY,OAAe,QAAmB,QAAwB;AAC7E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO,YAAY,OAAO,EAAE,UAAU,OAAO,UAAU,QAAQ,iBAAiB,OAAO,gBAAgB,CAAC;AAAA,IAC1G,KAAK;AACH,aAAO,cAAc,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAAA,IAC3D,KAAK;AACH,aAAO,aAAa,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAAA,EAC5D;AACF;AAEA,SAAS,SAAS,OAAe,YAAuD;AACtF,MAAI,WAAW,cAAc,SAAS;AACpC,WAAO,SAAS,WAAW,QAAQ,QAAQ,SAAS,WAAW,UAAU,UAAU;AAAA,EACrF;AACA,SAAO,SAAS,WAAW,QAAQ,QAAQ,SAAS,WAAW,UAAU,UAAU;AACrF;AAEA,SAAS,UAAU,OAAuB;AACxC,SAAO,MAAM,QAAQ,WAAW,QAAG;AACrC;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,KAAW,YAAM;AACvB,QAAM,QAAQ,SAAS,OAAO,UAAU;AACxC,QAAM,iBAAiB,YAAY,OAAO,QAAQ,MAAM;AACxD,QAAM,WAAW,IAAI,KAAK,UAAU,QAAQ;AAC5C,QAAM,QAAQ,IAAI,KAAK,UAAU,GAAG,KAAK,IAAI,KAAK,UAAU,UAAU;AAEtE,SACE,qBAAC,aAAQ,mBAAiB,GAAG,EAAE,UAAU,WAAW,CAAC,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,cAAY,OAAQ,GAAG,OAC1H;AAAA,yBAAC,YAAO,WAAU,eAChB;AAAA,0BAAC,QAAG,IAAI,GAAG,EAAE,UAAU,WAAU,gBAAgB,iBAAM;AAAA,MACvD,oBAAC,UAAK,WAAU,gBAAe,cAAY,OAAQ,sBAAY,KAAK,GAAE;AAAA,OACxE;AAAA,IACA,oBAAC,OAAE,WAAU,gBACV,mBAAS,oBAAC,UAAK,MAAK,OAAM,cAAY,aAAc,oBAAU,cAAc,GAAE,IAAU,gBAC3F;AAAA,IACA,oBAAC,OAAE,WAAU,kBAAkB,mBAAQ;AAAA,IACvC,qBAAC,QAAG,WAAU,kBACZ;AAAA,2BAAC,SAAI;AAAA,4BAAC,QAAI,wBAAa;AAAA,QAAK,oBAAC,QAAI,mBAAQ;AAAA,SAAK;AAAA,MAC9C,qBAAC,SAAI;AAAA,4BAAC,QAAI,uBAAY;AAAA,QAAK,qBAAC,QAAI;AAAA;AAAA,UAAQ,SAAS,oBAAC,UAAK,WAAU,iBAAiB,kBAAO,IAAU;AAAA,WAAK;AAAA,SAAK;AAAA,OAC/G;AAAA,IACA,qBAAC,OAAE,WAAU,oBACX;AAAA,2BAAC,UAAM;AAAA,kBAAU;AAAA,QAAc;AAAA,SAAE;AAAA,MACjC,oBAAC,UAAK,UAAU,SAAS,YAAY,GAAI,qBAAW,UAAU,EAAE,QAAQ,OAAO,UAAU,WAAW,SAAS,SAAS,CAAC,GAAE;AAAA,MACxH,QAAQ,oBAAC,UAAK,WAAU,gBAAe,MAAK,UAAU,oBAAU,YAAW,IAAU;AAAA,OACxF;AAAA,IACC,YAAY,oBAAC,SAAI,WAAU,oBAAoB,qBAAU,IAAS;AAAA,KACrE;AAEJ;","names":[]}

package/dist/next-actions.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+type ActionUrgency = "low" | "medium" | "high";
+interface NextAction {
+    /** A stable key supplied by the host. */
+    id: string;
+    /** The action's short name. */
+    title: React.ReactNode;
+    /** Why it matters, in one line. */
+    why: string;
+    /** How soon it matters. */
+    urgency: ActionUrgency;
+    /** The host's translated urgency word. */
+    urgencyLabel: React.ReactNode;
+    /** A host-rendered link, button or command for a developer tool. */
+    action: React.ReactNode;
+}
+interface NextActionsProps extends Omit<React.ComponentProps<"section">, "children" | "title"> {
+    /** A heading such as “Que faire maintenant”. */
+    title: React.ReactNode;
+    /** Two or three actions, already ordered by the host from most to least important. */
+    actions: readonly [NextAction, NextAction] | readonly [NextAction, NextAction, NextAction];
+}
+/** “What to do now”: two or three ranked actions, with their reason and urgency. */
+declare function NextActions({ title, actions, className, ...props }: NextActionsProps): React.JSX.Element;
+
+export { type ActionUrgency, type NextAction, NextActions, type NextActionsProps };

package/dist/next-actions.js

@@ -0,0 +1,27 @@
+// src/next-actions/next-actions.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NextActions({ title, actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs("section", { className: ["kz-next-actions", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsx("h2", { className: "kz-next-actions-title", children: title }),
+    /* @__PURE__ */ jsx("ol", { className: "kz-next-actions-list", children: actions.map((action, index) => /* @__PURE__ */ jsxs("li", { className: "kz-next-action", "data-urgency": action.urgency, children: [
+      /* @__PURE__ */ jsxs("span", { className: "kz-next-action-rank", "aria-hidden": "true", children: [
+        index + 1,
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "kz-next-action-content", children: [
+        /* @__PURE__ */ jsxs("div", { className: "kz-next-action-copy", children: [
+          /* @__PURE__ */ jsxs("div", { className: "kz-next-action-heading", children: [
+            /* @__PURE__ */ jsx("h3", { children: action.title }),
+            /* @__PURE__ */ jsx("span", { className: "kz-next-action-urgency", "data-urgency": action.urgency, children: action.urgencyLabel })
+          ] }),
+          /* @__PURE__ */ jsx("p", { children: action.why })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "kz-next-action-control", children: action.action })
+      ] })
+    ] }, action.id)) })
+  ] });
+}
+export {
+  NextActions
+};
+//# sourceMappingURL=next-actions.js.map

package/dist/next-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/next-actions/next-actions.tsx"],"sourcesContent":["// Server-safe. A ranked list from the host: this block never creates an action of its own.\nimport type * as React from \"react\";\n\nexport type ActionUrgency = \"low\" | \"medium\" | \"high\";\n\nexport interface NextAction {\n  /** A stable key supplied by the host. */\n  id: string;\n  /** The action's short name. */\n  title: React.ReactNode;\n  /** Why it matters, in one line. */\n  why: string;\n  /** How soon it matters. */\n  urgency: ActionUrgency;\n  /** The host's translated urgency word. */\n  urgencyLabel: React.ReactNode;\n  /** A host-rendered link, button or command for a developer tool. */\n  action: React.ReactNode;\n}\n\nexport interface NextActionsProps extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n  /** A heading such as “Que faire maintenant”. */\n  title: React.ReactNode;\n  /** Two or three actions, already ordered by the host from most to least important. */\n  actions: readonly [NextAction, NextAction] | readonly [NextAction, NextAction, NextAction];\n}\n\n/** “What to do now”: two or three ranked actions, with their reason and urgency. */\nexport function NextActions({ title, actions, className, ...props }: NextActionsProps) {\n  return (\n    <section className={[\"kz-next-actions\", className].filter(Boolean).join(\" \")} {...props}>\n      <h2 className=\"kz-next-actions-title\">{title}</h2>\n      <ol className=\"kz-next-actions-list\">\n        {actions.map((action, index) => (\n          <li className=\"kz-next-action\" data-urgency={action.urgency} key={action.id}>\n            <span className=\"kz-next-action-rank\" aria-hidden=\"true\">{index + 1}.</span>\n            <div className=\"kz-next-action-content\">\n              <div className=\"kz-next-action-copy\">\n                <div className=\"kz-next-action-heading\">\n                  <h3>{action.title}</h3>\n                  <span className=\"kz-next-action-urgency\" data-urgency={action.urgency}>{action.urgencyLabel}</span>\n                </div>\n                <p>{action.why}</p>\n              </div>\n              <div className=\"kz-next-action-control\">{action.action}</div>\n            </div>\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":";AA+BM,cAIM,YAJN;AAHC,SAAS,YAAY,EAAE,OAAO,SAAS,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE,qBAAC,aAAQ,WAAW,CAAC,mBAAmB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,OAChF;AAAA,wBAAC,QAAG,WAAU,yBAAyB,iBAAM;AAAA,IAC7C,oBAAC,QAAG,WAAU,wBACX,kBAAQ,IAAI,CAAC,QAAQ,UACpB,qBAAC,QAAG,WAAU,kBAAiB,gBAAc,OAAO,SAClD;AAAA,2BAAC,UAAK,WAAU,uBAAsB,eAAY,QAAQ;AAAA,gBAAQ;AAAA,QAAE;AAAA,SAAC;AAAA,MACrE,qBAAC,SAAI,WAAU,0BACb;AAAA,6BAAC,SAAI,WAAU,uBACb;AAAA,+BAAC,SAAI,WAAU,0BACb;AAAA,gCAAC,QAAI,iBAAO,OAAM;AAAA,YAClB,oBAAC,UAAK,WAAU,0BAAyB,gBAAc,OAAO,SAAU,iBAAO,cAAa;AAAA,aAC9F;AAAA,UACA,oBAAC,OAAG,iBAAO,KAAI;AAAA,WACjB;AAAA,QACA,oBAAC,SAAI,WAAU,0BAA0B,iBAAO,QAAO;AAAA,SACzD;AAAA,SAXgE,OAAO,EAYzE,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/taped-photo.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+type TapedPhotoProps = React.HTMLAttributes<HTMLElement> & {
+    /** The picture: an `img`, a `video`, a scene. It fills the print. */
+    children: React.ReactNode;
+    /** A line written under the picture, on the print. */
+    caption?: React.ReactNode;
+    /** The tilt in degrees (negative leans left); eased on a phone. @default -1.6 */
+    tilt?: number;
+    /** Where the tape holds it: two opposite `corners`, one strip at the `top`, or `none`. @default "corners" */
+    tape?: "corners" | "top" | "none";
+};
+/** A print taped in the notebook: tilted, a white border, a paper shadow, tape at two corners or at the top. */
+declare function TapedPhoto({ children, caption, tilt, tape, className, style, ...props }: TapedPhotoProps): React.JSX.Element;
+
+export { TapedPhoto, type TapedPhotoProps };