@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/stack/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./stack.ts";
+
 export type { Space, ViewConfig } from "./stack.ts";

package/src/stack/stack.ts

@@ -1,25 +1,21 @@
 import { Match, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// SPACE
-
 /** `S`: things in one line (8px). `M`: the parts of one body (14px). `L`: whole surfaces,
  *  panel to panel (24px). */
 export const Space = Schema.Literals(["S", "M", "L"]);
+
 export type Space = typeof Space.Type;
 
-/** The class that sets a layout's gap. */
 const gapClassName = (gap: Space): string =>
   Match.value(gap).pipe(
     Match.withReturnType<string>(),
     Match.when("S", () => "gap-s"),
     Match.when("M", () => "gap-m"),
     Match.when("L", () => "gap-l"),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-// VIEW
-
 /** Configuration for rendering a stack with `view`. */
 export type ViewConfig = Readonly<{
   body: ReadonlyArray<Html | string>;
@@ -30,7 +26,10 @@ export type ViewConfig = Readonly<{
 /** A column of components a gap apart; each takes the column's width. Space only: no paper,
  *  border or shadow. Put buttons and chips in a Group or a Wrap inside it, so they keep their
  *  own width. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, gap = "M" } = config;
 
   return h.div([h.Class(`stack ${gapClassName(gap)}`)], body);

package/src/stage/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./stage.ts";
+
 export type { ViewConfig } from "./stage.ts";

package/src/stage/stage.ts

@@ -2,14 +2,12 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a stage with `view`. */
 export type ViewConfig = Readonly<{
   /** The canvas, filling the stage. */
   body: ReadonlyArray<Html | string>;
   /** A floating Toolbar at the left edge (along the bottom on a phone). */
-  tools?: ReadonlyArray<Html>;
+  tools?: readonly Html[];
   /** Along the top edge: the connection, a notice, a count. */
   bar?: ReadonlyArray<Html | string>;
   /** Editing is paused: a Notice that says why (the link dropped, the page is read-only). The
@@ -21,24 +19,30 @@ export type ViewConfig = Readonly<{
  *  landmark (`<main id="main">`). It does not scroll; what is on it pans. While paused, the
  *  work is inert and the reason is on the veil, inside a status (`role="status"`) that stays
  *  in place while the veil comes and goes, so a screen reader hears it. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, tools = [], bar = [], paused } = config;
 
   return h.main(
     [h.Id("main"), h.Class("stage")],
     [
       h.div(
-        [h.Class("stage-work"), ...(paused === undefined ? [] : [h.Inert(true)])],
+        [
+          h.Class("stage-work"),
+          ...(paused === undefined ? [] : [h.Inert(true)]),
+        ],
         [
           h.div([h.Class("stage-canvas")], body),
           ...slotView("div", "stage-tools", tools, h),
           ...slotView("div", "stage-bar", bar, h),
-        ],
+        ]
       ),
       h.div(
         [h.Role("status")],
-        paused === undefined ? [] : [h.div([h.Class("stage-paused")], paused)],
+        paused === undefined ? [] : [h.div([h.Class("stage-paused")], paused)]
       ),
-    ],
+    ]
   );
 };

package/src/stat/index.ts

@@ -1,2 +1,3 @@
 export { listView } from "./stat.ts";
+
 export type { ListViewConfig, StatConfig, Tone } from "./stat.ts";

package/src/stat/stat.ts

@@ -1,16 +1,15 @@
 import { Array, Match, Option, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { LOCALE } from "../locale/locale.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
+import { LOCALE } from "../locale/locale.ts";
 import { slotView } from "../slot/slot.ts";
 
-// STAT
-
 /** Only when a change is a warning in itself: `Warn` fills it amber, `Error` prints it red. Up
  *  is not good and down is not bad until the product says so. */
 export const Tone = Schema.Literals(["Warn", "Error"]);
+
 export type Tone = typeof Tone.Type;
 
 /** One stat in a `listView`. */
@@ -35,11 +34,17 @@ export type StatConfig = Readonly<{
   note?: ReadonlyArray<Html | string>;
 }>;
 
-const valueView = <Message>(config: StatConfig, h: HtmlBuilder<Message>): Html => {
+const valueView = <Message>(
+  config: StatConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   if (config.isLoading === true) {
     return h.dd(
       [h.Class("stat-value"), h.AriaBusy(true)],
-      [h.span([h.Class("sr-only")], ["loading"]), h.span([h.Class("cursor"), h.AriaHidden(true)])],
+      [
+        h.span([h.Class("sr-only")], ["loading"]),
+        h.span([h.Class("cursor"), h.AriaHidden(true)]),
+      ]
     );
   }
 
@@ -47,15 +52,20 @@ const valueView = <Message>(config: StatConfig, h: HtmlBuilder<Message>): Html =
     onNone: () =>
       h.dd(
         [h.Class("stat-value unknown")],
-        [h.span([h.AriaHidden(true)], ["—"]), h.span([h.Class("sr-only")], ["not known"])],
+        [
+          h.span([h.AriaHidden(true)], ["—"]),
+          h.span([h.Class("sr-only")], ["not known"]),
+        ]
       ),
     onSome: (value) =>
       h.dd(
         [h.Class("stat-value")],
         [
           value.toLocaleString(LOCALE),
-          ...(config.unit === undefined ? [] : [h.span([h.Class("stat-unit")], [config.unit])]),
-        ],
+          ...(config.unit === undefined
+            ? []
+            : [h.span([h.Class("stat-unit")], [config.unit])]),
+        ]
       ),
   });
 };
@@ -69,24 +79,32 @@ const direction = (delta: number): Direction =>
     Match.withReturnType<Direction>(),
     Match.when(1, () => ({ glyph: "arrow-up", said: "up" })),
     Match.when(-1, () => ({ glyph: "arrow-down", said: "down" })),
-    Match.orElse(() => ({ glyph: "minus", said: "no change," })),
+    Match.orElse(() => ({ glyph: "minus", said: "no change," }))
   );
 
-const deltaView = <Message>(config: StatConfig, delta: number, h: HtmlBuilder<Message>): Html => {
+const deltaView = <Message>(
+  config: StatConfig,
+  delta: number,
+  h: HtmlBuilder<Message>
+): Html => {
   const { glyph, said } = direction(delta);
 
   return h.dd(
-    [h.Class(config.tone === undefined ? "stat-delta" : `stat-delta ${DELTA_TONE[config.tone]}`)],
+    [
+      h.Class(
+        config.tone === undefined
+          ? "stat-delta"
+          : `stat-delta ${DELTA_TONE[config.tone]}`
+      ),
+    ],
     [
       Glyph.view({ name: glyph }, h),
       h.span([h.Class("sr-only")], [said]),
       `${Math.abs(delta).toLocaleString(LOCALE)}${config.deltaUnit ?? ""}`,
-    ],
+    ]
   );
 };
 
-// one figure in a row of stats: its label as the term, then the value in the pixel face at
-// 30px (22px at 900px and under) with tabular figures, an optional change and a note
 const statView = <Message>(config: StatConfig, h: HtmlBuilder<Message>): Html =>
   h.keyed("div")(
     config.label,
@@ -98,20 +116,21 @@ const statView = <Message>(config: StatConfig, h: HtmlBuilder<Message>): Html =>
         ? []
         : [deltaView(config, config.delta, h)]),
       ...slotView("dd", "stat-note", config.note ?? [], h),
-    ],
+    ]
   );
 
-// STATS
-
 /** Configuration for rendering a row of stats with `listView`. */
 export type ListViewConfig = Readonly<{
-  stats: ReadonlyArray<StatConfig>;
+  stats: readonly StatConfig[];
 }>;
 
 /** A row of figures in ruled cells, four across (two on a phone), edge to edge in a flush panel that names what they
  *  measure. A description list: each stat is a term and its value. */
-export const listView = <Message>(config: ListViewConfig, h: HtmlBuilder<Message>): Html =>
+export const listView = <Message>(
+  config: ListViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.dl(
     [h.Class("stats")],
-    Array.map(config.stats, (stat) => statView(stat, h)),
+    Array.map(config.stats, (stat) => statView(stat, h))
   );

package/src/status-bar/index.ts

@@ -0,0 +1,5 @@
+export { MeasureHeight, Message } from "../top-bar/bar-height.ts";
+
+export { view } from "./status-bar.ts";
+
+export type { KeyNote, ViewConfig } from "./status-bar.ts";

package/src/{statusBar/statusBar.ts → status-bar/status-bar.ts}

@@ -2,11 +2,11 @@ import { Array, Predicate } from "effect";
 import type { KeySequence } from "foldkit/dom";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { type KeyPlatform, keyLabel } from "../keyHint/keyLabel.ts";
+import { keyLabel } from "../key-hint/key-label.ts";
+import type { KeyPlatform } from "../key-hint/key-label.ts";
 import { slotView } from "../slot/slot.ts";
-import { type Message as BarHeightMessage, measureAttributes } from "../topBar/barHeight.ts";
-
-// VIEW
+import { measureAttributes } from "../top-bar/bar-height.ts";
+import type { Message as BarHeightMessage } from "../top-bar/bar-height.ts";
 
 /** A key worth knowing and what it does, as the key help prints it. */
 export type KeyNote = Readonly<{ keys: KeySequence; does: string }>;
@@ -17,7 +17,7 @@ export type ViewConfig<Message> = Readonly<{
   body: ReadonlyArray<Html | string>;
   /** Keys worth knowing, at the right, printed and not pressable. Narrow, they wrap under the
    *  state. */
-  keys?: ReadonlyArray<KeyNote>;
+  keys?: readonly KeyNote[];
   platform: KeyPlatform;
   /** Lifts the bar's lifecycle Message (`MeasureHeight` started: the page keeps
    *  `--statusbar-h` at the bar's height however it wraps, so the page, the rail, a banner and
@@ -27,7 +27,6 @@ export type ViewConfig<Message> = Readonly<{
   toParentMessage: (message: BarHeightMessage) => Message;
 }>;
 
-// a key note is keyed by its binding, which stays the same on every platform
 const bindingKey = (keys: KeySequence): string =>
   Predicate.isString(keys) ? keys : Array.join(keys, " ");
 
@@ -37,13 +36,16 @@ const keyNoteView =
     h.keyed("span")(
       bindingKey(keys),
       [],
-      [h.kbd([h.Class("key-hint")], [keyLabel(keys, platform)]), ` ${does}`],
+      [h.kbd([h.Class("key-hint")], [keyLabel(keys, platform)]), ` ${does}`]
     );
 
 /** The quiet line along the bottom of an interface: what state it is in, and the keys to
  *  know. One per page, after the rail and the deck and outside `main`, where it is the page's
  *  footer (`<footer>`, the contentinfo landmark). Its keys are content, so each `kbd` is read. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, keys = [], platform, toParentMessage } = config;
 
   return h.footer(
@@ -51,13 +53,18 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       ...measureAttributes(
         toParentMessage,
         { selector: ".statusbar", property: "--statusbar-h" },
-        h,
+        h
       ),
       h.Class("statusbar"),
     ],
     [
       h.div([h.Class("statusbar-state")], body),
-      ...slotView("p", "statusbar-keys", Array.map(keys, keyNoteView(platform, h)), h),
-    ],
+      ...slotView(
+        "p",
+        "statusbar-keys",
+        Array.map(keys, keyNoteView(platform, h)),
+        h
+      ),
+    ]
   );
 };

package/src/subscription/{prefixKeys.ts → prefix-keys.ts}

@@ -1,8 +1,9 @@
 import { Array, String } from "effect";
 
-/** A Subscriptions record with every key behind `Prefix`: `pointer` becomes `${Prefix}Pointer`. */
 type PrefixedKeys<Prefix extends string, Entries> = {
-  readonly [Key in keyof Entries as `${Prefix}${Capitalize<Key & string>}`]: Entries[Key];
+  readonly [
+    Key in keyof Entries as `${Prefix}${Capitalize<Key & string>}`
+  ]: Entries[Key];
 };
 
 /**
@@ -17,13 +18,11 @@ export const prefixKeys = <
   Entries extends Readonly<Record<string, unknown>>,
 >(
   prefix: Prefix,
-  entries: Entries,
+  entries: Entries
 ): PrefixedKeys<Prefix, Entries> =>
-  // NOTE: TypeScript does not infer template-literal keys built at runtime, so the record's
-  // type is stated here, once, for every component that prefixes its keys.
   Object.fromEntries(
     Array.map(Object.entries(entries), ([key, entry]) => [
       `${prefix}${String.capitalize(key)}`,
       entry,
-    ]),
+    ])
   ) as PrefixedKeys<Prefix, Entries>;

package/src/table/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./table.ts";
+
 export type { Column, ViewConfig } from "./table.ts";

package/src/table/table.ts

@@ -1,8 +1,6 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** One column of a table. */
 export type Column<Row> = Readonly<{
   /** Unique among the columns. */
@@ -20,7 +18,7 @@ export type ViewConfig<Row> = Readonly<{
   /** Names the table's scrolling region for screen readers. */
   label: string;
   columns: ReadonlyArray<Column<Row>>;
-  rows: ReadonlyArray<Row>;
+  rows: readonly Row[];
   /** The row's stable id. */
   rowKey: (row: Row) => string;
   /** The row's buttons, in a last column pinned right while the table scrolls under it. Its
@@ -30,13 +28,18 @@ export type ViewConfig<Row> = Readonly<{
   isOff?: (row: Row) => boolean;
 }>;
 
-const numericClass = <Message>(isNumeric: boolean | undefined, h: HtmlBuilder<Message>) =>
-  isNumeric === true ? [h.Class("num")] : [];
+const numericClass = <Message>(
+  isNumeric: boolean | undefined,
+  h: HtmlBuilder<Message>
+) => (isNumeric === true ? [h.Class("num")] : []);
 
 /** A ruled table: head-tinted pixel-caps heads, 1px rules, and a tint under the row the
  *  pointer is on. Every head is a column header (`scope="col"`); on a phone each row becomes a
  *  block of lines, each labelled with its head. It scrolls sideways inside its wrapper. */
-export const view = <Row, Message>(config: ViewConfig<Row>, h: HtmlBuilder<Message>): Html => {
+export const view = <Row, Message>(
+  config: ViewConfig<Row>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, columns, rows, rowKey, actions, isOff } = config;
 
   const headView = h.thead(
@@ -49,33 +52,55 @@ export const view = <Row, Message>(config: ViewConfig<Row>, h: HtmlBuilder<Messa
             h.keyed("th")(
               column.key,
               [...numericClass(column.isNumeric, h), h.Scope("col")],
-              [column.header],
-            ),
+              [column.header]
+            )
           ),
           ...(actions === undefined
             ? []
-            : [h.th([h.Scope("col")], [h.span([h.Class("sr-only")], ["Actions"])])]),
-        ],
+            : [
+                h.th(
+                  [h.Scope("col")],
+                  [h.span([h.Class("sr-only")], ["Actions"])]
+                ),
+              ]),
+        ]
       ),
-    ],
+    ]
   );
 
   const rowView = (row: Row): Html =>
-    h.keyed("tr")(rowKey(row), isOff !== undefined && isOff(row) ? [h.Class("off")] : [], [
-      ...Array.map(columns, (column) =>
-        h.keyed("td")(
-          column.key,
-          [...numericClass(column.isNumeric, h), h.DataAttribute("label", column.header)],
-          column.cell(row),
+    h.keyed("tr")(
+      rowKey(row),
+      isOff !== undefined && isOff(row) ? [h.Class("off")] : [],
+      [
+        ...Array.map(columns, (column) =>
+          h.keyed("td")(
+            column.key,
+            [
+              ...numericClass(column.isNumeric, h),
+              h.DataAttribute("label", column.header),
+            ],
+            column.cell(row)
+          )
         ),
-      ),
-      ...(actions === undefined ? [] : [h.td([h.Class("acts")], actions(row))]),
-    ]);
+        ...(actions === undefined
+          ? []
+          : [h.td([h.Class("acts")], actions(row))]),
+      ]
+    );
 
-  // NOTE: the box scrolls sideways on a narrow screen, so it is a named region in the tab
-  // order, and a keyboard reader can scroll it.
   return h.div(
-    [h.Role("region"), h.AriaLabel(label), h.Tabindex(0), h.Class("table-wrap")],
-    [h.table([h.Class("table")], [headView, h.tbody([], Array.map(rows, rowView))])],
+    [
+      h.Role("region"),
+      h.AriaLabel(label),
+      h.Tabindex(0),
+      h.Class("table-wrap"),
+    ],
+    [
+      h.table(
+        [h.Class("table")],
+        [headView, h.tbody([], Array.map(rows, rowView))]
+      ),
+    ]
   );
 };

package/src/tabs/index.ts

@@ -1,2 +1,3 @@
 export { Message, Model, OutMessage, id, init, update, view } from "./tabs.ts";
+
 export type { InitConfig, Tab, ViewInputs } from "./tabs.ts";

package/src/tabs/tabs.ts

@@ -6,35 +6,30 @@ import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
 import * as Update from "foldkit/update";
 
-import { countView } from "../navStrip/navStrip.ts";
-
-// MODEL
+import { countView } from "../nav-strip/nav-strip.ts";
 
 /** Schema for a tab strip: the `@foldkit/ui` Tabs it is built on, which keeps where the
  *  keyboard is. Which tab is selected is the parent's: pass it in as `selectedValue`. */
 export const Model = Schema.Struct({
   tabs: UiTabs.Model,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a tab strip can produce. */
 export const Message = defineMessageUnion({
   GotTabsMessage: { message: UiTabs.Message },
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a tab strip reports: a tab was chosen by a press, an arrow, Home or
  *  End. Store `value` and pass it back in as `selectedValue`. */
 export const OutMessage = defineMessageUnion({
   Selected: { value: Schema.String },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a tab strip with `init`. The `id` must be unique in the
  *  document; each tab's and panel's id derives from it. */
@@ -45,20 +40,18 @@ export const init = (config: InitConfig): Model => ({
   tabs: UiTabs.init({ id: config.id, activationMode: "Automatic" }),
 });
 
-// ACCESSORS
-
 /** The tab strip's id, unique in the document. */
 export const id = (model: Model): string => model.tabs.id;
 
-// UPDATE
-
 const StringTabs = UiTabs.create();
 
 const foldTabs = Update.foldChild({
   update: StringTabs.update,
   read: (model: Model) => Option.some(model.tabs),
-  write: (model: Model, nextTabs: UiTabs.Model) => modifyFields(model, { tabs: () => nextTabs }),
-  toParentMessage: (message: UiTabs.Message) => Message.GotTabsMessage({ message }),
+  write: (model: Model, nextTabs: UiTabs.Model) =>
+    modifyFields(model, { tabs: () => nextTabs }),
+  toParentMessage: (message: UiTabs.Message) =>
+    Message.GotTabsMessage({ message }),
   toParentOutMessage: UiTabs.OutMessage.match<OutMessage>({
     Selected: ({ value }) => OutMessage.Selected({ value }),
   }),
@@ -66,11 +59,13 @@ const foldTabs = Update.foldChild({
 
 /** Processes a tab strip Message and returns the next Model, Commands and OutMessage. */
 export const update = (model: Model, message: Message) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotTabsMessage: ({ message: tabsMessage }) => foldTabs(model, tabsMessage),
-  });
-
-// VIEW
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      GotTabsMessage: ({ message: tabsMessage }) =>
+        foldTabs(model, tabsMessage),
+    }
+  );
 
 /** One tab: its value, its words and an optional count printed after them. */
 export type Tab = Readonly<{
@@ -83,13 +78,13 @@ export type Tab = Readonly<{
 export type ViewInputs = Readonly<{
   /** Names the tab list for screen readers. */
   label: string;
-  tabs: ReadonlyArray<Tab>;
+  tabs: readonly Tab[];
   /** The selected tab's value, from the parent's Model. */
   selectedValue: string;
   /** The selected tab's panel. A function because a Submodel's viewInputs may hold functions
    *  only at the top level, and Foldkit runs this one in the parent's boundary, so the
    *  handlers in what it returns dispatch the parent's Messages. */
-  toPanelView: () => ReadonlyArray<Html>;
+  toPanelView: () => readonly Html[];
 }>;
 
 /**
@@ -98,42 +93,45 @@ export type ViewInputs = Readonly<{
  * `div[role="tabpanel"]` named by its tab. Arrows move and select (they wrap), Home and End
  * go to the ends, and only the selected tab is in the keyboard's Tab order.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, tabs, selectedValue, toPanelView } = viewInputs;
-
-  const toTabView = (tab: Tab, info: UiTabs.TabInfo): Html =>
-    h.keyed("button")(tab.value, info.tab, [
-      tab.label,
-      ...(tab.count === undefined ? [] : countView(tab.count, h)),
-    ]);
-
-  const toView = (render: UiTabs.RenderInfo): Html =>
-    h.div(
-      [h.Class("tabbed")],
-      [
-        h.div(
-          [...render.tablist, h.Class("nav tabs")],
-          Array.zipWith(tabs, render.tabs, toTabView),
-        ),
-        ...Option.toArray(
-          Option.map(
-            Array.findFirst(render.tabs, (info) => info.isActive),
-            (info) => h.div([...info.panel, h.Class("tab-panel")], toPanelView()),
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { label, tabs, selectedValue, toPanelView } = viewInputs;
+
+    const toTabView = (tab: Tab, info: UiTabs.TabInfo): Html =>
+      h.keyed("button")(tab.value, info.tab, [
+        tab.label,
+        ...(tab.count === undefined ? [] : countView(tab.count, h)),
+      ]);
+
+    const toView = (render: UiTabs.RenderInfo): Html =>
+      h.div(
+        [h.Class("tabbed")],
+        [
+          h.div(
+            [...render.tablist, h.Class("nav tabs")],
+            Array.zipWith(tabs, render.tabs, toTabView)
           ),
-        ),
-      ],
-    );
-
-  return h.submodel({
-    slotId: id(model),
-    model: model.tabs,
-    view: StringTabs.view,
-    viewInputs: {
-      tabs: Array.map(tabs, (tab) => tab.value),
-      selectedValue,
-      ariaLabel: label,
-      toView,
-    },
-    toParentMessage: (message) => Message.GotTabsMessage({ message }),
-  });
-});
+          ...Option.toArray(
+            Option.map(
+              Array.findFirst(render.tabs, (info) => info.isActive),
+              (info) =>
+                h.div([...info.panel, h.Class("tab-panel")], toPanelView())
+            )
+          ),
+        ]
+      );
+
+    return h.submodel({
+      slotId: id(model),
+      model: model.tabs,
+      view: StringTabs.view,
+      viewInputs: {
+        tabs: Array.map(tabs, (tab) => tab.value),
+        selectedValue,
+        ariaLabel: label,
+        toView,
+      },
+      toParentMessage: (message) => Message.GotTabsMessage({ message }),
+    });
+  }
+);

package/src/tag/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./tag.ts";
+
 export type { ViewConfig } from "./tag.ts";