gridsmith-ui 0.31.1 → 0.33.0

package/dist/tokens.css

@@ -151,7 +151,7 @@
   --ds-nav-h-track-border: var(--ds-border-width);
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
-  --ds-nav-v-active-bg: var(--ds-tab-active-bg);
+  --ds-nav-v-active-bg: var(--ds-accent-subtle);
   --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
@@ -159,7 +159,7 @@
   --ds-nav-v-track-padding: var(--ds-space-1);
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
-  --ds-tree-active-bg: var(--ds-tab-active-bg);
+  --ds-tree-active-bg: var(--ds-accent-subtle);
   --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);
@@ -184,7 +184,7 @@
   --ds-nav-h-track-border: var(--ds-border-width);
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
-  --ds-nav-v-active-bg: var(--ds-tab-active-bg);
+  --ds-nav-v-active-bg: var(--ds-accent-subtle);
   --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
@@ -192,7 +192,7 @@
   --ds-nav-v-track-padding: var(--ds-space-1);
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
-  --ds-tree-active-bg: var(--ds-tab-active-bg);
+  --ds-tree-active-bg: var(--ds-accent-subtle);
   --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);
@@ -469,7 +469,7 @@
   --ds-nav-h-track-border: var(--ds-border-width);
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
-  --ds-nav-v-active-bg: var(--ds-tab-active-bg);
+  --ds-nav-v-active-bg: var(--ds-accent-subtle);
   --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
@@ -477,7 +477,7 @@
   --ds-nav-v-track-padding: var(--ds-space-1);
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
-  --ds-tree-active-bg: var(--ds-tab-active-bg);
+  --ds-tree-active-bg: var(--ds-accent-subtle);
   --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);

package/dist/utils.d.ts

@@ -326,4 +326,54 @@ type CategoryKind = "names" | "scale";
  */
 declare function categoryKind(labels: ReadonlyArray<unknown>, locale?: string): CategoryKind;
 
-export { ACTIVE_RING, type CategoryKind, type DateInput, type DateRangeWords, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, ERROR_HAS_FOCUS_RING, FIELD_FOCUS_RING, FIELD_FOCUS_WITHIN_RING, FIELD_HAS_FOCUS_RING, FOCUS_INSET, FOCUS_RING, FOCUS_WITHIN_RING, GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, GROUP_FOCUS_RING, HAS_FOCUS_RING, type Occurrence, PEER_FOCUS_RING, type Recurrence, type RecurrenceFrequency, type RecurrencePreset, type RecurrenceScope, type RepeatChange, type RepeatingEvent, TIME_ZOOMS, type TimeZoom, type WeekOfMonth, type Weekday, canonicalTimeZone, categoryKind, cn, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readRecurrence, recurrencePresets, requestLocale, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule };
+/**
+ * Sprint 32 (A2) — a dashboard's layout, as plain data: its widgets in reading order, each with a width in columns of 12
+ * and a height in rows of a fixed height. The grid lays them out as text is laid out: left to right, then the next row,
+ * each taking the first space after the one before that fits it (CSS grid's sparse auto-placement, never `dense`), so
+ * what's on screen, what a screen reader reads and where Tab goes are one order by construction.
+ *
+ * Server-safe: no React and no browser, so `gridsmith-ui/utils` exports the helpers (normaliseLayout, moveItem,
+ * resizeItem, addItem, removeItem) and a page that only adds a widget, or a test that checks a layout, needs no drag
+ * code. The rest is the grid's own: where widgets land (`placeLayout`, a copy of the browser's placement rule, held equal
+ * to Chrome's by a Chrome test), where a key or a pointer would take one (`stepTarget`, `nearestIndex`) and the words a
+ * screen reader hears for a size. Where things land is worked out here, from the layout, never measured from the
+ * screen: measuring a preview feeds back into it, the flicker sortable grids are known for.
+ */
+interface DashboardLayoutItem {
+    id: string;
+    /** Its width, in columns of 12. */
+    w: number;
+    /** Its height, in rows. */
+    h: number;
+    /** The narrowest it may be made, in columns (default 3, a quarter of the width; a widget is never narrower). */
+    minW?: number;
+    /** The shortest it may be made, in rows (default 2). */
+    minH?: number;
+    /** The widest it may be made, in columns (default 12). */
+    maxW?: number;
+    /** The tallest it may be made, in rows. */
+    maxH?: number;
+}
+type DashboardLayout = DashboardLayoutItem[];
+/**
+ * The layout the grid draws (A2, "always valid"): whatever a page passes (a width past 12, a size under its minimum, a
+ * repeated id, an entry with no id), each widget once, in order, with whole sizes inside its limits and the 12 columns.
+ * Fields of the page's own on an entry are kept. Normalising twice changes nothing.
+ */
+declare function normaliseLayout(layout: readonly DashboardLayoutItem[] | null | undefined): DashboardLayout;
+/** The layout with a widget moved to a place in the order (from 0; past either end, to that end). */
+declare function moveItem(layout: readonly DashboardLayoutItem[], id: string, toIndex: number): DashboardLayout;
+/** The layout with a widget given a new width, height or both, held to its limits. */
+declare function resizeItem(layout: readonly DashboardLayoutItem[], id: string, size: {
+    w?: number;
+    h?: number;
+}): DashboardLayout;
+/**
+ * The layout with a widget added at a place in the order (from 0), else at the end. An id already in the layout isn't
+ * added again: ids are unique, and the widget there keeps its place.
+ */
+declare function addItem(layout: readonly DashboardLayoutItem[], item: DashboardLayoutItem, index?: number): DashboardLayout;
+/** The layout without a widget; the rest flow up to fill its place. */
+declare function removeItem(layout: readonly DashboardLayoutItem[], id: string): DashboardLayout;
+
+export { ACTIVE_RING, type CategoryKind, type DashboardLayout, type DashboardLayoutItem, type DateInput, type DateRangeWords, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, ERROR_HAS_FOCUS_RING, FIELD_FOCUS_RING, FIELD_FOCUS_WITHIN_RING, FIELD_HAS_FOCUS_RING, FOCUS_INSET, FOCUS_RING, FOCUS_WITHIN_RING, GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, GROUP_FOCUS_RING, HAS_FOCUS_RING, type Occurrence, PEER_FOCUS_RING, type Recurrence, type RecurrenceFrequency, type RecurrencePreset, type RecurrenceScope, type RepeatChange, type RepeatingEvent, TIME_ZOOMS, type TimeZoom, type WeekOfMonth, type Weekday, addItem, canonicalTimeZone, categoryKind, cn, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, formatDateRange, moveItem, normaliseLayout, nthOf, occurrenceOn, occurrences, parseRRule, readRecurrence, recurrencePresets, removeItem, requestLocale, resizeItem, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule };

package/dist/utils.js

@@ -668,9 +668,9 @@ function dayOf(value) {
   return back.getUTCFullYear() === y && back.getUTCMonth() === mo && back.getUTCDate() === d ? day : NaN;
 }
 function dateOfDay(day) {
-  const whole2 = Math.floor(day);
-  const u = new Date(whole2 * DAY_MS);
-  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole2) * DAY_MS));
+  const whole3 = Math.floor(day);
+  const u = new Date(whole3 * DAY_MS);
+  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole3) * DAY_MS));
 }
 function isWholeDay(value) {
   return typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(dayOf(value));
@@ -882,6 +882,57 @@ function categoryKind(labels, locale) {
   return "scale";
 }
 
-export { ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, ERROR_HAS_FOCUS_RING, FIELD_FOCUS_RING, FIELD_FOCUS_WITHIN_RING, FIELD_HAS_FOCUS_RING, FOCUS_INSET, FOCUS_RING, FOCUS_WITHIN_RING, GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, GROUP_FOCUS_RING, HAS_FOCUS_RING, PEER_FOCUS_RING, TIME_ZOOMS, canonicalTimeZone, categoryKind, cn, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readRecurrence, recurrencePresets, requestLocale, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule };
+// ../../showcase/src/lib/dashboard-layout.ts
+var DASHBOARD_COLUMNS = 12;
+var MIN_W = 3;
+var DEFAULT_MIN_H = 2;
+var DASHBOARD_MAX_ROWS = 100;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var whole2 = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.round(value) : fallback;
+function sizeLimits(item) {
+  const minW = clamp(whole2(item.minW, MIN_W), MIN_W, DASHBOARD_COLUMNS);
+  const maxW = clamp(whole2(item.maxW, DASHBOARD_COLUMNS), minW, DASHBOARD_COLUMNS);
+  const minH = clamp(whole2(item.minH, DEFAULT_MIN_H), 1, DASHBOARD_MAX_ROWS);
+  const maxH = clamp(whole2(item.maxH, DASHBOARD_MAX_ROWS), minH, DASHBOARD_MAX_ROWS);
+  return { minW, maxW, minH, maxH };
+}
+function normaliseItem(item) {
+  const limits = sizeLimits(item);
+  const next = { ...item, w: clamp(whole2(item.w, limits.minW), limits.minW, limits.maxW), h: clamp(whole2(item.h, limits.minH), limits.minH, limits.maxH) };
+  for (const key of ["minW", "maxW", "minH", "maxH"]) if (item[key] !== void 0) next[key] = limits[key];
+  return next;
+}
+function normaliseLayout(layout) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const item of Array.isArray(layout) ? layout : []) {
+    if (!item || typeof item.id !== "string" || item.id === "" || seen.has(item.id)) continue;
+    seen.add(item.id);
+    out.push(normaliseItem(item));
+  }
+  return out;
+}
+function moveItem(layout, id, toIndex) {
+  const items = normaliseLayout(layout);
+  const from = items.findIndex((item2) => item2.id === id);
+  if (from < 0) return items;
+  const [item] = items.splice(from, 1);
+  items.splice(clamp(whole2(toIndex, from), 0, items.length), 0, item);
+  return items;
+}
+function resizeItem(layout, id, size) {
+  return normaliseLayout(layout).map((item) => item.id === id ? normaliseItem({ ...item, ...size.w !== void 0 ? { w: size.w } : {}, ...size.h !== void 0 ? { h: size.h } : {} }) : item);
+}
+function addItem(layout, item, index) {
+  const items = normaliseLayout(layout);
+  if (!item || typeof item.id !== "string" || item.id === "" || items.some((it) => it.id === item.id)) return items;
+  items.splice(clamp(whole2(index, items.length), 0, items.length), 0, normaliseItem(item));
+  return items;
+}
+function removeItem(layout, id) {
+  return normaliseLayout(layout).filter((item) => item.id !== id);
+}
+
+export { ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, ERROR_HAS_FOCUS_RING, FIELD_FOCUS_RING, FIELD_FOCUS_WITHIN_RING, FIELD_HAS_FOCUS_RING, FOCUS_INSET, FOCUS_RING, FOCUS_WITHIN_RING, GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, GROUP_FOCUS_RING, HAS_FOCUS_RING, PEER_FOCUS_RING, TIME_ZOOMS, addItem, canonicalTimeZone, categoryKind, cn, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, formatDateRange, moveItem, normaliseLayout, nthOf, occurrenceOn, occurrences, parseRRule, readRecurrence, recurrencePresets, removeItem, requestLocale, resizeItem, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule };
 //# sourceMappingURL=utils.js.map
 //# sourceMappingURL=utils.js.map