@uiresponse/renderer-react 0.1.0

package/src/blocks/data.jsx

@@ -0,0 +1,551 @@
+/**
+ * The data-heavy leaves: `table`, `list`, `detail`, `timeline`.
+ *
+ * All four bind ROWS and name columns of that one dataset — the v1 invariant that makes every
+ * field-ref resolvable (`x-uir-field-ref`). Actions inside them carry `scope: "row"` bindings, which
+ * resolve against the row the user actually clicked, never against the dataset (DECISIONS R7).
+ */
+import React, { useEffect, useMemo, useState } from "react";
+import { useUIResponse, scopeFor } from "./context.js";
+import { Value, ActionButton, BlurImage, InitialsChip, numericish } from "./primitives.jsx";
+import { formatValue } from "../core/format.js";
+import { resolveBinding, resolveValue, boundColumn, UIResponseResolveError } from "../core/value.js";
+import { runWithConfirm } from "../core/actions.js";
+import { statusTone, isHttpUrl, isImageSrc, linkText, splitRecordFields, imageColumn, thumbColumn, defaultColumnSpecs, posterMode, staggerIndex } from "../core/record.js";
+import { BlockError } from "./primitives.jsx";
+import { paginateRows, timelineLayout } from "../core/presentation.js";
+
+/** Every column the dataset declared, in declared order — what `columns`/`fields` mean when omitted. */
+const allColumns = defaultColumnSpecs;
+
+/**
+ * "This opens something." The design sheet gives a row action exactly one mark: a small chevron at
+ * the trailing edge, in the faint ink. Not a button — the row is the button — and not a colour
+ * change, which a status column has already spent.
+ */
+const Chevron = () => (
+  <svg className="uir-chevron" width="7" height="11" viewBox="0 0 7 11" aria-hidden="true" focusable="false">
+    <polyline points="1.5,1.5 5.5,5.5 1.5,9.5" fill="none" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+/**
+ * ARRIVAL, ROW BY ROW.
+ *
+ * A block used to appear whole: skeleton, then a finished table, stamped. The blocks were streaming
+ * and the datasets were resolving independently, and none of that was visible — so a page that was
+ * plainly working looked like a page that had frozen and then blinked.
+ *
+ * The stagger is the block's own `uir-fold` motion, applied per row with a small offset. It is CSS:
+ * one custom property per row, and `@media (prefers-reduced-motion: reduce)` turns the whole thing
+ * off. The cap matters — a 200-row table must not take seven seconds to finish arriving, and past
+ * about a dozen rows the eye has stopped reading them as individuals anyway.
+ */
+const staggerVar = (i) => ({ "--uir-i": staggerIndex(i) });
+
+const columnDecl = (columns, field) => columns.find((c) => c.name === field);
+
+/**
+ * `column.label` "Defaults to a title-cased `name`" (data.schema.json). That default is the
+ * renderer's to apply, and applying it is the difference between a column headed "Waiting on" and
+ * one headed `WAITING_ON`, which is a database talking to itself in front of a label manager.
+ */
+const titleCase = (name) => name.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
+const headingFor = (spec, col) => spec.label ?? col?.label ?? (col?.name ? titleCase(col.name) : titleCase(spec.field));
+
+function useRowsBinding(block, prop) {
+  const uir = useUIResponse();
+  const bind = block[prop]?.$bind;
+  const ds = bind ? uir.dataset(bind.dataset) : null;
+  return { uir, bind, rows: ds?.rows ?? [], columns: ds?.columns ?? [] };
+}
+
+/** An action attached to a repeating element, run in that row's scope. */
+function useRowRunner(uir) {
+  return (action, row) => runWithConfirm(action, { ...uir.actionCtx, scope: scopeFor(uir, row) });
+}
+
+// ───────────────────────────────────────────────────────────────────────────────
+// table — the working list
+// ───────────────────────────────────────────────────────────────────────────────
+export function TableBlock({ block }) {
+  const { uir, rows, columns } = useRowsBinding(block, "rows");
+  const runRow = useRowRunner(uir);
+  const specs = block.columns ?? allColumns(columns);
+  const rowActions = block.row_actions ?? [];
+  const clickable = Boolean(block.row_action);
+  const [density, setDensity] = useState(uir.density ?? "comfortable");
+  const [page, setPage] = useState(0);
+  // A thumbnail is an image too, and it arrives the same way: blurred proxy first, if the dataset
+  // declared one alongside its image column.
+  const thumbCol = thumbColumn(columns, imageColumn(columns));
+  const imageCol = imageColumn(columns);
+  const nameSpec = !imageCol ? specs.find((spec) => columnDecl(columns, spec.field)?.role === "name") : null;
+  const paged = paginateRows(rows, page);
+  useEffect(() => { if (paged.page !== page) setPage(paged.page); }, [page, paged.page]);
+
+  return (
+    <>
+      {/* The design's table tile carries its own title above the column heads. `title` is an
+          envelope key every block already has; nothing else in the vocabulary changes. */}
+      <div className="uir-table__head">
+        {block.title && <h3 className="uir-table__title">{block.title}</h3>}
+        <div className="uir-density" role="group" aria-label="Table density">
+          {[["comfortable", "Comfortable"], ["compact", "Compact"]].map(([value, label]) => (
+            <button key={value} type="button" aria-pressed={density === value} onClick={() => setDensity(value)}>{label}</button>
+          ))}
+        </div>
+      </div>
+      <div className="uir-table-wrap">
+      <div className="uir-table__scroll">
+        <table className="uir-table" data-density={density}>
+          <thead>
+            <tr>
+              {specs.map((spec) => {
+                const col = columnDecl(columns, spec.field);
+                return (
+                  <th key={spec.field} data-numeric={numericish(spec.format, col) || undefined} scope="col">
+                    {headingFor(spec, col)}
+                  </th>
+                );
+              })}
+              {rowActions.length > 0 && <th className="uir-table__actions-cell" scope="col" aria-label="Row actions" />}
+            </tr>
+          </thead>
+          <tbody>
+            {paged.items.map((row, i) => (
+              <tr
+                key={i}
+                style={staggerVar(i)}
+                data-clickable={clickable || undefined}
+                tabIndex={clickable ? 0 : undefined}
+                role={clickable ? "button" : undefined}
+                // A clickable row takes focus when it is clicked. Browsers focus buttons and links on
+                // click, and nothing else — so without this a row activated by mouse leaves focus on
+                // `document.body`, and an overlay opened from it has nowhere to send focus back to.
+                // The row already carries `tabIndex` and `role="button"`; this makes it behave like one.
+                onClick={clickable ? (e) => { e.currentTarget.focus(); runRow(block.row_action, row); } : undefined}
+                onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); runRow(block.row_action, row); } } : undefined}
+              >
+                {specs.map((spec) => {
+                  const col = columnDecl(columns, spec.field);
+                  return (
+                    <td key={spec.field} data-numeric={numericish(spec.format, col) || undefined}>
+                      {nameSpec === spec ? (
+                        <span className="uir-name-cell">
+                          <InitialsChip value={row[spec.field]} />
+                          <Value
+                            value={row[spec.field]}
+                            format={spec.format}
+                            empty={spec.empty}
+                            column={col}
+                            now={uir.now}
+                            spec={spec}
+                          />
+                        </span>
+                      ) : (
+                        <Value
+                          value={row[spec.field]}
+                          format={spec.format}
+                          empty={spec.empty}
+                          column={col}
+                          now={uir.now}
+                          thumb={col?.role === "image" && thumbCol ? row[thumbCol.name] : undefined}
+                          spec={spec}
+                        />
+                      )}
+                    </td>
+                  );
+                })}
+                {rowActions.length > 0 && (
+                  <td className="uir-table__actions-cell">
+                    <div className="uir-table__actions">
+                      {rowActions.map((action, k) => (
+                        <ActionButton
+                          key={k}
+                          action={action}
+                          small
+                          ctx={{ ...uir.actionCtx, scope: scopeFor(uir, row) }}
+                          fallbackLabel={action.type}
+                        />
+                      ))}
+                    </div>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {paged.count > 0 && (
+        <div className="uir-pagination">
+          <span>{paged.start}–{paged.end} of {paged.count}</span>
+          <div>
+            <button type="button" aria-label="Previous page" disabled={paged.page === 0} onClick={() => setPage((value) => value - 1)}>‹</button>
+            <button type="button" aria-label="Next page" disabled={paged.page >= paged.pageCount - 1} onClick={() => setPage((value) => value + 1)}>›</button>
+          </div>
+        </div>
+      )}
+      </div>
+    </>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────────
+// list — rows where the row is a thing, not a record
+// ───────────────────────────────────────────────────────────────────────────────
+/**
+ * THE SLEEVE.
+ *
+ * The prompt has always told the model that a list "pairs with photos", and the schema has always let
+ * a dataset declare a `role: image` column. A `table` drew that column as a thumbnail. A `list` drew
+ * nothing at all — it rendered a title and a subtitle and dropped the picture on the floor. Every
+ * "show me the releases" answer was therefore a column of text about records nobody could see.
+ *
+ * So when the bound dataset declares an image column, a list draws POSTERS: the art at full width of
+ * its card, the name under it, and `subtitle_field` as one quiet caption line. There is no card
+ * chrome — no border, no tile, no shadow. Framing a picture is what makes a page look like a
+ * dashboard; a magazine puts the picture on the paper. The only chrome is a hairline ring INSIDE the
+ * art's edge, so that a cover on a white ground does not dissolve into the page. That is a real
+ * problem sleeves have, not a decoration.
+ *
+ * ARRANGEMENT IS THE RENDERER'S (R5 deleted `layout.columns` for exactly this freedom). Four or more
+ * posters read as a rail you push through, the way a shelf does; three or fewer read as a row that
+ * happens to be short, and scrolling them would be a lie about how much there is. The threshold is a
+ * claim about content, and content is the only thing a renderer may make claims from.
+ */
+function PosterList({ block, uir, rows, columns, imageCol }) {
+  const runRow = useRowRunner(uir);
+  const clickable = Boolean(block.item_action);
+  const subCol = block.subtitle_field ? columnDecl(columns, block.subtitle_field) : null;
+  const thumbCol = thumbColumn(columns, imageCol);
+  const Item = clickable ? "button" : "div";
+
+  return (
+    <div className="uir-posters" data-mode={posterMode(rows.length)}>
+      {rows.map((row, i) => {
+        const src = row[imageCol.name];
+        return (
+          <Item
+            key={i}
+            type={clickable ? "button" : undefined}
+            className="uir-poster"
+            style={staggerVar(i)}
+            data-clickable={clickable || undefined}
+            onClick={clickable ? (e) => { e.currentTarget.focus(); runRow(block.item_action, row); } : undefined}
+          >
+            {/* A release with no art keeps its place in the shelf. An empty plate says "no cover yet";
+                a missing card would say "no release", which is a different and false thing. */}
+            <span className="uir-poster__art" data-empty={isImageSrc(src) ? undefined : "true"}>
+              {isImageSrc(src) && <BlurImage src={src} thumb={thumbCol ? row[thumbCol.name] : null} alt="" />}
+            </span>
+            <span className="uir-poster__title">{row[block.title_field]}</span>
+            {block.subtitle_field && (
+              <span className="uir-poster__caption">
+                <Value value={row[block.subtitle_field]} column={subCol} now={uir.now} />
+              </span>
+            )}
+          </Item>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ListBlock({ block }) {
+  const { uir, rows, columns } = useRowsBinding(block, "items");
+  const runRow = useRowRunner(uir);
+  const clickable = Boolean(block.item_action);
+  const subCol = block.subtitle_field ? columnDecl(columns, block.subtitle_field) : null;
+
+  const imageCol = imageColumn(columns);
+  if (imageCol && rows.length) return <PosterList block={block} uir={uir} rows={rows} columns={columns} imageCol={imageCol} />;
+
+  return (
+    <div className="uir-list">
+      {rows.map((row, i) => {
+        const Item = clickable ? "button" : "div";
+        return (
+          <Item
+            key={i}
+            type={clickable ? "button" : undefined}
+            className="uir-list__item"
+            style={staggerVar(i)}
+            data-clickable={clickable || undefined}
+            // Same reason as the table row above. A `<button>` focuses on click in Chrome and Firefox
+            // but not in Safari, so this is not redundant.
+            onClick={clickable ? (e) => { e.currentTarget.focus(); runRow(block.item_action, row); } : undefined}
+          >
+            <InitialsChip value={row[block.title_field]} shape="square" />
+            <span className="uir-list__copy">
+              <span className="uir-list__title">{row[block.title_field]}</span>
+              {block.subtitle_field && (
+                <span className="uir-list__subtitle">
+                  <Value value={row[block.subtitle_field]} column={subCol} now={uir.now} />
+                </span>
+              )}
+            </span>
+            {clickable && <Chevron />}
+          </Item>
+        );
+      })}
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────────
+// detail — ONE record, described
+// ───────────────────────────────────────────────────────────────────────────────
+
+/**
+ * A record has a NAME, a STATE, and then some facts. A flat label/value list says all three in the
+ * same voice, which is how "what is the next release" came back looking like a database dump: the
+ * title of the thing set in the same 12px grey as the month it was created.
+ *
+ * Hierarchy here is not decoration — it is read out of `column.role`, which the dataset already
+ * declares, and which exists precisely so "a model can assemble a good page rather than merely a
+ * valid one: bind `name` to the row title, `status` to a badge" (data.schema.json#columnRole). This
+ * block was the one place reading that sentence and drawing a `<dt>` anyway.
+ *
+ * NO NEW SCHEMA. The decisions live in `core/record.js`, free of React, and are tested there.
+ */
+const roleOf = (col) => col?.role;
+
+export function DetailBlock({ block, emphasis = "normal" }) {
+  const { uir, rows, columns } = useRowsBinding(block, "source");
+  const select = block.select ?? "only";
+
+  // `only` is an assertion, not a preference: ≠1 row fails loudly rather than describing the wrong
+  // contract (DECISIONS B6, BLK6). The renderer honours it exactly as a resolver would.
+  if (select === "only" && rows.length !== 1) {
+    return <BlockError message={`\`select: "only"\` requires exactly one row; the dataset resolved ${rows.length}.`} />;
+  }
+  const row = select === "last" ? rows[rows.length - 1] : rows[0];
+  if (!row) return <BlockError message="The dataset resolved no rows to describe." />;
+
+  const specs = block.fields ?? allColumns(columns);
+  const withCols = specs.map((spec) => ({ spec, col: columnDecl(columns, spec.field) }));
+  const { head, badges, facts } = splitRecordFields(withCols, row);
+
+  return (
+    <div className="uir-detail" data-emphasis={emphasis} data-headed={head ? "true" : undefined}>
+      {head && (
+        <div className="uir-detail__head">
+          <h3 className="uir-detail__name">
+            <Value value={row[head.spec.field]} format={head.spec.format} empty={head.spec.empty} column={head.col} now={uir.now} spec={head.spec} />
+          </h3>
+          {badges.length > 0 && (
+            <div className="uir-detail__badges">
+              {badges.map(({ spec, col }) => (
+                <span className="uir-badge" data-tone={statusTone(row[spec.field])} key={spec.field}>
+                  <span className="uir-badge__label">{headingFor(spec, col)}</span>
+                  {String(row[spec.field])}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {facts.length > 0 && (
+        <dl className="uir-detail__facts">
+          {facts.map(({ spec, col }) => (
+            <div className="uir-detail__row" key={spec.field}>
+              <dt className="uir-eyebrow">{headingFor(spec, col)}</dt>
+              <dd className="uir-detail__value" data-numeric={numericish(spec.format, col) || undefined}>
+                {/* `role: url` is a place to GO, and a place to go is a link. The renderer checks the
+                    scheme at the point of use for the same reason `media` does: a bound value never
+                    passed the schema's literal check. Anything else is drawn as the value it is. */}
+                {roleOf(col) === "url" && isHttpUrl(row[spec.field]) ? (
+                  <a className="uir-detail__link" href={row[spec.field]} target="_blank" rel="noreferrer noopener">
+                    {linkText(row[spec.field])}
+                  </a>
+                ) : (
+                  <Value value={row[spec.field]} format={spec.format} empty={spec.empty} column={col} now={uir.now} spec={spec} />
+                )}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────────
+// timeline — rows against calendar time
+// ───────────────────────────────────────────────────────────────────────────────
+/**
+ * The one thing this block asserts is that the DISTANCE between two items reflects the distance
+ * between their dates. Spacing them evenly would be a lie about the only claim it makes, so the
+ * positions are computed from the dates and nothing else.
+ */
+export function TimelineBlock({ block }) {
+  const { uir, rows, columns } = useRowsBinding(block, "items");
+  const dateCol = columnDecl(columns, block.date_field);
+
+  const layout = useMemo(
+    () => timelineLayout(rows, block.date_field, block.end_date_field, uir.now),
+    [rows, block.date_field, block.end_date_field, uir.now],
+  );
+  const { items, ticks, today } = layout;
+
+  if (!items.length) return null;
+
+  return (
+    <div className="uir-timeline">
+      <div className="uir-timeline__track">
+        <div className="uir-timeline__axis" />
+        {today !== null && <><div className="uir-timeline__today-line" style={{ left: `${today}%` }} /><span className="uir-timeline__today" style={{ left: `${today}%` }}>today</span></>}
+        {items.map(({ row, left, width }, i) => (
+          // Captions rotate through FOUR lanes — two above the axis, two below. Alternating only two
+          // sides was not enough: eight releases across twelve weeks put four captions inside one
+          // hundred pixels and they printed over each other. The dots never move, because their
+          // positions are the only thing this block asserts; only the captions are given room.
+          <div className="uir-timeline__item" key={i} style={{ left: `${left}%` }}
+            data-side={i % 2 === 0 ? "above" : "below"} data-lane={i % 4}>
+            {width > 0 && <div className="uir-timeline__span" style={{ width: `${width}%` }} />}
+            <div className="uir-timeline__stem" />
+            <div className="uir-timeline__dot" />
+            <div className="uir-timeline__caption">
+              <div className="uir-timeline__label">{row[block.label_field]}</div>
+              <div className="uir-timeline__date">
+                {formatValue(row[block.date_field], { as: "date", date_style: "day" }, { column: dateCol, now: uir.now })}
+              </div>
+            </div>
+          </div>
+        ))}
+        <div className="uir-timeline__ticks">
+          {ticks.map((tick, index) => <span key={index} style={{ left: `${tick.left}%` }}>{tick.label}</span>)}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────────
+// calendar — rows placed on a date grid
+// ───────────────────────────────────────────────────────────────────────────────
+/**
+ * The claim this block makes, and the only one, is that a date belongs to a NAMED, BOUNDED PERIOD the
+ * reader already holds in their head. So the grid is drawn whole — every day of the period, including
+ * the empty ones and the leading/trailing days that make the weeks line up — because a month with its
+ * empty days removed is not a month, it is a list.
+ *
+ * Weeks begin on Monday. That is a locale decision this RENDERER makes and the document does not: it
+ * is exactly the kind of thing Principle 1 keeps out of the schema, and exactly the kind of thing a
+ * renderer must decide rather than leave to chance.
+ *
+ * Dates are read as CALENDAR days in the viewer's zone, never as instants. `Date.parse("2026-07-03")`
+ * is UTC midnight, which is the 2nd across the Americas — every item would land on the wrong day for
+ * half the world. So a bare `YYYY-MM-DD` is split, not parsed.
+ */
+const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const dayKey = (y, m, d) => `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+/** Monday = 0. JS says Sunday = 0, which puts the weekend in the middle of the week. */
+const mondayIndex = (jsDay) => (jsDay + 6) % 7;
+
+function calendarDay(value) {
+  if (typeof value === "string") {
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+    if (m) return { y: +m[1], m: +m[2] - 1, d: +m[3] };
+  }
+  if (value === null || value === undefined) return null;
+  const parsed = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(parsed.getTime())) return null;
+  return { y: parsed.getFullYear(), m: parsed.getMonth(), d: parsed.getDate() };
+}
+
+export function CalendarBlock({ block }) {
+  const { rows } = useRowsBinding(block, "items");
+  const span = block.span === "week" ? "week" : "month";
+
+  const { cells, title, count } = useMemo(() => {
+    const placed = [];
+    for (const row of rows) {
+      const day = calendarDay(row[block.date_field]);
+      // A row with no date is not placed. Absence is not a date, and a grid has no cell for it.
+      if (day) placed.push({ day, label: row[block.label_field] });
+    }
+    if (!placed.length) return { cells: [], title: null, count: 0 };
+
+    const byDay = new Map();
+    for (const p of placed) {
+      const k = dayKey(p.day.y, p.day.m, p.day.d);
+      if (!byDay.has(k)) byDay.set(k, []);
+      byDay.get(k).push(p.label);
+    }
+
+    // The grid shows the period ITS DATA is in. `span` names the period's UNIT; it does not select
+    // one. A page narrows to the month it means with a query filter, which is where narrowing lives.
+    const sorted = [...placed].sort((a, b) => new Date(a.day.y, a.day.m, a.day.d) - new Date(b.day.y, b.day.m, b.day.d));
+    const anchor = sorted[0].day;
+
+    let first;
+    let length;
+    if (span === "week") {
+      const at = new Date(anchor.y, anchor.m, anchor.d);
+      at.setDate(at.getDate() - mondayIndex(at.getDay()));
+      first = at;
+      length = 7;
+    } else {
+      const monthStart = new Date(anchor.y, anchor.m, 1);
+      const lead = mondayIndex(monthStart.getDay());
+      first = new Date(anchor.y, anchor.m, 1 - lead);
+      const daysInMonth = new Date(anchor.y, anchor.m + 1, 0).getDate();
+      length = Math.ceil((lead + daysInMonth) / 7) * 7;
+    }
+
+    const out = [];
+    for (let i = 0; i < length; i++) {
+      const at = new Date(first.getFullYear(), first.getMonth(), first.getDate() + i);
+      const k = dayKey(at.getFullYear(), at.getMonth(), at.getDate());
+      out.push({
+        key: k,
+        date: at.getDate(),
+        inPeriod: span === "week" || at.getMonth() === anchor.m,
+        labels: byDay.get(k) ?? [],
+      });
+    }
+
+    const periodName = span === "week"
+      ? `Week of ${first.toLocaleDateString(undefined, { month: "long", day: "numeric" })}`
+      : new Date(anchor.y, anchor.m, 1).toLocaleDateString(undefined, { month: "long", year: "numeric" });
+
+    return { cells: out, title: periodName, count: placed.length };
+  }, [rows, block.date_field, block.label_field, span]);
+
+  if (!cells.length) return null;
+
+  return (
+    <div className="uir-calendar" data-span={span}>
+      {/* The period, then its occupancy — which is what a voice renderer reads, and in that order.
+          A list of dates would be a `timeline` drawn as squares, wearing another block's claim. */}
+      <div className="uir-calendar__head">
+        <span className="uir-eyebrow">{title}</span>
+        <span className="uir-calendar__count">{count} {count === 1 ? "item" : "items"}</span>
+      </div>
+      <div className="uir-calendar__grid" role="grid" aria-label={`${title}: ${count} items`}>
+        {WEEKDAYS.map((d) => (
+          <div className="uir-calendar__weekday" key={d} role="columnheader">{d}</div>
+        ))}
+        {cells.map((cell) => (
+          <div
+            className="uir-calendar__cell"
+            key={cell.key}
+            role="gridcell"
+            data-outside={!cell.inPeriod || undefined}
+            data-occupied={cell.labels.length > 0 || undefined}
+          >
+            <span className="uir-calendar__date">{cell.date}</span>
+            {cell.labels.map((label, i) => (
+              <span className="uir-calendar__item" key={i} title={String(label)}>{label}</span>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { resolveBinding, resolveValue, boundColumn, UIResponseResolveError };