@signalcore/ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/kit/TimeField.js

@@ -1,8 +1,8 @@
 import { useKit, useParts } from "./context.js";
 import { ariaOf } from "./Field.js";
+import { DAY_END, formatTime, halfHours, momentOf, momentParts, parseEndTime, parseTime } from "./dates.js";
 import { useRadios } from "./Choices.js";
 import { Combobox } from "./Combobox.js";
-import { DAY_END, formatTime, halfHours, momentOf, momentParts, parseEndTime, parseTime } from "./dates.js";
 import { DateField } from "./DateField.js";
 import { ClockIcon } from "@phosphor-icons/react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/kit/Timeline.d.ts

@@ -0,0 +1,14 @@
+import { TimelineItem } from "../blocks.js";
+//#region src/kit/Timeline.d.ts
+/** When a timeline's item was, short: "20 oct, 16:00"; its year when not this one's. */
+export declare function formatWhen(at: string, code: string, today?: Date): string;
+/**
+ * Dated things, one under another along a hairline, the newest first: each a dot on the line (in
+ * its tone, when it has one), its title with where it stands in a quiet word at its right, when
+ * it was under it, and a line about it.
+ */
+export declare function Timeline({ items }: {
+  items: TimelineItem[];
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/kit/Timeline.js

@@ -0,0 +1,71 @@
+import { useKit, useParts } from "./context.js";
+import { TIME, dayOf, momentParts } from "./dates.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Timeline.tsx
+/** When a timeline's item was, short: "20 oct, 16:00"; its year when not this one's. */
+function formatWhen(at, code, today = /* @__PURE__ */ new Date()) {
+	const [date, time] = momentParts(at);
+	const day = dayOf(date);
+	if (!day) return at;
+	const timed = TIME.test(time);
+	if (timed) {
+		const [hours = 0, minutes = 0] = time.split(":").map(Number);
+		day.setHours(hours, minutes);
+	}
+	return new Intl.DateTimeFormat(code, {
+		day: "numeric",
+		month: "short",
+		...day.getFullYear() !== today.getFullYear() && { year: "numeric" },
+		...timed && {
+			hour: "numeric",
+			minute: "2-digit"
+		}
+	}).format(day);
+}
+/**
+* Dated things, one under another along a hairline, the newest first: each a dot on the line (in
+* its tone, when it has one), its title with where it stands in a quiet word at its right, when
+* it was under it, and a line about it.
+*/
+function Timeline({ items }) {
+	const part = useParts();
+	const { code } = useKit();
+	return /* @__PURE__ */ jsx("ol", {
+		part: "timeline",
+		className: part("sc-timeline"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+			className: part("sc-timeline__item", ...item.tone ? [`sc-timeline__item--${item.tone}`] : []),
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: part("sc-timeline__dot")
+			}), /* @__PURE__ */ jsxs("div", {
+				className: part("sc-timeline__body"),
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: part("sc-timeline__head"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: part("sc-timeline__title"),
+							children: item.title
+						}), item.status !== void 0 && /* @__PURE__ */ jsx("span", {
+							className: part("sc-timeline__status"),
+							children: item.status
+						})]
+					}),
+					/* @__PURE__ */ jsx("time", {
+						dateTime: item.at,
+						className: part("sc-timeline__when"),
+						children: formatWhen(item.at, code)
+					}),
+					item.text !== void 0 && /* @__PURE__ */ jsx("p", {
+						className: part("sc-timeline__text"),
+						children: item.text
+					})
+				]
+			})]
+		}, item.id ?? index))
+	});
+}
+//#endregion
+export { Timeline, formatWhen };
+
+//# sourceMappingURL=Timeline.js.map

package/dist/kit/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../src/kit/Timeline.tsx"],"sourcesContent":["import type { TimelineItem } from \"../blocks\";\nimport { useKit, useParts } from \"./context\";\nimport { dayOf, momentParts, TIME } from \"./dates\";\n\n/** When a timeline's item was, short: \"20 oct, 16:00\"; its year when not this one's. */\nexport function formatWhen(at: string, code: string, today: Date = new Date()): string {\n  const [date, time] = momentParts(at);\n  const day = dayOf(date);\n  if (!day) return at;\n  const timed = TIME.test(time);\n  if (timed) {\n    const [hours = 0, minutes = 0] = time.split(\":\").map(Number);\n    day.setHours(hours, minutes);\n  }\n  return new Intl.DateTimeFormat(code, {\n    day: \"numeric\",\n    month: \"short\",\n    ...(day.getFullYear() !== today.getFullYear() && { year: \"numeric\" }),\n    ...(timed && { hour: \"numeric\", minute: \"2-digit\" }),\n  }).format(day);\n}\n\n/**\n * Dated things, one under another along a hairline, the newest first: each a dot on the line (in\n * its tone, when it has one), its title with where it stands in a quiet word at its right, when\n * it was under it, and a line about it.\n */\nexport function Timeline({ items }: { items: TimelineItem[] }) {\n  const part = useParts();\n  const { code } = useKit();\n  return (\n    <ol part=\"timeline\" className={part(\"sc-timeline\")}>\n      {items.map((item, index) => (\n        <li\n          key={item.id ?? index}\n          className={part(\n            \"sc-timeline__item\",\n            ...(item.tone ? ([`sc-timeline__item--${item.tone}`] as const) : []),\n          )}\n        >\n          <span aria-hidden className={part(\"sc-timeline__dot\")} />\n          <div className={part(\"sc-timeline__body\")}>\n            <p className={part(\"sc-timeline__head\")}>\n              <span className={part(\"sc-timeline__title\")}>{item.title}</span>\n              {item.status !== undefined && (\n                <span className={part(\"sc-timeline__status\")}>{item.status}</span>\n              )}\n            </p>\n            <time dateTime={item.at} className={part(\"sc-timeline__when\")}>\n              {formatWhen(item.at, code)}\n            </time>\n            {item.text !== undefined && <p className={part(\"sc-timeline__text\")}>{item.text}</p>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,WAAW,IAAY,MAAc,wBAAc,IAAI,KAAK,GAAW;CACrF,MAAM,CAAC,MAAM,QAAQ,YAAY,EAAE;CACnC,MAAM,MAAM,MAAM,IAAI;CACtB,IAAI,CAAC,KAAK,OAAO;CACjB,MAAM,QAAQ,KAAK,KAAK,IAAI;CAC5B,IAAI,OAAO;EACT,MAAM,CAAC,QAAQ,GAAG,UAAU,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,IAAI,MAAM;EAC3D,IAAI,SAAS,OAAO,OAAO;CAC7B;CACA,OAAO,IAAI,KAAK,eAAe,MAAM;EACnC,KAAK;EACL,OAAO;EACP,GAAI,IAAI,YAAY,MAAM,MAAM,YAAY,KAAK,EAAE,MAAM,UAAU;EACnE,GAAI,SAAS;GAAE,MAAM;GAAW,QAAQ;EAAU;CACpD,CAAC,CAAC,CAAC,OAAO,GAAG;AACf;;;;;;AAOA,SAAgB,SAAS,EAAE,SAAoC;CAC7D,MAAM,OAAO,SAAS;CACtB,MAAM,EAAE,SAAS,OAAO;CACxB,OACE,oBAAC,MAAD;EAAI,MAAK;EAAW,WAAW,KAAK,aAAa;EAC9C,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,MAAD;GAEE,WAAW,KACT,qBACA,GAAI,KAAK,OAAQ,CAAC,sBAAsB,KAAK,MAAM,IAAc,CAAC,CACpE;GALF,UAAA,CAOE,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,KAAK,kBAAkB;GAAI,CAAA,GACxD,qBAAC,OAAD;IAAK,WAAW,KAAK,mBAAmB;IAAxC,UAAA;KACE,qBAAC,KAAD;MAAG,WAAW,KAAK,mBAAmB;MAAtC,UAAA,CACE,oBAAC,QAAD;OAAM,WAAW,KAAK,oBAAoB;OAAI,UAAA,KAAK;MAAY,CAAA,GAC9D,KAAK,WAAW,KAAA,KACf,oBAAC,QAAD;OAAM,WAAW,KAAK,qBAAqB;OAAI,UAAA,KAAK;MAAa,CAAA,CAElE;;KACH,oBAAC,QAAD;MAAM,UAAU,KAAK;MAAI,WAAW,KAAK,mBAAmB;MACzD,UAAA,WAAW,KAAK,IAAI,IAAI;KACrB,CAAA;KACL,KAAK,SAAS,KAAA,KAAa,oBAAC,KAAD;MAAG,WAAW,KAAK,mBAAmB;MAAI,UAAA,KAAK;KAAQ,CAAA;IAChF;GACH,CAAA,CAAA;EAnBG,GAAA,KAAK,MAAM,KAmBd,CACL;CACC,CAAA;AAER"}

package/dist/kit/context.d.ts

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
  * host's own under the same keys, so a host styles every place a primitive appears at once.
  * (`sc-card` is the Ficha's; the kit's card is `sc-panel`.)
  */
-export type KitPart = "sc-panel" | "sc-panel__head" | "sc-panel__head--image" | "sc-panel__heading" | "sc-panel__title" | "sc-panel__subtitle" | "sc-list" | "sc-row" | "sc-row--quiet" | "sc-row--pressed" | "sc-row__main" | "sc-row__text" | "sc-row__title" | "sc-row__subtitle" | "sc-row__error" | "sc-row__meta" | "sc-row__trailing" | "sc-mark" | "sc-mark--logo" | "sc-mark--photo" | "sc-mark--round" | "sc-tiles" | "sc-tiles__grid" | "sc-tile" | "sc-tile--quiet" | "sc-tile__main" | "sc-tile__count" | "sc-tile__title" | "sc-stack" | "sc-stack__item" | "sc-stack__more" | "sc-tag" | "sc-tag--info" | "sc-tag--success" | "sc-tag--warning" | "sc-tag--danger" | "sc-stat" | "sc-stat--info" | "sc-stat--success" | "sc-stat--warning" | "sc-stat--danger" | "sc-stat__label" | "sc-stat__value" | "sc-stat__hint" | "sc-stats" | "sc-stats__grid" | "sc-chart" | "sc-chart--bar" | "sc-chart--line" | "sc-chart__row" | "sc-chart__label" | "sc-chart__track" | "sc-chart__bar" | "sc-chart__value" | "sc-chart__top" | "sc-chart__plot" | "sc-chart__wash" | "sc-chart__axis" | "sc-chart__line" | "sc-chart__dot" | "sc-chart__tip" | "sc-chart__ends" | "sc-chart__data" | "sc-note" | "sc-note--info" | "sc-note--success" | "sc-note--warning" | "sc-note--danger" | "sc-note__body" | "sc-button" | "sc-button--primary" | "sc-button--neutral" | "sc-button--danger" | "sc-button--ghost" | "sc-button--sm" | "sc-button--icon" | "sc-switch" | "sc-audio" | "sc-audio--compact" | "sc-audio__play" | "sc-audio__wave" | "sc-audio__time" | "sc-field" | "sc-field__label" | "sc-field__optional" | "sc-field__help" | "sc-field__error" | "sc-control" | "sc-control--trigger" | "sc-control__input" | "sc-control__unit" | "sc-control__steppers" | "sc-control__reveal" | "sc-control__tag" | "sc-check" | "sc-popover" | "sc-listbox" | "sc-listbox__item" | "sc-listbox__empty" | "sc-calendar" | "sc-picks" | "sc-segments" | "sc-pick" | "sc-chips" | "sc-chip" | "sc-slots" | "sc-moment" | "sc-range" | "sc-rating" | "sc-upload" | "sc-upload__zone" | "sc-upload__icon" | "sc-upload__text" | "sc-attachments" | "sc-attachment" | "sc-attachment--failed" | "sc-attachment__main" | "sc-attachment__text" | "sc-attachment__name" | "sc-attachment__meta" | "sc-attachment__action" | "sc-attachment__bar" | "sc-orb" | "sc-orb--idle" | "sc-orb--listening" | "sc-orb--thinking" | "sc-orb--speaking" | "sc-orb--still" | "sc-orb--loading" | "sc-orb__ring" | "sc-orb__core" | "sc-automation" | "sc-automation--gone" | "sc-automation__head" | "sc-automation__heading" | "sc-automation__title" | "sc-automation__when" | "sc-automation__end" | "sc-automation__dot" | "sc-automation__summary" | "sc-automation__section" | "sc-automation__label" | "sc-automation__steps" | "sc-automation__step" | "sc-automation__number" | "sc-automation__name" | "sc-automation__uses" | "sc-automation__use" | "sc-automation__board" | "sc-automation__more" | "sc-automation__runs" | "sc-automation__run--open" | "sc-automation__status" | "sc-automation__empty" | "sc-run" | "sc-run__head" | "sc-run__by" | "sc-run__end" | "sc-run__took" | "sc-run__heading" | "sc-run__title" | "sc-run__meta" | "sc-run__summary" | "sc-run__section" | "sc-run__label" | "sc-run__steps" | "sc-run__step" | "sc-run__number" | "sc-run__name" | "sc-run__calls" | "sc-run__call" | "sc-run__call--would" | "sc-run__call--failed" | "sc-run__count" | "sc-run__error" | "sc-run__live" | "sc-run__links" | "sc-run__empty";
+export type KitPart = "sc-panel" | "sc-panel__head" | "sc-panel__head--image" | "sc-panel__heading" | "sc-panel__title" | "sc-panel__subtitle" | "sc-list" | "sc-row" | "sc-row--quiet" | "sc-row--pressed" | "sc-row__main" | "sc-row__text" | "sc-row__title" | "sc-row__subtitle" | "sc-row__error" | "sc-row__meta" | "sc-row__trailing" | "sc-mark" | "sc-mark--logo" | "sc-mark--photo" | "sc-mark--round" | "sc-tiles" | "sc-tiles__grid" | "sc-tile" | "sc-tile--quiet" | "sc-tile__main" | "sc-tile__count" | "sc-tile__title" | "sc-stack" | "sc-stack__item" | "sc-stack__more" | "sc-tag" | "sc-tag--info" | "sc-tag--success" | "sc-tag--warning" | "sc-tag--danger" | "sc-stat" | "sc-stat--info" | "sc-stat--success" | "sc-stat--warning" | "sc-stat--danger" | "sc-stat__label" | "sc-stat__value" | "sc-stat__hint" | "sc-stats" | "sc-stats__grid" | "sc-chart" | "sc-chart--bar" | "sc-chart--line" | "sc-chart__row" | "sc-chart__label" | "sc-chart__track" | "sc-chart__bar" | "sc-chart__value" | "sc-chart__top" | "sc-chart__plot" | "sc-chart__wash" | "sc-chart__axis" | "sc-chart__line" | "sc-chart__dot" | "sc-chart__tip" | "sc-chart__ends" | "sc-chart__data" | "sc-note" | "sc-note--info" | "sc-note--success" | "sc-note--warning" | "sc-note--danger" | "sc-note__body" | "sc-button" | "sc-button--primary" | "sc-button--neutral" | "sc-button--danger" | "sc-button--ghost" | "sc-button--sm" | "sc-button--icon" | "sc-switch" | "sc-audio" | "sc-audio--compact" | "sc-audio__play" | "sc-audio__wave" | "sc-audio__time" | "sc-field" | "sc-field__label" | "sc-field__optional" | "sc-field__help" | "sc-field__error" | "sc-control" | "sc-control--trigger" | "sc-control__input" | "sc-control__unit" | "sc-control__steppers" | "sc-control__reveal" | "sc-control__tag" | "sc-check" | "sc-popover" | "sc-listbox" | "sc-listbox__item" | "sc-listbox__empty" | "sc-calendar" | "sc-picks" | "sc-segments" | "sc-pick" | "sc-chips" | "sc-chip" | "sc-slots" | "sc-moment" | "sc-range" | "sc-rating" | "sc-upload" | "sc-upload__zone" | "sc-upload__icon" | "sc-upload__text" | "sc-attachments" | "sc-attachment" | "sc-attachment--failed" | "sc-attachment__main" | "sc-attachment__text" | "sc-attachment__name" | "sc-attachment__meta" | "sc-attachment__action" | "sc-attachment__bar" | "sc-orb" | "sc-orb--idle" | "sc-orb--listening" | "sc-orb--thinking" | "sc-orb--speaking" | "sc-orb--still" | "sc-orb--loading" | "sc-orb__ring" | "sc-orb__core" | "sc-automation" | "sc-automation--gone" | "sc-automation__head" | "sc-automation__heading" | "sc-automation__title" | "sc-automation__when" | "sc-automation__end" | "sc-automation__dot" | "sc-automation__summary" | "sc-automation__section" | "sc-automation__label" | "sc-automation__steps" | "sc-automation__step" | "sc-automation__number" | "sc-automation__name" | "sc-automation__uses" | "sc-automation__use" | "sc-automation__board" | "sc-automation__more" | "sc-automation__runs" | "sc-automation__run--open" | "sc-automation__status" | "sc-automation__empty" | "sc-run" | "sc-run__head" | "sc-run__by" | "sc-run__end" | "sc-run__took" | "sc-run__heading" | "sc-run__title" | "sc-run__meta" | "sc-run__summary" | "sc-run__section" | "sc-run__label" | "sc-run__steps" | "sc-run__step" | "sc-run__number" | "sc-run__name" | "sc-run__calls" | "sc-run__call" | "sc-run__call--would" | "sc-run__call--failed" | "sc-run__count" | "sc-run__error" | "sc-run__live" | "sc-run__links" | "sc-run__empty" | "sc-agenda" | "sc-agenda--day" | "sc-agenda__days" | "sc-agenda__day" | "sc-agenda__day--today" | "sc-agenda__day--empty" | "sc-agenda__date" | "sc-agenda__weekday" | "sc-agenda__number" | "sc-agenda__events" | "sc-agenda__event" | "sc-agenda__time" | "sc-agenda__what" | "sc-agenda__title" | "sc-agenda__detail" | "sc-agenda__empty" | "sc-timeline" | "sc-timeline__item" | "sc-timeline__item--info" | "sc-timeline__item--success" | "sc-timeline__item--warning" | "sc-timeline__item--danger" | "sc-timeline__dot" | "sc-timeline__body" | "sc-timeline__head" | "sc-timeline__title" | "sc-timeline__status" | "sc-timeline__when" | "sc-timeline__text" | "sc-board" | "sc-board__column" | "sc-board__column--over" | "sc-board__head" | "sc-board__title" | "sc-board__count" | "sc-board__cards" | "sc-board__card" | "sc-board__card--dragging" | "sc-board__card-title" | "sc-board__card-subtitle" | "sc-board__card-meta" | "sc-board__move" | "sc-board__menu" | "sc-board__empty";
 export type KitClassNames = Partial<Record<KitPart, string>> | undefined;
 /**
  * Gives the primitives under it the host's classes, words and language; without it they are

package/dist/kit/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/kit/context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nimport { classes } from \"../classes\";\nimport { KIT_MESSAGES, type KitLocale, type KitMessages } from \"./messages\";\n\n/**\n * The kit's parts, by the class each carries: one BEM family per primitive. `classNames` adds a\n * host's own under the same keys, so a host styles every place a primitive appears at once.\n * (`sc-card` is the Ficha's; the kit's card is `sc-panel`.)\n */\nexport type KitPart =\n  | \"sc-panel\"\n  | \"sc-panel__head\"\n  | \"sc-panel__head--image\"\n  | \"sc-panel__heading\"\n  | \"sc-panel__title\"\n  | \"sc-panel__subtitle\"\n  | \"sc-list\"\n  | \"sc-row\"\n  | \"sc-row--quiet\"\n  | \"sc-row--pressed\"\n  | \"sc-row__main\"\n  | \"sc-row__text\"\n  | \"sc-row__title\"\n  | \"sc-row__subtitle\"\n  | \"sc-row__error\"\n  | \"sc-row__meta\"\n  | \"sc-row__trailing\"\n  | \"sc-mark\"\n  | \"sc-mark--logo\"\n  | \"sc-mark--photo\"\n  | \"sc-mark--round\"\n  | \"sc-tiles\"\n  | \"sc-tiles__grid\"\n  | \"sc-tile\"\n  | \"sc-tile--quiet\"\n  | \"sc-tile__main\"\n  | \"sc-tile__count\"\n  | \"sc-tile__title\"\n  | \"sc-stack\"\n  | \"sc-stack__item\"\n  | \"sc-stack__more\"\n  | \"sc-tag\"\n  | \"sc-tag--info\"\n  | \"sc-tag--success\"\n  | \"sc-tag--warning\"\n  | \"sc-tag--danger\"\n  | \"sc-stat\"\n  | \"sc-stat--info\"\n  | \"sc-stat--success\"\n  | \"sc-stat--warning\"\n  | \"sc-stat--danger\"\n  | \"sc-stat__label\"\n  | \"sc-stat__value\"\n  | \"sc-stat__hint\"\n  | \"sc-stats\"\n  | \"sc-stats__grid\"\n  | \"sc-chart\"\n  | \"sc-chart--bar\"\n  | \"sc-chart--line\"\n  | \"sc-chart__row\"\n  | \"sc-chart__label\"\n  | \"sc-chart__track\"\n  | \"sc-chart__bar\"\n  | \"sc-chart__value\"\n  | \"sc-chart__top\"\n  | \"sc-chart__plot\"\n  | \"sc-chart__wash\"\n  | \"sc-chart__axis\"\n  | \"sc-chart__line\"\n  | \"sc-chart__dot\"\n  | \"sc-chart__tip\"\n  | \"sc-chart__ends\"\n  | \"sc-chart__data\"\n  | \"sc-note\"\n  | \"sc-note--info\"\n  | \"sc-note--success\"\n  | \"sc-note--warning\"\n  | \"sc-note--danger\"\n  | \"sc-note__body\"\n  | \"sc-button\"\n  | \"sc-button--primary\"\n  | \"sc-button--neutral\"\n  | \"sc-button--danger\"\n  | \"sc-button--ghost\"\n  | \"sc-button--sm\"\n  | \"sc-button--icon\"\n  | \"sc-switch\"\n  | \"sc-audio\"\n  | \"sc-audio--compact\"\n  | \"sc-audio__play\"\n  | \"sc-audio__wave\"\n  | \"sc-audio__time\"\n  | \"sc-field\"\n  | \"sc-field__label\"\n  | \"sc-field__optional\"\n  | \"sc-field__help\"\n  | \"sc-field__error\"\n  | \"sc-control\"\n  | \"sc-control--trigger\"\n  | \"sc-control__input\"\n  | \"sc-control__unit\"\n  | \"sc-control__steppers\"\n  | \"sc-control__reveal\"\n  | \"sc-control__tag\"\n  | \"sc-check\"\n  | \"sc-popover\"\n  | \"sc-listbox\"\n  | \"sc-listbox__item\"\n  | \"sc-listbox__empty\"\n  | \"sc-calendar\"\n  | \"sc-picks\"\n  | \"sc-segments\"\n  | \"sc-pick\"\n  | \"sc-chips\"\n  | \"sc-chip\"\n  | \"sc-slots\"\n  | \"sc-moment\"\n  | \"sc-range\"\n  | \"sc-rating\"\n  | \"sc-upload\"\n  | \"sc-upload__zone\"\n  | \"sc-upload__icon\"\n  | \"sc-upload__text\"\n  | \"sc-attachments\"\n  | \"sc-attachment\"\n  | \"sc-attachment--failed\"\n  | \"sc-attachment__main\"\n  | \"sc-attachment__text\"\n  | \"sc-attachment__name\"\n  | \"sc-attachment__meta\"\n  | \"sc-attachment__action\"\n  | \"sc-attachment__bar\"\n  | \"sc-orb\"\n  | \"sc-orb--idle\"\n  | \"sc-orb--listening\"\n  | \"sc-orb--thinking\"\n  | \"sc-orb--speaking\"\n  | \"sc-orb--still\"\n  | \"sc-orb--loading\"\n  | \"sc-orb__ring\"\n  | \"sc-orb__core\"\n  | \"sc-automation\"\n  | \"sc-automation--gone\"\n  | \"sc-automation__head\"\n  | \"sc-automation__heading\"\n  | \"sc-automation__title\"\n  | \"sc-automation__when\"\n  | \"sc-automation__end\"\n  | \"sc-automation__dot\"\n  | \"sc-automation__summary\"\n  | \"sc-automation__section\"\n  | \"sc-automation__label\"\n  | \"sc-automation__steps\"\n  | \"sc-automation__step\"\n  | \"sc-automation__number\"\n  | \"sc-automation__name\"\n  | \"sc-automation__uses\"\n  | \"sc-automation__use\"\n  | \"sc-automation__board\"\n  | \"sc-automation__more\"\n  | \"sc-automation__runs\"\n  | \"sc-automation__run--open\"\n  | \"sc-automation__status\"\n  | \"sc-automation__empty\"\n  | \"sc-run\"\n  | \"sc-run__head\"\n  | \"sc-run__by\"\n  | \"sc-run__end\"\n  | \"sc-run__took\"\n  | \"sc-run__heading\"\n  | \"sc-run__title\"\n  | \"sc-run__meta\"\n  | \"sc-run__summary\"\n  | \"sc-run__section\"\n  | \"sc-run__label\"\n  | \"sc-run__steps\"\n  | \"sc-run__step\"\n  | \"sc-run__number\"\n  | \"sc-run__name\"\n  | \"sc-run__calls\"\n  | \"sc-run__call\"\n  | \"sc-run__call--would\"\n  | \"sc-run__call--failed\"\n  | \"sc-run__count\"\n  | \"sc-run__error\"\n  | \"sc-run__live\"\n  | \"sc-run__links\"\n  | \"sc-run__empty\";\n\nexport type KitClassNames = Partial<Record<KitPart, string>> | undefined;\n\n/** What every primitive under one host shares: its classes, its words, its language. */\ninterface KitScope {\n  classNames: KitClassNames;\n  messages: KitMessages;\n  locale: KitLocale | undefined;\n  /** The locale's code, for Intl: \"es\", \"en-US\". */\n  code: string;\n}\n\nconst KitContext = createContext<KitScope>({\n  classNames: undefined,\n  messages: KIT_MESSAGES,\n  locale: undefined,\n  code: \"en-US\",\n});\n\n/**\n * Gives the primitives under it the host's classes, words and language; without it they are\n * the package's, in English.\n */\nexport function KitProvider({\n  classNames,\n  messages,\n  locale,\n  children,\n}: {\n  classNames?: KitClassNames;\n  messages?: Partial<KitMessages> | undefined;\n  locale?: KitLocale | undefined;\n  children: ReactNode;\n}) {\n  const scope: KitScope = {\n    classNames,\n    messages: { ...KIT_MESSAGES, ...messages },\n    locale,\n    code: locale?.code ?? \"en-US\",\n  };\n  return <KitContext value={scope}>{children}</KitContext>;\n}\n\nexport function useKit(): KitScope {\n  return useContext(KitContext);\n}\n\n/** The classes of the kit's parts, each with the host's own under it. */\nexport function useParts(): (...parts: KitPart[]) => string {\n  const { classNames } = useKit();\n  return (...parts) => classes(classNames, ...parts);\n}\n\n/** A part's classes and the caller's own, as one `className`. */\nexport function joined(...names: (string | false | undefined)[]): string {\n  return names.filter(Boolean).join(\" \");\n}\n"],"mappings":";;;;;AAyMA,MAAM,aAAa,cAAwB;CACzC,YAAY,KAAA;CACZ,UAAU;CACV,QAAQ,KAAA;CACR,MAAM;AACR,CAAC;;;;;AAMD,SAAgB,YAAY,EAC1B,YACA,UACA,QACA,YAMC;CACD,MAAM,QAAkB;EACtB;EACA,UAAU;GAAE,GAAG;GAAc,GAAG;EAAS;EACzC;EACA,MAAM,QAAQ,QAAQ;CACxB;CACA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAQ;CAAqB,CAAA;AACzD;AAEA,SAAgB,SAAmB;CACjC,OAAO,WAAW,UAAU;AAC9B;;AAGA,SAAgB,WAA4C;CAC1D,MAAM,EAAE,eAAe,OAAO;CAC9B,QAAQ,GAAG,UAAU,QAAQ,YAAY,GAAG,KAAK;AACnD;;AAGA,SAAgB,OAAO,GAAG,OAA+C;CACvE,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/kit/context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nimport { classes } from \"../classes\";\nimport { KIT_MESSAGES, type KitLocale, type KitMessages } from \"./messages\";\n\n/**\n * The kit's parts, by the class each carries: one BEM family per primitive. `classNames` adds a\n * host's own under the same keys, so a host styles every place a primitive appears at once.\n * (`sc-card` is the Ficha's; the kit's card is `sc-panel`.)\n */\nexport type KitPart =\n  | \"sc-panel\"\n  | \"sc-panel__head\"\n  | \"sc-panel__head--image\"\n  | \"sc-panel__heading\"\n  | \"sc-panel__title\"\n  | \"sc-panel__subtitle\"\n  | \"sc-list\"\n  | \"sc-row\"\n  | \"sc-row--quiet\"\n  | \"sc-row--pressed\"\n  | \"sc-row__main\"\n  | \"sc-row__text\"\n  | \"sc-row__title\"\n  | \"sc-row__subtitle\"\n  | \"sc-row__error\"\n  | \"sc-row__meta\"\n  | \"sc-row__trailing\"\n  | \"sc-mark\"\n  | \"sc-mark--logo\"\n  | \"sc-mark--photo\"\n  | \"sc-mark--round\"\n  | \"sc-tiles\"\n  | \"sc-tiles__grid\"\n  | \"sc-tile\"\n  | \"sc-tile--quiet\"\n  | \"sc-tile__main\"\n  | \"sc-tile__count\"\n  | \"sc-tile__title\"\n  | \"sc-stack\"\n  | \"sc-stack__item\"\n  | \"sc-stack__more\"\n  | \"sc-tag\"\n  | \"sc-tag--info\"\n  | \"sc-tag--success\"\n  | \"sc-tag--warning\"\n  | \"sc-tag--danger\"\n  | \"sc-stat\"\n  | \"sc-stat--info\"\n  | \"sc-stat--success\"\n  | \"sc-stat--warning\"\n  | \"sc-stat--danger\"\n  | \"sc-stat__label\"\n  | \"sc-stat__value\"\n  | \"sc-stat__hint\"\n  | \"sc-stats\"\n  | \"sc-stats__grid\"\n  | \"sc-chart\"\n  | \"sc-chart--bar\"\n  | \"sc-chart--line\"\n  | \"sc-chart__row\"\n  | \"sc-chart__label\"\n  | \"sc-chart__track\"\n  | \"sc-chart__bar\"\n  | \"sc-chart__value\"\n  | \"sc-chart__top\"\n  | \"sc-chart__plot\"\n  | \"sc-chart__wash\"\n  | \"sc-chart__axis\"\n  | \"sc-chart__line\"\n  | \"sc-chart__dot\"\n  | \"sc-chart__tip\"\n  | \"sc-chart__ends\"\n  | \"sc-chart__data\"\n  | \"sc-note\"\n  | \"sc-note--info\"\n  | \"sc-note--success\"\n  | \"sc-note--warning\"\n  | \"sc-note--danger\"\n  | \"sc-note__body\"\n  | \"sc-button\"\n  | \"sc-button--primary\"\n  | \"sc-button--neutral\"\n  | \"sc-button--danger\"\n  | \"sc-button--ghost\"\n  | \"sc-button--sm\"\n  | \"sc-button--icon\"\n  | \"sc-switch\"\n  | \"sc-audio\"\n  | \"sc-audio--compact\"\n  | \"sc-audio__play\"\n  | \"sc-audio__wave\"\n  | \"sc-audio__time\"\n  | \"sc-field\"\n  | \"sc-field__label\"\n  | \"sc-field__optional\"\n  | \"sc-field__help\"\n  | \"sc-field__error\"\n  | \"sc-control\"\n  | \"sc-control--trigger\"\n  | \"sc-control__input\"\n  | \"sc-control__unit\"\n  | \"sc-control__steppers\"\n  | \"sc-control__reveal\"\n  | \"sc-control__tag\"\n  | \"sc-check\"\n  | \"sc-popover\"\n  | \"sc-listbox\"\n  | \"sc-listbox__item\"\n  | \"sc-listbox__empty\"\n  | \"sc-calendar\"\n  | \"sc-picks\"\n  | \"sc-segments\"\n  | \"sc-pick\"\n  | \"sc-chips\"\n  | \"sc-chip\"\n  | \"sc-slots\"\n  | \"sc-moment\"\n  | \"sc-range\"\n  | \"sc-rating\"\n  | \"sc-upload\"\n  | \"sc-upload__zone\"\n  | \"sc-upload__icon\"\n  | \"sc-upload__text\"\n  | \"sc-attachments\"\n  | \"sc-attachment\"\n  | \"sc-attachment--failed\"\n  | \"sc-attachment__main\"\n  | \"sc-attachment__text\"\n  | \"sc-attachment__name\"\n  | \"sc-attachment__meta\"\n  | \"sc-attachment__action\"\n  | \"sc-attachment__bar\"\n  | \"sc-orb\"\n  | \"sc-orb--idle\"\n  | \"sc-orb--listening\"\n  | \"sc-orb--thinking\"\n  | \"sc-orb--speaking\"\n  | \"sc-orb--still\"\n  | \"sc-orb--loading\"\n  | \"sc-orb__ring\"\n  | \"sc-orb__core\"\n  | \"sc-automation\"\n  | \"sc-automation--gone\"\n  | \"sc-automation__head\"\n  | \"sc-automation__heading\"\n  | \"sc-automation__title\"\n  | \"sc-automation__when\"\n  | \"sc-automation__end\"\n  | \"sc-automation__dot\"\n  | \"sc-automation__summary\"\n  | \"sc-automation__section\"\n  | \"sc-automation__label\"\n  | \"sc-automation__steps\"\n  | \"sc-automation__step\"\n  | \"sc-automation__number\"\n  | \"sc-automation__name\"\n  | \"sc-automation__uses\"\n  | \"sc-automation__use\"\n  | \"sc-automation__board\"\n  | \"sc-automation__more\"\n  | \"sc-automation__runs\"\n  | \"sc-automation__run--open\"\n  | \"sc-automation__status\"\n  | \"sc-automation__empty\"\n  | \"sc-run\"\n  | \"sc-run__head\"\n  | \"sc-run__by\"\n  | \"sc-run__end\"\n  | \"sc-run__took\"\n  | \"sc-run__heading\"\n  | \"sc-run__title\"\n  | \"sc-run__meta\"\n  | \"sc-run__summary\"\n  | \"sc-run__section\"\n  | \"sc-run__label\"\n  | \"sc-run__steps\"\n  | \"sc-run__step\"\n  | \"sc-run__number\"\n  | \"sc-run__name\"\n  | \"sc-run__calls\"\n  | \"sc-run__call\"\n  | \"sc-run__call--would\"\n  | \"sc-run__call--failed\"\n  | \"sc-run__count\"\n  | \"sc-run__error\"\n  | \"sc-run__live\"\n  | \"sc-run__links\"\n  | \"sc-run__empty\"\n  | \"sc-agenda\"\n  | \"sc-agenda--day\"\n  | \"sc-agenda__days\"\n  | \"sc-agenda__day\"\n  | \"sc-agenda__day--today\"\n  | \"sc-agenda__day--empty\"\n  | \"sc-agenda__date\"\n  | \"sc-agenda__weekday\"\n  | \"sc-agenda__number\"\n  | \"sc-agenda__events\"\n  | \"sc-agenda__event\"\n  | \"sc-agenda__time\"\n  | \"sc-agenda__what\"\n  | \"sc-agenda__title\"\n  | \"sc-agenda__detail\"\n  | \"sc-agenda__empty\"\n  | \"sc-timeline\"\n  | \"sc-timeline__item\"\n  | \"sc-timeline__item--info\"\n  | \"sc-timeline__item--success\"\n  | \"sc-timeline__item--warning\"\n  | \"sc-timeline__item--danger\"\n  | \"sc-timeline__dot\"\n  | \"sc-timeline__body\"\n  | \"sc-timeline__head\"\n  | \"sc-timeline__title\"\n  | \"sc-timeline__status\"\n  | \"sc-timeline__when\"\n  | \"sc-timeline__text\"\n  | \"sc-board\"\n  | \"sc-board__column\"\n  | \"sc-board__column--over\"\n  | \"sc-board__head\"\n  | \"sc-board__title\"\n  | \"sc-board__count\"\n  | \"sc-board__cards\"\n  | \"sc-board__card\"\n  | \"sc-board__card--dragging\"\n  | \"sc-board__card-title\"\n  | \"sc-board__card-subtitle\"\n  | \"sc-board__card-meta\"\n  | \"sc-board__move\"\n  | \"sc-board__menu\"\n  | \"sc-board__empty\";\n\nexport type KitClassNames = Partial<Record<KitPart, string>> | undefined;\n\n/** What every primitive under one host shares: its classes, its words, its language. */\ninterface KitScope {\n  classNames: KitClassNames;\n  messages: KitMessages;\n  locale: KitLocale | undefined;\n  /** The locale's code, for Intl: \"es\", \"en-US\". */\n  code: string;\n}\n\nconst KitContext = createContext<KitScope>({\n  classNames: undefined,\n  messages: KIT_MESSAGES,\n  locale: undefined,\n  code: \"en-US\",\n});\n\n/**\n * Gives the primitives under it the host's classes, words and language; without it they are\n * the package's, in English.\n */\nexport function KitProvider({\n  classNames,\n  messages,\n  locale,\n  children,\n}: {\n  classNames?: KitClassNames;\n  messages?: Partial<KitMessages> | undefined;\n  locale?: KitLocale | undefined;\n  children: ReactNode;\n}) {\n  const scope: KitScope = {\n    classNames,\n    messages: { ...KIT_MESSAGES, ...messages },\n    locale,\n    code: locale?.code ?? \"en-US\",\n  };\n  return <KitContext value={scope}>{children}</KitContext>;\n}\n\nexport function useKit(): KitScope {\n  return useContext(KitContext);\n}\n\n/** The classes of the kit's parts, each with the host's own under it. */\nexport function useParts(): (...parts: KitPart[]) => string {\n  const { classNames } = useKit();\n  return (...parts) => classes(classNames, ...parts);\n}\n\n/** A part's classes and the caller's own, as one `className`. */\nexport function joined(...names: (string | false | undefined)[]): string {\n  return names.filter(Boolean).join(\" \");\n}\n"],"mappings":";;;;;AAqPA,MAAM,aAAa,cAAwB;CACzC,YAAY,KAAA;CACZ,UAAU;CACV,QAAQ,KAAA;CACR,MAAM;AACR,CAAC;;;;;AAMD,SAAgB,YAAY,EAC1B,YACA,UACA,QACA,YAMC;CACD,MAAM,QAAkB;EACtB;EACA,UAAU;GAAE,GAAG;GAAc,GAAG;EAAS;EACzC;EACA,MAAM,QAAQ,QAAQ;CACxB;CACA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAQ;CAAqB,CAAA;AACzD;AAEA,SAAgB,SAAmB;CACjC,OAAO,WAAW,UAAU;AAC9B;;AAGA,SAAgB,WAA4C;CAC1D,MAAM,EAAE,eAAe,OAAO;CAC9B,QAAQ,GAAG,UAAU,QAAQ,YAAY,GAAG,KAAK;AACnD;;AAGA,SAAgB,OAAO,GAAG,OAA+C;CACvE,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC"}

package/dist/kit/messages.d.ts

@@ -95,6 +95,28 @@ export interface KitMessages {
   automation: AutomationMessages;
   /** An app for the person to connect, as its connection stands. */
   connect: ConnectMessages;
+  /** A calendar's words. */
+  calendar: CalendarMessages;
+  /** A board's words. */
+  board: BoardMessages;
+}
+/** What a calendar says besides its events. */
+export interface CalendarMessages {
+  /** An event that takes the whole day, where its hours would be. */
+  allDay: string;
+  /** A day with nothing on it. */
+  empty: string;
+}
+/** What a board says besides its cards. */
+export interface BoardMessages {
+  /** A card's button that moves it to another column, given the card, for screen readers. */
+  move: (card: string) => string;
+  /** Over the columns it may go to. */
+  moveTo: string;
+  /** A card moved, as the person's answer reads. */
+  moved: (card: string, column: string) => string;
+  /** A column with no cards. */
+  empty: string;
 }
 /** The words of an app's card: its button, and what it says where the button isn't. */
 export interface ConnectMessages {

package/dist/kit/messages.js

@@ -64,6 +64,16 @@ const KIT_MESSAGES = {
 		connected: "Connected",
 		failed: "It couldn't be connected",
 		preparing: "Getting it ready"
+	},
+	calendar: {
+		allDay: "All day",
+		empty: "Nothing planned"
+	},
+	board: {
+		move: (card) => `Move ${card}`,
+		moveTo: "Move to",
+		moved: (card, column) => `${card} to ${column}`,
+		empty: "Nothing here"
 	}
 };
 //#endregion

package/dist/kit/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","names":[],"sources":["../../src/kit/messages.ts"],"sourcesContent":["import type { DayPickerLocale } from \"react-day-picker\";\n\nimport { AUTOMATION_MESSAGES, type AutomationMessages } from \"../automation/messages\";\n\n/**\n * The language the kit's dates are read in: a locale from `@signalcore/ui/locale` (the\n * calendar's, with its words), whose `code` also formats days, times, numbers and lists.\n */\nexport type KitLocale = DayPickerLocale;\n\n/** The words the kit's controls say; a host gives its own, in its language. */\nexport interface KitMessages {\n  /** A field left empty that must be filled. */\n  required: string;\n  /** A day, a time, both, an option, a rating still to pick; also an empty picker's invitation. */\n  chooseDate: string;\n  chooseTime: string;\n  chooseMoment: string;\n  chooseOption: string;\n  chooseRating: string;\n  /** A box that must be ticked to go on. */\n  check: string;\n  invalidEmail: string;\n  invalidPhone: string;\n  invalidUrl: string;\n  invalidNumber: string;\n  /** A time typed in a shape that is not one. */\n  invalidTime: string;\n  /** A number under its least, or over its most, given formatted. */\n  atLeast: (min: string) => string;\n  atMost: (max: string) => string;\n  /** A day or a time that is not offered. */\n  unavailableDate: string;\n  unavailableTime: string;\n  /** Beside the label of a field that may stay empty. */\n  optional: string;\n  /** In a long list's box while nothing is picked. */\n  pick: string;\n  /** In that box while the person types. */\n  search: string;\n  noResults: string;\n  /** The button that shows or hides a secret as it is typed. */\n  show: string;\n  hide: string;\n  /** A number's steppers, for screen readers. */\n  increase: string;\n  decrease: string;\n  /** A picked tag's remove button, for screen readers. */\n  remove: (label: string) => string;\n  /** A box ticked or not, as an answer reads. */\n  yes: string;\n  no: string;\n  /** A rating, as an answer reads. */\n  rated: (value: number, max: number) => string;\n  /** One star of a rating, for screen readers. */\n  stars: (count: number) => string;\n  /** A choice's last row, to answer in one's own words, and its box while empty. */\n  other: string;\n  otherPlaceholder: string;\n  /** A form's submit when the agent gave it no words. */\n  send: string;\n  /** Where a form's submit was, once it is sent. */\n  sent: string;\n  /** A file field left empty that must be filled. */\n  chooseFile: string;\n  /** A file field's drop zone: what it asks, and how. */\n  upload: (multiple: boolean) => string;\n  drop: string;\n  /**\n   * Under them, what it takes: the kinds (named and joined, \"\" when anything) and the most a\n   * file may weigh, formatted.\n   */\n  limits: (kinds: string, size: string) => string;\n  /** A family of kinds as the limits name it: \"image\" for any image, \"video\", \"audio\", \"text\". */\n  anyOf: (family: string) => string;\n  /** A file on its way, beside how much has gone. */\n  uploading: string;\n  /** A file that was not sent: heavier than the most (formatted), a kind not taken, one too many. */\n  tooBig: (size: string) => string;\n  wrongType: string;\n  tooMany: (max: number) => string;\n  /** A file whose upload failed, and the button that tries it again. */\n  uploadFailed: string;\n  retry: string;\n  /** A form sent while a file is still on its way, or one failed. */\n  stillUploading: string;\n  fixFiles: string;\n  /** A file's chip, opened on a click, for screen readers. */\n  open: (name: string) => string;\n  /** A file whose name is not known yet. */\n  file: string;\n  /** An audio player's button, and its way through, for screen readers. */\n  play: string;\n  pause: string;\n  position: string;\n  /** An automation and its runs: when it runs, how it stands, what each run did. */\n  automation: AutomationMessages;\n  /** An app for the person to connect, as its connection stands. */\n  connect: ConnectMessages;\n}\n\n/** The words of an app's card: its button, and what it says where the button isn't. */\nexport interface ConnectMessages {\n  /** The button that opens the app's consent page, given the app's name. */\n  authorize: (app: string) => string;\n  /** It works. */\n  connected: string;\n  /** It failed, or the account was lost: the agent asks for it again. */\n  failed: string;\n  /** Before the platform has the consent page. */\n  preparing: string;\n}\n\nconst FAMILIES: Readonly<Record<string, string>> = {\n  image: \"images\",\n  video: \"videos\",\n  audio: \"audio\",\n  text: \"text\",\n};\n\nexport const KIT_MESSAGES: KitMessages = {\n  required: \"This field is required\",\n  chooseDate: \"Choose a day\",\n  chooseTime: \"Choose a time\",\n  chooseMoment: \"Choose a day and a time\",\n  chooseOption: \"Choose an option\",\n  other: \"Another answer\",\n  otherPlaceholder: \"Write your answer\",\n  chooseRating: \"Choose a rating\",\n  check: \"Tick the box to go on\",\n  invalidEmail: \"Enter a valid email\",\n  invalidPhone: \"Enter a valid phone number\",\n  invalidUrl: \"Enter a valid address\",\n  invalidNumber: \"Enter a number\",\n  invalidTime: \"Write a time like 9:30\",\n  atLeast: (min) => `At least ${min}`,\n  atMost: (max) => `At most ${max}`,\n  unavailableDate: \"That day is not available\",\n  unavailableTime: \"That time is not available\",\n  optional: \"Optional\",\n  pick: \"Choose…\",\n  search: \"Search…\",\n  noResults: \"No results\",\n  show: \"Show\",\n  hide: \"Hide\",\n  increase: \"Increase\",\n  decrease: \"Decrease\",\n  remove: (label) => `Remove ${label}`,\n  yes: \"Yes\",\n  no: \"No\",\n  rated: (value, max) => `${value} of ${max}`,\n  stars: (count) => (count === 1 ? \"1 star\" : `${count} stars`),\n  send: \"Send\",\n  sent: \"Sent\",\n  chooseFile: \"Add a file\",\n  upload: (multiple) => (multiple ? \"Upload files\" : \"Upload a file\"),\n  drop: \"Drop it here or choose\",\n  limits: (kinds, size) => (kinds ? `${kinds}, up to ${size}` : `Up to ${size}`),\n  anyOf: (family) => FAMILIES[family] ?? family,\n  uploading: \"Uploading\",\n  tooBig: (size) => `Over ${size}`,\n  wrongType: \"This kind of file isn't taken here\",\n  tooMany: (max) => `At most ${max} files`,\n  uploadFailed: \"Couldn't upload it\",\n  retry: \"Retry\",\n  stillUploading: \"Wait for the upload to finish\",\n  fixFiles: \"Remove or retry the files that failed\",\n  open: (name) => `Open ${name}`,\n  file: \"File\",\n  play: \"Play\",\n  pause: \"Pause\",\n  position: \"Position\",\n  automation: AUTOMATION_MESSAGES,\n  connect: {\n    authorize: (app) => `Authorize in ${app}`,\n    connected: \"Connected\",\n    failed: \"It couldn't be connected\",\n    preparing: \"Getting it ready\",\n  },\n};\n"],"mappings":";;AAiHA,MAAM,WAA6C;CACjD,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAEA,MAAa,eAA4B;CACvC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,cAAc;CACd,OAAO;CACP,kBAAkB;CAClB,cAAc;CACd,OAAO;CACP,cAAc;CACd,cAAc;CACd,YAAY;CACZ,eAAe;CACf,aAAa;CACb,UAAU,QAAQ,YAAY;CAC9B,SAAS,QAAQ,WAAW;CAC5B,iBAAiB;CACjB,iBAAiB;CACjB,UAAU;CACV,MAAM;CACN,QAAQ;CACR,WAAW;CACX,MAAM;CACN,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS,UAAU,UAAU;CAC7B,KAAK;CACL,IAAI;CACJ,QAAQ,OAAO,QAAQ,GAAG,MAAM,MAAM;CACtC,QAAQ,UAAW,UAAU,IAAI,WAAW,GAAG,MAAM;CACrD,MAAM;CACN,MAAM;CACN,YAAY;CACZ,SAAS,aAAc,WAAW,iBAAiB;CACnD,MAAM;CACN,SAAS,OAAO,SAAU,QAAQ,GAAG,MAAM,UAAU,SAAS,SAAS;CACvE,QAAQ,WAAW,SAAS,WAAW;CACvC,WAAW;CACX,SAAS,SAAS,QAAQ;CAC1B,WAAW;CACX,UAAU,QAAQ,WAAW,IAAI;CACjC,cAAc;CACd,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,OAAO,SAAS,QAAQ;CACxB,MAAM;CACN,MAAM;CACN,OAAO;CACP,UAAU;CACV,YAAY;CACZ,SAAS;EACP,YAAY,QAAQ,gBAAgB;EACpC,WAAW;EACX,QAAQ;EACR,WAAW;CACb;AACF"}
+{"version":3,"file":"messages.js","names":[],"sources":["../../src/kit/messages.ts"],"sourcesContent":["import type { DayPickerLocale } from \"react-day-picker\";\n\nimport { AUTOMATION_MESSAGES, type AutomationMessages } from \"../automation/messages\";\n\n/**\n * The language the kit's dates are read in: a locale from `@signalcore/ui/locale` (the\n * calendar's, with its words), whose `code` also formats days, times, numbers and lists.\n */\nexport type KitLocale = DayPickerLocale;\n\n/** The words the kit's controls say; a host gives its own, in its language. */\nexport interface KitMessages {\n  /** A field left empty that must be filled. */\n  required: string;\n  /** A day, a time, both, an option, a rating still to pick; also an empty picker's invitation. */\n  chooseDate: string;\n  chooseTime: string;\n  chooseMoment: string;\n  chooseOption: string;\n  chooseRating: string;\n  /** A box that must be ticked to go on. */\n  check: string;\n  invalidEmail: string;\n  invalidPhone: string;\n  invalidUrl: string;\n  invalidNumber: string;\n  /** A time typed in a shape that is not one. */\n  invalidTime: string;\n  /** A number under its least, or over its most, given formatted. */\n  atLeast: (min: string) => string;\n  atMost: (max: string) => string;\n  /** A day or a time that is not offered. */\n  unavailableDate: string;\n  unavailableTime: string;\n  /** Beside the label of a field that may stay empty. */\n  optional: string;\n  /** In a long list's box while nothing is picked. */\n  pick: string;\n  /** In that box while the person types. */\n  search: string;\n  noResults: string;\n  /** The button that shows or hides a secret as it is typed. */\n  show: string;\n  hide: string;\n  /** A number's steppers, for screen readers. */\n  increase: string;\n  decrease: string;\n  /** A picked tag's remove button, for screen readers. */\n  remove: (label: string) => string;\n  /** A box ticked or not, as an answer reads. */\n  yes: string;\n  no: string;\n  /** A rating, as an answer reads. */\n  rated: (value: number, max: number) => string;\n  /** One star of a rating, for screen readers. */\n  stars: (count: number) => string;\n  /** A choice's last row, to answer in one's own words, and its box while empty. */\n  other: string;\n  otherPlaceholder: string;\n  /** A form's submit when the agent gave it no words. */\n  send: string;\n  /** Where a form's submit was, once it is sent. */\n  sent: string;\n  /** A file field left empty that must be filled. */\n  chooseFile: string;\n  /** A file field's drop zone: what it asks, and how. */\n  upload: (multiple: boolean) => string;\n  drop: string;\n  /**\n   * Under them, what it takes: the kinds (named and joined, \"\" when anything) and the most a\n   * file may weigh, formatted.\n   */\n  limits: (kinds: string, size: string) => string;\n  /** A family of kinds as the limits name it: \"image\" for any image, \"video\", \"audio\", \"text\". */\n  anyOf: (family: string) => string;\n  /** A file on its way, beside how much has gone. */\n  uploading: string;\n  /** A file that was not sent: heavier than the most (formatted), a kind not taken, one too many. */\n  tooBig: (size: string) => string;\n  wrongType: string;\n  tooMany: (max: number) => string;\n  /** A file whose upload failed, and the button that tries it again. */\n  uploadFailed: string;\n  retry: string;\n  /** A form sent while a file is still on its way, or one failed. */\n  stillUploading: string;\n  fixFiles: string;\n  /** A file's chip, opened on a click, for screen readers. */\n  open: (name: string) => string;\n  /** A file whose name is not known yet. */\n  file: string;\n  /** An audio player's button, and its way through, for screen readers. */\n  play: string;\n  pause: string;\n  position: string;\n  /** An automation and its runs: when it runs, how it stands, what each run did. */\n  automation: AutomationMessages;\n  /** An app for the person to connect, as its connection stands. */\n  connect: ConnectMessages;\n  /** A calendar's words. */\n  calendar: CalendarMessages;\n  /** A board's words. */\n  board: BoardMessages;\n}\n\n/** What a calendar says besides its events. */\nexport interface CalendarMessages {\n  /** An event that takes the whole day, where its hours would be. */\n  allDay: string;\n  /** A day with nothing on it. */\n  empty: string;\n}\n\n/** What a board says besides its cards. */\nexport interface BoardMessages {\n  /** A card's button that moves it to another column, given the card, for screen readers. */\n  move: (card: string) => string;\n  /** Over the columns it may go to. */\n  moveTo: string;\n  /** A card moved, as the person's answer reads. */\n  moved: (card: string, column: string) => string;\n  /** A column with no cards. */\n  empty: string;\n}\n\n/** The words of an app's card: its button, and what it says where the button isn't. */\nexport interface ConnectMessages {\n  /** The button that opens the app's consent page, given the app's name. */\n  authorize: (app: string) => string;\n  /** It works. */\n  connected: string;\n  /** It failed, or the account was lost: the agent asks for it again. */\n  failed: string;\n  /** Before the platform has the consent page. */\n  preparing: string;\n}\n\nconst FAMILIES: Readonly<Record<string, string>> = {\n  image: \"images\",\n  video: \"videos\",\n  audio: \"audio\",\n  text: \"text\",\n};\n\nexport const KIT_MESSAGES: KitMessages = {\n  required: \"This field is required\",\n  chooseDate: \"Choose a day\",\n  chooseTime: \"Choose a time\",\n  chooseMoment: \"Choose a day and a time\",\n  chooseOption: \"Choose an option\",\n  other: \"Another answer\",\n  otherPlaceholder: \"Write your answer\",\n  chooseRating: \"Choose a rating\",\n  check: \"Tick the box to go on\",\n  invalidEmail: \"Enter a valid email\",\n  invalidPhone: \"Enter a valid phone number\",\n  invalidUrl: \"Enter a valid address\",\n  invalidNumber: \"Enter a number\",\n  invalidTime: \"Write a time like 9:30\",\n  atLeast: (min) => `At least ${min}`,\n  atMost: (max) => `At most ${max}`,\n  unavailableDate: \"That day is not available\",\n  unavailableTime: \"That time is not available\",\n  optional: \"Optional\",\n  pick: \"Choose…\",\n  search: \"Search…\",\n  noResults: \"No results\",\n  show: \"Show\",\n  hide: \"Hide\",\n  increase: \"Increase\",\n  decrease: \"Decrease\",\n  remove: (label) => `Remove ${label}`,\n  yes: \"Yes\",\n  no: \"No\",\n  rated: (value, max) => `${value} of ${max}`,\n  stars: (count) => (count === 1 ? \"1 star\" : `${count} stars`),\n  send: \"Send\",\n  sent: \"Sent\",\n  chooseFile: \"Add a file\",\n  upload: (multiple) => (multiple ? \"Upload files\" : \"Upload a file\"),\n  drop: \"Drop it here or choose\",\n  limits: (kinds, size) => (kinds ? `${kinds}, up to ${size}` : `Up to ${size}`),\n  anyOf: (family) => FAMILIES[family] ?? family,\n  uploading: \"Uploading\",\n  tooBig: (size) => `Over ${size}`,\n  wrongType: \"This kind of file isn't taken here\",\n  tooMany: (max) => `At most ${max} files`,\n  uploadFailed: \"Couldn't upload it\",\n  retry: \"Retry\",\n  stillUploading: \"Wait for the upload to finish\",\n  fixFiles: \"Remove or retry the files that failed\",\n  open: (name) => `Open ${name}`,\n  file: \"File\",\n  play: \"Play\",\n  pause: \"Pause\",\n  position: \"Position\",\n  automation: AUTOMATION_MESSAGES,\n  connect: {\n    authorize: (app) => `Authorize in ${app}`,\n    connected: \"Connected\",\n    failed: \"It couldn't be connected\",\n    preparing: \"Getting it ready\",\n  },\n  calendar: { allDay: \"All day\", empty: \"Nothing planned\" },\n  board: {\n    move: (card) => `Move ${card}`,\n    moveTo: \"Move to\",\n    moved: (card, column) => `${card} to ${column}`,\n    empty: \"Nothing here\",\n  },\n};\n"],"mappings":";;AAyIA,MAAM,WAA6C;CACjD,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAEA,MAAa,eAA4B;CACvC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,cAAc;CACd,OAAO;CACP,kBAAkB;CAClB,cAAc;CACd,OAAO;CACP,cAAc;CACd,cAAc;CACd,YAAY;CACZ,eAAe;CACf,aAAa;CACb,UAAU,QAAQ,YAAY;CAC9B,SAAS,QAAQ,WAAW;CAC5B,iBAAiB;CACjB,iBAAiB;CACjB,UAAU;CACV,MAAM;CACN,QAAQ;CACR,WAAW;CACX,MAAM;CACN,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS,UAAU,UAAU;CAC7B,KAAK;CACL,IAAI;CACJ,QAAQ,OAAO,QAAQ,GAAG,MAAM,MAAM;CACtC,QAAQ,UAAW,UAAU,IAAI,WAAW,GAAG,MAAM;CACrD,MAAM;CACN,MAAM;CACN,YAAY;CACZ,SAAS,aAAc,WAAW,iBAAiB;CACnD,MAAM;CACN,SAAS,OAAO,SAAU,QAAQ,GAAG,MAAM,UAAU,SAAS,SAAS;CACvE,QAAQ,WAAW,SAAS,WAAW;CACvC,WAAW;CACX,SAAS,SAAS,QAAQ;CAC1B,WAAW;CACX,UAAU,QAAQ,WAAW,IAAI;CACjC,cAAc;CACd,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,OAAO,SAAS,QAAQ;CACxB,MAAM;CACN,MAAM;CACN,OAAO;CACP,UAAU;CACV,YAAY;CACZ,SAAS;EACP,YAAY,QAAQ,gBAAgB;EACpC,WAAW;EACX,QAAQ;EACR,WAAW;CACb;CACA,UAAU;EAAE,QAAQ;EAAW,OAAO;CAAkB;CACxD,OAAO;EACL,OAAO,SAAS,QAAQ;EACxB,QAAQ;EACR,QAAQ,MAAM,WAAW,GAAG,KAAK,MAAM;EACvC,OAAO;CACT;AACF"}

package/dist/surface/Placed.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+//#region src/surface/Placed.d.ts
+/** The parts of a surface shown apart from the conversation, by the class each carries. */
+export type PlacedPart = "sc-placed" | "sc-placed--panel" | "sc-placed--modal" | "sc-placed__head" | "sc-placed__title" | "sc-placed__body";
+/**
+ * A surface the agent put apart from the conversation, tied to it all the same: in a `panel` that
+ * stands beside the conversation (over it where there is no room), or in a `modal` over the page,
+ * whose backdrop, Escape or cross close it. Its title heads it; closed, the conversation's line
+ * opens it again.
+ */
+export declare function Placed({ where, title, closeLabel, onClose, classNames, children }: {
+  where: "panel" | "modal";
+  title: string;
+  closeLabel: string;
+  onClose: () => void;
+  classNames: Partial<Record<PlacedPart, string>> | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Placed.d.ts.map

package/dist/surface/Placed.js

@@ -0,0 +1,70 @@
+import { classes } from "../classes.js";
+import { Button } from "../kit/Button.js";
+import { useEffect, useRef } from "react";
+import { XIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/surface/Placed.tsx
+/**
+* A surface the agent put apart from the conversation, tied to it all the same: in a `panel` that
+* stands beside the conversation (over it where there is no room), or in a `modal` over the page,
+* whose backdrop, Escape or cross close it. Its title heads it; closed, the conversation's line
+* opens it again.
+*/
+function Placed({ where, title, closeLabel, onClose, classNames, children }) {
+	const dialog = useRef(null);
+	useEffect(() => {
+		const opened = dialog.current;
+		if (opened === null) return void 0;
+		if (typeof opened.showModal === "function") opened.showModal();
+		else opened.setAttribute("open", "");
+		return () => {
+			if (typeof opened.close === "function") opened.close();
+		};
+	}, []);
+	const head = /* @__PURE__ */ jsxs("header", {
+		className: classes(classNames, "sc-placed__head"),
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: classes(classNames, "sc-placed__title"),
+			children: title
+		}), /* @__PURE__ */ jsx(Button, {
+			tone: "ghost",
+			size: "sm",
+			icon: XIcon,
+			"aria-label": closeLabel,
+			title: closeLabel,
+			onClick: onClose
+		})]
+	});
+	const onKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.stopPropagation();
+		if (where === "panel") onClose();
+	};
+	const body = /* @__PURE__ */ jsx("div", {
+		className: classes(classNames, "sc-placed__body"),
+		children
+	});
+	if (where === "panel") return /* @__PURE__ */ jsxs("aside", {
+		part: "placed panel",
+		"aria-label": title,
+		onKeyDown,
+		className: classes(classNames, "sc-placed", "sc-placed--panel"),
+		children: [head, body]
+	});
+	return /* @__PURE__ */ jsxs("dialog", {
+		ref: dialog,
+		part: "placed modal",
+		"aria-label": title,
+		onKeyDown,
+		onClose,
+		onClick: (event) => {
+			if (event.target === event.currentTarget) onClose();
+		},
+		className: `sc ${classes(classNames, "sc-placed", "sc-placed--modal")}`,
+		children: [head, body]
+	});
+}
+//#endregion
+export { Placed };
+
+//# sourceMappingURL=Placed.js.map

package/dist/surface/Placed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placed.js","names":[],"sources":["../../src/surface/Placed.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode } from \"react\";\n\nimport { classes } from \"../classes\";\nimport { Button } from \"../kit/Button\";\n\n/** The parts of a surface shown apart from the conversation, by the class each carries. */\nexport type PlacedPart =\n  | \"sc-placed\"\n  | \"sc-placed--panel\"\n  | \"sc-placed--modal\"\n  | \"sc-placed__head\"\n  | \"sc-placed__title\"\n  | \"sc-placed__body\";\n\n/**\n * A surface the agent put apart from the conversation, tied to it all the same: in a `panel` that\n * stands beside the conversation (over it where there is no room), or in a `modal` over the page,\n * whose backdrop, Escape or cross close it. Its title heads it; closed, the conversation's line\n * opens it again.\n */\nexport function Placed({\n  where,\n  title,\n  closeLabel,\n  onClose,\n  classNames,\n  children,\n}: {\n  where: \"panel\" | \"modal\";\n  title: string;\n  closeLabel: string;\n  onClose: () => void;\n  classNames: Partial<Record<PlacedPart, string>> | undefined;\n  children: ReactNode;\n}) {\n  const dialog = useRef<HTMLDialogElement>(null);\n  useEffect(() => {\n    const opened = dialog.current;\n    if (opened === null) return undefined;\n    // jsdom has no top layer: a dialog there is only shown.\n    if (typeof opened.showModal === \"function\") opened.showModal();\n    else opened.setAttribute(\"open\", \"\");\n    return () => {\n      if (typeof opened.close === \"function\") opened.close();\n    };\n  }, []);\n  const head = (\n    <header className={classes(classNames, \"sc-placed__head\")}>\n      <h2 className={classes(classNames, \"sc-placed__title\")}>{title}</h2>\n      <Button\n        tone=\"ghost\"\n        size=\"sm\"\n        icon={XIcon}\n        aria-label={closeLabel}\n        title={closeLabel}\n        onClick={onClose}\n      />\n    </header>\n  );\n  // Escape closes this, not the reply the conversation is writing.\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== \"Escape\") return;\n    event.stopPropagation();\n    if (where === \"panel\") onClose();\n  };\n  const body = <div className={classes(classNames, \"sc-placed__body\")}>{children}</div>;\n  if (where === \"panel\") {\n    return (\n      <aside\n        part=\"placed panel\"\n        aria-label={title}\n        onKeyDown={onKeyDown}\n        className={classes(classNames, \"sc-placed\", \"sc-placed--panel\")}\n      >\n        {head}\n        {body}\n      </aside>\n    );\n  }\n  return (\n    <dialog\n      ref={dialog}\n      part=\"placed modal\"\n      aria-label={title}\n      onKeyDown={onKeyDown}\n      onClose={onClose}\n      // A press on the backdrop (the dialog itself, outside its box) closes it.\n      onClick={(event) => {\n        if (event.target === event.currentTarget) onClose();\n      }}\n      className={`sc ${classes(classNames, \"sc-placed\", \"sc-placed--modal\")}`}\n    >\n      {head}\n      {body}\n    </dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAgB,OAAO,EACrB,OACA,OACA,YACA,SACA,YACA,YAQC;CACD,MAAM,SAAS,OAA0B,IAAI;CAC7C,gBAAgB;EACd,MAAM,SAAS,OAAO;EACtB,IAAI,WAAW,MAAM,OAAO,KAAA;EAE5B,IAAI,OAAO,OAAO,cAAc,YAAY,OAAO,UAAU;OACxD,OAAO,aAAa,QAAQ,EAAE;EACnC,aAAa;GACX,IAAI,OAAO,OAAO,UAAU,YAAY,OAAO,MAAM;EACvD;CACF,GAAG,CAAC,CAAC;CACL,MAAM,OACJ,qBAAC,UAAD;EAAQ,WAAW,QAAQ,YAAY,iBAAiB;EAAxD,UAAA,CACE,oBAAC,MAAD;GAAI,WAAW,QAAQ,YAAY,kBAAkB;GAAI,UAAA;EAAU,CAAA,GACnE,oBAAC,QAAD;GACE,MAAK;GACL,MAAK;GACL,MAAM;GACN,cAAY;GACZ,OAAO;GACP,SAAS;EACV,CAAA,CACK;;CAGV,MAAM,aAAa,UAAyB;EAC1C,IAAI,MAAM,QAAQ,UAAU;EAC5B,MAAM,gBAAgB;EACtB,IAAI,UAAU,SAAS,QAAQ;CACjC;CACA,MAAM,OAAO,oBAAC,OAAD;EAAK,WAAW,QAAQ,YAAY,iBAAiB;EAAI;CAAc,CAAA;CACpF,IAAI,UAAU,SACZ,OACE,qBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACD;EACX,WAAW,QAAQ,YAAY,aAAa,kBAAkB;EAJhE,UAAA,CAMG,MACA,IACI;;CAGX,OACE,qBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACL,cAAY;EACD;EACF;EAET,UAAU,UAAU;GAClB,IAAI,MAAM,WAAW,MAAM,eAAe,QAAQ;EACpD;EACA,WAAW,MAAM,QAAQ,YAAY,aAAa,kBAAkB;EAVtE,UAAA,CAYG,MACA,IACK;;AAEZ"}

package/dist/surface/Surface.d.ts

@@ -2,7 +2,7 @@ import { Surface as Surface$1 } from "../blocks.js";
 import { KitLocale, KitMessages } from "../kit/messages.js";
 import { FileHost } from "../kit/uploads.js";
 import { SurfaceAction } from "./values.js";
-import { SurfaceClassNames, SurfaceComponents } from "./scope.js";
+import { HostBlocks, SurfaceClassNames, SurfaceComponents } from "./scope.js";
 //#region src/surface/Surface.d.ts
 export interface SurfaceProps {
   surface: Surface$1;
@@ -12,6 +12,8 @@ export interface SurfaceProps {
   /** What the person already did on it: the option picked, the button pressed, the form sent. */
   answered?: SurfaceAction | undefined;
   components?: SurfaceComponents | undefined;
+  /** The host's own blocks, by the name each was declared with. */
+  blocks?: HostBlocks | undefined;
   classNames?: SurfaceClassNames;
   /** The words its controls say, in the host's language; English by default. */
   messages?: Partial<KitMessages> | undefined;
@@ -30,6 +32,6 @@ export interface SurfaceProps {
  * is half-drawn. Each block's action comes back through `onAction`; the host wraps it with the
  * surface's id.
  */
-export declare function Surface({ surface, onAction, active, answered, components, classNames, messages, locale, files }: SurfaceProps): import("react").JSX.Element;
+export declare function Surface({ surface, onAction, active, answered, components, blocks, classNames, messages, locale, files }: SurfaceProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=Surface.d.ts.map

package/dist/surface/Surface.js

@@ -11,8 +11,11 @@ import { baseName } from "../files.js";
 import { FileMark } from "../kit/FileMark.js";
 import { AudioPlayer } from "../kit/AudioPlayer.js";
 import { Markdown } from "./Markdown.js";
+import { Agenda } from "../kit/Agenda.js";
+import { Kanban } from "../kit/Kanban.js";
 import { Card } from "../kit/Card.js";
 import { Chart } from "../kit/Chart.js";
+import { Timeline } from "../kit/Timeline.js";
 import { ScopeContext, useScope, useSurfaceParts } from "./scope.js";
 import { FIELD_KINDS, answeredIn, chosen, picked, pressed } from "./values.js";
 import { FormView } from "./Form.js";
@@ -37,7 +40,11 @@ const BLOCKS = /* @__PURE__ */ new Set([
 	"connect",
 	"button",
 	"choice",
-	"form"
+	"form",
+	"calendar",
+	"timeline",
+	"board",
+	"host"
 ]);
 /** Whether every block down the tree, and every field of its forms, is one this renderer draws. */
 function known(blocks) {
@@ -62,7 +69,7 @@ function framesItself(surface) {
 * is half-drawn. Each block's action comes back through `onAction`; the host wraps it with the
 * surface's id.
 */
-function Surface({ surface, onAction, active = true, answered, components, classNames, messages, locale, files }) {
+function Surface({ surface, onAction, active = true, answered, components, blocks, classNames, messages, locale, files }) {
 	return /* @__PURE__ */ jsx(KitProvider, {
 		classNames,
 		messages,
@@ -73,6 +80,7 @@ function Surface({ surface, onAction, active = true, answered, components, class
 				answered,
 				onAction,
 				components,
+				blocks,
 				classNames,
 				files
 			},
@@ -159,8 +167,76 @@ function Draw({ block }) {
 		case "button": return /* @__PURE__ */ jsx(Pressable, { block });
 		case "choice": return /* @__PURE__ */ jsx(Choice, { block });
 		case "form": return /* @__PURE__ */ jsx(FormView, { block });
+		case "calendar": return /* @__PURE__ */ jsx(CalendarShown, { block });
+		case "timeline": return /* @__PURE__ */ jsx(Timeline, { items: block.items });
+		case "board": return /* @__PURE__ */ jsx(BoardShown, { block });
+		case "host": return /* @__PURE__ */ jsx(Hosted, { block });
 	}
 }
+/** A calendar; with its action, pressing an event sends it (`{event}`). */
+function CalendarShown({ block }) {
+	const { active, onAction } = useScope();
+	const { action } = block;
+	return /* @__PURE__ */ jsx(Agenda, {
+		span: block.span,
+		start: block.start,
+		events: block.events,
+		disabled: !active,
+		onEvent: action === void 0 ? void 0 : (event) => {
+			onAction({
+				name: action,
+				data: { event: event.id },
+				label: event.title
+			});
+		}
+	});
+}
+/** A board; with its action, a card moved to another column sends it (`{card, column}`). */
+function BoardShown({ block }) {
+	const { active, onAction } = useScope();
+	const { messages } = useKit();
+	const { action } = block;
+	return /* @__PURE__ */ jsx(Kanban, {
+		columns: block.columns,
+		disabled: !active,
+		onMove: action === void 0 ? void 0 : (card, column) => {
+			onAction({
+				name: action,
+				data: {
+					card: card.id,
+					column: column.id
+				},
+				label: messages.board.moved(card.title, column.title)
+			});
+		}
+	});
+}
+/**
+* One of the host's own blocks, drawn by the component it registered under the block's name; a
+* name it gave none for, or a component that fails as it draws, leaves the block's words in a
+* quiet card in its place, and the rest of the surface draws.
+*/
+function Hosted({ block }) {
+	const { blocks, active, onAction } = useScope();
+	const part = useSurfaceParts();
+	const twin = /* @__PURE__ */ jsx("div", {
+		part: "host",
+		className: part("sc-surface__host"),
+		"data-block": block.name,
+		children: /* @__PURE__ */ jsx(Markdown, { text: block.text })
+	});
+	const Own = blocks?.[block.name];
+	if (Own === void 0) return twin;
+	return /* @__PURE__ */ jsx(Whole, {
+		twin,
+		children: /* @__PURE__ */ jsx(Own, {
+			props: block.props,
+			text: block.text,
+			active,
+			onAction
+		})
+	});
+}
 /**
 * A file the agent put in front of the person, compact: its kind's mark, its title (its name
 * under it when the title is another), its size at the right; pressed, it opens whole in the