@almadar/ui 5.8.1 → 5.9.1

package/dist/components/atoms/AnimatedReveal.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export type RevealTrigger = 'scroll' | 'hover' | 'manual';
 export type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
 export interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** What triggers the animation */
     trigger?: RevealTrigger;
     /** Built-in animation preset */

package/dist/components/atoms/Badge.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 export type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 export type BadgeSize = "sm" | "md" | "lg";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: BadgeVariant;
     size?: BadgeSize;
     /** Numeric count or amount to display in badge */

package/dist/components/atoms/Box.d.ts

@@ -12,6 +12,8 @@ export type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent"
 export type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 export type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Padding on all sides */
     padding?: BoxPadding;
     /** Horizontal padding (overrides padding for x-axis) */

package/dist/components/atoms/Button.d.ts

@@ -4,6 +4,8 @@ import { type LucideIcon } from "lucide-react";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 export type ButtonSize = "sm" | "md" | "lg";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
     isLoading?: boolean;

package/dist/components/atoms/Card.d.ts

@@ -6,6 +6,8 @@ export type CardShadow = "none" | "sm" | "md" | "lg";
  */
 export type CardLook = "elevated" | "flat-bordered" | "borderless-divider" | "ticket" | "invoice" | "chip" | "tile-image-first";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: "default" | "bordered" | "elevated" | "interactive";
     padding?: "none" | "sm" | "md" | "lg";
     /** Card title - renders in header if provided */

package/dist/components/atoms/Checkbox.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Whether the checkbox is checked */
     checked?: boolean;
     /** Default checked state (uncontrolled) */

package/dist/components/atoms/FilterPill.d.ts

@@ -3,6 +3,8 @@ import type { EventEmit } from "@almadar/core";
 export type FilterPillVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
 export type FilterPillSize = "sm" | "md" | "lg";
 export interface FilterPillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     variant?: FilterPillVariant;
     size?: FilterPillSize;
     /** Pill label text (alternative to children for schema-driven rendering). */

package/dist/components/atoms/Input.d.ts

@@ -6,6 +6,8 @@ export interface SelectOption {
     label: string;
 }
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Placeholder text */
     placeholder?: string;
     /** Current value */

package/dist/components/atoms/Label.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Label text content */
     text?: string;
     /** Associated input element ID */

package/dist/components/atoms/Radio.d.ts

@@ -6,6 +6,8 @@
 import React from "react";
 import type { EventKey } from "@almadar/core";
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Radio options (string array or SelectOption array) */
     options?: string[];
     /** Current selected value */

package/dist/components/atoms/RangeSlider.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import type { EventKey, EventPayload } from "@almadar/core";
 export type RangeSliderSize = "sm" | "md" | "lg";
 export interface RangeSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Minimum value */
     min?: number;
     /** Maximum value */

package/dist/components/atoms/Select.d.ts

@@ -6,6 +6,8 @@ export interface SelectOption {
     disabled?: boolean;
 }
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Select options */
     options: SelectOption[];
     /** Placeholder text */

package/dist/components/atoms/Spinner.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 export type SpinnerSize = "xs" | "sm" | "md" | "lg";
 export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     size?: SpinnerSize;
 }
 export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/StatusDot.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 export type StatusDotStatus = "online" | "offline" | "away" | "busy" | "warning" | "critical";
 export type StatusDotSize = "sm" | "md" | "lg";
 export interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Status determines the dot color */
     status?: StatusDotStatus;
     /** Enable pulse animation for active/critical states */

package/dist/components/atoms/Textarea.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import type { EventKey } from "@almadar/core";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Placeholder text */
     placeholder?: string;
     /** Number of visible rows */

package/dist/components/atoms/TrendIndicator.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 export type TrendDirection = "up" | "down" | "flat";
 export type TrendIndicatorSize = "sm" | "md" | "lg";
 export interface TrendIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
     /** Numeric value to display (e.g., 12.5 for +12.5%) */
     value?: number;
     /** Override automatic direction detection (positive=up, negative=down, zero=flat) */

package/dist/components/index.cjs

@@ -28283,6 +28283,318 @@ var init_Lightbox = __esm({
     exports.Lightbox.displayName = "Lightbox";
   }
 });
+function columnLabel(col) {
+  return col.header ?? col.label ?? col.key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant4(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online", "ok"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warn", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  if (["new", "created", "scheduled", "queued", "info"].includes(v)) return "info";
+  return "default";
+}
+function formatCell(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date": {
+      const d = new Date(String(value));
+      return isNaN(d.getTime()) ? String(value) : d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+    }
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+function groupData2(items, field) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = String(getNestedValue(item, field) ?? "");
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+function TableView({
+  entity,
+  columns,
+  fields,
+  itemActions,
+  selectable = false,
+  selectEvent,
+  selectedIds,
+  sortEvent,
+  sortColumn,
+  sortDirection,
+  className,
+  emptyMessage,
+  isLoading = false,
+  error = null,
+  groupBy,
+  pageSize = 0,
+  children,
+  renderItem: _schemaRenderItem,
+  look = "dense",
+  // DnD props consumed by useDataDnd.
+  dragGroup,
+  accepts,
+  sortable,
+  dropEvent,
+  reorderEvent,
+  positionEvent,
+  dndItemIdField,
+  dndRoot
+}) {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [visibleCount, setVisibleCount] = React80__namespace.default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React80__namespace.default.useState(/* @__PURE__ */ new Set());
+  const colDefs = columns ?? fields ?? [];
+  const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const dnd = useDataDnd({
+    items: allDataRaw,
+    layout: "list",
+    dragGroup,
+    accepts,
+    sortable,
+    dropEvent,
+    reorderEvent,
+    positionEvent,
+    dndItemIdField,
+    dndRoot
+  });
+  const ordered = dnd.orderedItems;
+  const data = pageSize > 0 ? ordered.slice(0, visibleCount) : ordered;
+  const hasMore = pageSize > 0 && visibleCount < ordered.length;
+  const hasRenderProp = typeof children === "function";
+  const idField = dndItemIdField ?? "id";
+  const selected = selectedIds ? new Set(selectedIds) : localSelected;
+  const emitSelection = (next) => {
+    if (!selectedIds) setLocalSelected(next);
+    if (selectEvent) {
+      const payload = { selectedIds: Array.from(next) };
+      eventBus.emit(`UI:${selectEvent}`, payload);
+    }
+  };
+  const allSelected = selectable && data.length > 0 && data.every((r, i) => selected.has(String(r[idField] ?? i)));
+  const toggleAll = () => {
+    if (allSelected) emitSelection(/* @__PURE__ */ new Set());
+    else emitSelection(new Set(data.map((r, i) => String(r[idField] ?? i))));
+  };
+  const toggleRow = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    emitSelection(next);
+  };
+  const handleSort = (col) => {
+    if (!col.sortable || !sortEvent) return;
+    const dir = sortColumn === (col.field ?? col.key) && sortDirection === "asc" ? "desc" : "asc";
+    eventBus.emit(`UI:${sortEvent}`, { column: col.field ?? col.key, direction: dir });
+  };
+  const handleActionClick = (action, row) => (e) => {
+    e.stopPropagation();
+    const payload = {
+      id: row.id,
+      row
+    };
+    eventBus.emit(`UI:${action.event}`, payload);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading\u2026" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (data.length === 0) {
+    const emptyNode = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: emptyMessage || t("empty.noItems") || "No records" }) });
+    return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
+  }
+  const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
+  const header = /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Box,
+    {
+      role: "row",
+      style: { gridTemplateColumns },
+      className: cn(
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
+        "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
+        lk.headPad
+      ),
+      children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        colDefs.map((col) => {
+          const active = sortColumn === (col.field ?? col.key);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.Box,
+            {
+              role: "columnheader",
+              onClick: () => handleSort(col),
+              className: cn(
+                "flex items-center gap-1 min-w-0",
+                alignClass[col.align ?? "left"],
+                col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
+              ),
+              children: [
+                col.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: col.icon, size: "xs" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: columnLabel(col) }),
+                col.sortable && sortEvent && /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Icon,
+                  {
+                    name: active ? sortDirection === "asc" ? "chevron-up" : "chevron-down" : "chevrons-up-down",
+                    size: "xs",
+                    className: cn("flex-shrink-0", active ? "text-foreground" : "opacity-40")
+                  }
+                )
+              ]
+            },
+            col.key
+          );
+        }),
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { "aria-hidden": true })
+      ]
+    }
+  );
+  const renderRow = (row, index) => {
+    const id = String(row[idField] ?? index);
+    const rowInner = /* @__PURE__ */ jsxRuntime.jsxs(
+      exports.Box,
+      {
+        role: "row",
+        "data-entity-row": true,
+        "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
+        className: cn(
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
+          lk.rowPad,
+          lk.divider && "border-b border-[var(--color-border)]",
+          lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
+          "hover:bg-[var(--color-surface-subtle)]",
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
+        ),
+        children: [
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Checkbox,
+            {
+              checked: selected.has(id),
+              onChange: () => toggleRow(id),
+              "aria-label": `Select row ${id}`
+            }
+          ) }),
+          hasRenderProp ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 min-w-0", children: children(row, index) }) : colDefs.map((col) => {
+            const raw = getNestedValue(row, col.field ?? col.key);
+            const cellBase = cn(
+              "flex items-center min-w-0",
+              alignClass[col.align ?? "left"],
+              weightClass[col.weight ?? "normal"],
+              col.className
+            );
+            if (col.format === "badge" && raw != null && raw !== "") {
+              return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
+          }),
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            exports.Button,
+            {
+              variant: action.variant ?? "ghost",
+              size: "sm",
+              onClick: handleActionClick(action, row),
+              "data-testid": `action-${action.event}`,
+              "data-row-id": String(row.id),
+              className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                action.label
+              ]
+            },
+            i
+          )) })
+        ]
+      }
+    );
+    return dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsxRuntime.jsx(React80__namespace.default.Fragment, { children: rowInner }, id);
+  };
+  const items = data.map((row) => row);
+  const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
+  let runningIndex = 0;
+  const body = /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React80__namespace.default.Fragment, { children: [
+    group.label && /* @__PURE__ */ jsxRuntime.jsx(exports.Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
+    group.items.map((row) => renderRow(row, runningIndex++))
+  ] }, gi)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    exports.Box,
+    {
+      role: "table",
+      className: cn("w-full text-sm", className),
+      children: [
+        header,
+        dnd.wrapContainer(body),
+        hasMore && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { variant: "ghost", size: "sm", onClick: () => setVisibleCount((p2) => p2 + (pageSize || 5)), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "chevron-down", size: "xs", className: "mr-1" }),
+          t("common.showMore"),
+          " (",
+          ordered.length - visibleCount,
+          " remaining)"
+        ] }) })
+      ]
+    }
+  );
+}
+var alignClass, weightClass, LOOKS;
+var init_TableView = __esm({
+  "components/molecules/TableView.tsx"() {
+    "use client";
+    init_cn();
+    init_getNestedValue();
+    init_useEventBus();
+    init_useTranslate();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_Badge();
+    init_Button();
+    init_Icon();
+    init_Checkbox();
+    init_Divider();
+    init_useDataDnd();
+    logger.createLogger("almadar:ui:table-view");
+    alignClass = {
+      left: "justify-start text-left",
+      center: "justify-center text-center",
+      right: "justify-end text-right"
+    };
+    weightClass = {
+      normal: "",
+      medium: "font-medium",
+      semibold: "font-semibold"
+    };
+    LOOKS = {
+      dense: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true },
+      spacious: { rowPad: "px-5 py-4", headPad: "px-5 py-3", striped: false, divider: true },
+      striped: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: true, divider: false },
+      borderless: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: false },
+      bordered: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true }
+    };
+    TableView.displayName = "TableView";
+  }
+});
 function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
@@ -33973,6 +34285,7 @@ var init_molecules = __esm({
     init_Lightbox();
     init_DataGrid();
     init_DataList();
+    init_TableView();
     init_StatDisplay();
     init_Meter();
     init_SwipeableRow();
@@ -45974,6 +46287,7 @@ var init_component_registry_generated = __esm({
     init_Switch();
     init_TabbedContainer();
     init_Table();
+    init_TableView();
     init_Tabs();
     init_TagCloud();
     init_TagInput();
@@ -46291,6 +46605,7 @@ var init_component_registry_generated = __esm({
       "Switch": exports.Switch,
       "TabbedContainer": exports.TabbedContainer,
       "Table": exports.Table,
+      "TableView": TableView,
       "Tabs": exports.Tabs,
       "TagCloud": exports.TagCloud,
       "TagInput": exports.TagInput,
@@ -47407,7 +47722,7 @@ var FormActions = ({
   align = "right",
   className
 }) => {
-  const alignClass = {
+  const alignClass2 = {
     left: "justify-start",
     right: "justify-end",
     between: "justify-between",
@@ -47420,7 +47735,7 @@ var FormActions = ({
       align: "center",
       className: cn(
         "pt-6 border-t border-border",
-        alignClass,
+        alignClass2,
         sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
         className
       ),
@@ -50297,6 +50612,7 @@ exports.StateNode = StateNode2;
 exports.StatusBar = StatusBar;
 exports.StatusEffect = StatusEffect;
 exports.TERRAIN_COLORS = TERRAIN_COLORS;
+exports.TableView = TableView;
 exports.TerrainPalette = TerrainPalette;
 exports.TimeSlotCell = TimeSlotCell;
 exports.TimerDisplay = TimerDisplay;