@colixsystems/widget-sdk 0.131.0 → 0.133.0

package/README.md

@@ -70,7 +70,17 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.131.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.133.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.133.0 (contract 1.102.0)
+
+**A required `tableRef` needs a `datastoreTemplate` table that answers to its NAME, not just another table in the list (sc-6965).** 0.57.0's publish gate `manifest.requiredTableRefsHaveTemplate` compared COUNTS — it passed as soon as `datastoreTemplate.tables` plus any host-supplied tables outnumbered the `required` `tableRef` props. So a widget with two required props published on any two template tables, including the case where both of them name the SAME prop and the other has nothing: the installer, which binds by name, then had no table for it and fell back to whichever one was left over — your widget wired to a table its code was never written against. The gate now runs the installer's own matcher over your template, per property: a table's `suffix` must answer to the property's name (`ordersTableId` needs suffix `Orders`), and the failure names only the properties nothing answers to, with the suffix each one wants. **What still passes unchanged:** the conventional bare `tableId`, which carries no name to match and takes the first table still free; a property marked `sharedTable: true`, which seeds nothing by design (0.106.0); and a standalone submit with no template at all, which fails exactly as it did. **What to change if you are newly rejected:** name the table after the property it is for — that is the pairing that was always going to decide the binding. Every first-party widget passes unchanged. No export, type, hook, or manifest field changed shape — a publish-gate tightening plus documentation. `CONTRACT` is unchanged (no new field).
+
+### What's new in 0.132.0 (contract 1.102.0)
+
+**BREAKING: the top bar has no divider — `resolveTopBarTokens` drops `borderColor` and `borderWidth` (sc-7360).** The bar and its tab row are one surface; a line under the bar ruled it off from its own menu, and a line under the tabs ruled the menu off from the page it navigates. Neither host draws one any more, the Design page offers no colour or width for one, and `TopBarTokens` no longer carries the two fields. A stored `topBar.borderColor` / `borderWidth` is **inert, not migrated** — nothing reads it, and the theme coercer drops it from a saved look or a Mason `set_theme`. The rail's, footer's and site header's dividers are unchanged.
+
+- `resolveSidebarTokens` / `resolveFooterTokens` are unchanged. No `CONTRACT` change.
 
 ### What's new in 0.131.0 (contract 1.102.0)
 
@@ -1382,7 +1392,7 @@ A widget that works but looks unfinished is only half done. `useTheme()` is the
 - **Spend one gradient.** `<Gradient colors={[theme.colors.primary, theme.colors.primaryStrong]} angle={160} style={…}>` is a `View` that paints a gradient behind its children, so it replaces the `View` you'd otherwise give a flat `backgroundColor`. `angle` is CSS degrees (0 = to top, 90 = to right, default 180); text on it uses `colors.onPrimary`. Exactly **one** per widget — on the focal element — and never behind body text. Both hosts render it identically (web paints CSS, native uses `expo-linear-gradient`), so there is no per-platform branching to write; don't import `expo-linear-gradient` yourself and don't write a `backgroundImage` string.
 - **Answer the touch.** Every tappable card, row and list entry lifts while the pointer is over it (web) or it is pressed (touch). One declaration does both: give the Pressable a style FUNCTION and spread `pressableLift` — `<Pressable onPress={open} style={(state) => [styles.card, ...pressableLift(state)]}>`. The lift is a -2px nudge plus one elevation step from `theme.interaction`, with the web transition built in. Never hand-write hover logic or your own pressed shadows, and never fake feedback with `opacity` — a dimmed surface reads as disabling itself.
 - **Size to your container — measure it, don't stretch into it.** The same widget sits in a full-width desktop section (~1400px), a half-width grid cell (~700px) and a phone (~360px), so layout built only from `flex: 1` stretches to fill whatever it is handed — a month calendar ends up with 200px day cells and swallows the page. Measure your own width with `onLayout={(e) => setWidth(e.nativeEvent.layout.width)}` on the root `View` (a React Native primitive, so it behaves identically on both hosts), render nothing size-dependent while `width === 0`, and compute every threshold from the measured value: a widget gets no declared breakpoint prop, but it can always measure. **Cap a repeating cell** rather than giving a grid `flex: 1` — `const cell = Math.max(32, Math.min(Math.floor((usable - gap * (columns - 1)) / columns), 64));`, with a calendar day cell topping out at 56–72px on `aspectRatio: 1`, and the grid given its exact computed width plus `alignSelf: 'center'` when the cap leaves slack. **Split two co-equal surfaces above ~720px measured width** (`flexDirection: width >= 720 ? 'row' : 'column'`, each half `{ flex: 1, minWidth: 0 }`) — a picker beside the form it feeds on a wide canvas, stacked in reading order below it. Never hardcode a width, never put `flex: 1` / `height: '100%'` on a content widget's root, and don't read the screen with `Dimensions` — the screen is not the widget.
-- **Compose forms — pair fields into rows, don't stack one per row.** Put short, related fields side by side (first + last name, city + postal code, expiry + CVC): a row of `{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.md }` with each field cell `{ flexGrow: 1, flexBasis: 160 }` splits the width on a wide card and wraps to stacked on a narrow phone — the right recipe for field pairs because it needs no measurement (a fixed-width column overflows a phone; when a layout needs a real column count instead of wrapping, measure your width as above). Keep wide fields (email, address, notes) full-width with `width: '100%'` — NEVER `flexBasis: '100%'`, which sizes the main axis and therefore claims the parent's whole HEIGHT in a column (sc-7274) — cap it at two–three per row, group a long form into labelled sections, and label every input above it (not placeholder-only). Give a `multiline` field BOTH a floor and a ceiling (`{ minHeight: 150, maxHeight: 260 }`) so a long value scrolls inside the box instead of growing past its card, and keep the Save / Cancel row in normal flow below the fields, never positioned over them.
+- **Compose forms — pair fields into rows, don't stack one per row.** Put short, related fields side by side (first + last name, city + postal code, expiry + CVC): a row of `{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.md }` with each field cell `{ flexGrow: 1, flexBasis: 160 }` splits the width on a wide card and wraps to stacked on a narrow phone — the right recipe for field pairs because it needs no measurement (a fixed-width column overflows a phone; when a layout needs a real column count instead of wrapping, measure your width as above). Keep wide fields (email, address, notes) full-width with `width: '100%'` — NEVER `flexBasis: '100%'`, which sizes the main axis and therefore claims the parent's whole HEIGHT in a column (sc-7274) — cap it at two–three per row, group a long form into labelled sections, and label every input above it (not placeholder-only). Give a `multiline` field BOTH a floor and a ceiling (`{ minHeight: 150, maxHeight: 260 }`) so a long value scrolls inside the box instead of growing past its card, and keep the Save / Cancel row in normal flow below the fields, never positioned over them. When a field carries an icon beside it (a search glyph, a clear button), the border belongs on the WRAPPER row and the `TextInput` inside it goes borderless and transparent with `flex: 1, minWidth: 0` (the `minWidth: 0` stops a long value pushing the border past its container) — React Native has no `:focus-within`, so drive the wrapper's `borderColor` between `colors.border` and `colors.primary` from the input's own `onFocus` / `onBlur`. A border left on the input rings only its own `<input>` box on web, leaving the icon outside the ring; never absolutely-position the icon over the field to work around it.
 - **Respond to touch.** Give every `Pressable` the lift via the function-style `style={(state) => [base, ...pressableLift(state)]}` — see "Answer the touch" above. Never dim with `opacity`, which reads as the surface disabling itself.
 - **Drag and drop — show what is being dragged.** A drag where the item stays put reads as broken. Three things change the moment a drag starts: the **drag proxy** (the item lifts and follows the finger — `...theme.elevation.lg`, `{ scale: 1.03 }`, `opacity: 0.9`; for a tall or full-width item drag a compact `primarySoft` pill with its icon + one line of label instead), the **source placeholder** (the vacated slot keeps its height as a quiet `colors.surfaceMuted` block so the list doesn't collapse), and the **drop target** (one slot at a time highlighted with `primarySoft` or a 2px `colors.primary` border). Always animate the release — settle into the new slot, or `Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false })` back to the origin on cancel. Build it with `Animated` + `PanResponder` from `react-native` (the only mechanism that behaves identically on both hosts) — never HTML5 drag events (`draggable` / `onDragStart` / `dataTransfer` are web-only, and `document` / `window` are banned) — and start the drag from a `GripVertical` grip handle whenever the row is also tappable or sits in a `ScrollView`.
 - **Use icons for clarity.** Pair a `lucide-react-native` icon with its label at a consistent size, coloured from the theme. The label never repeats the icon as a character — with a `Plus` icon the button says "Add item", never "+ Add item" (that renders a doubled plus).

package/dist/host.d.ts

@@ -222,13 +222,12 @@ export function resolveSidebarTokens(theme: unknown): SidebarTokens;
 
 /** The top app bar's resolved tokens. `tintColor` and `titleColor` are separate
  *  because an unthemed bar paints its icons slate and its app name in the brand
- *  colour; an authored `topBar.textColor` drives both. */
+ *  colour; an authored `topBar.textColor` drives both. The bar carries NO
+ *  divider (sc-7360): a stored `topBar.borderColor` / `borderWidth` is inert. */
 export interface TopBarTokens {
   backgroundColor: string;
   tintColor: string;
   titleColor: string;
-  borderColor: string | null;
-  borderWidth: number | null;
   /** The current page's mark — the active link's label, and an active tab's
    *  label plus its indicator. Falls back to the RAIL's `activeColor` and then
    *  to the brand, so an app states its navigation colour once. */

package/dist/navigation.cjs

@@ -281,7 +281,9 @@ function resolveSidebarTokens(theme) {
 }
 
 /**
- * The top app bar's surface, its two text colours and its opt-in divider.
+ * The top app bar's surface and its two text colours. It has NO divider
+ * (sc-7360): the bar and its tab row sit in one surface, so a stored divider
+ * colour or width on the block is inert on both hosts.
  *
  * `tintColor` and `titleColor` are SEPARATE because the web bar has always
  * painted them differently when the author names nothing: the hamburger and
@@ -295,13 +297,11 @@ function resolveSidebarTokens(theme) {
  * @param {unknown} theme — the whole `theme_config`; the app's
  *   `backgroundColor`/`backgroundGradient` are read because an unset surface
  *   resolves to the page's, as an `attached` tab's already did (sc-6596).
- * @returns {{ backgroundColor: string, tintColor: string, titleColor: string,
- *   borderColor: string|null, borderWidth: number|null }}
+ * @returns {{ backgroundColor: string, tintColor: string, titleColor: string }}
  */
 function resolveTopBarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const topBar = isPlainObject(config.topBar) ? config.topBar : {};
-  const borderColor = hexOrNull(topBar.borderColor);
   // An explicit colour drives BOTH slots; only the unset case splits.
   const authored = hexOrNull(topBar.textColor);
   return {
@@ -324,13 +324,10 @@ function resolveTopBarTokens(theme) {
       topBar.activeColor,
       hexOr(sidebarBlock(config).activeColor, brandPrimary(config)),
     ),
-    borderColor,
-    borderWidth: borderColor ? borderWidthOr(topBar.borderWidth) : null,
     // REQ-NAV-STRUCTURE: how the tab row marks its current page.
     // `underline` keeps the tab in the bar's surface and marks it with an
     // indicator. `attached` makes it a real folder tab: it takes the CONTENT's
-    // surface and sits over the row's divider, so the tab and the page beneath
-    // read as one plane. Meaningless on a shape that draws no tab row — a host
+    // surface and meets the page beneath it, so the two read as one plane. Meaningless on a shape that draws no tab row — a host
     // reads it only where it has tabs to draw.
     tabStyle: topBar.tabStyle === "attached" ? "attached" : "underline",
     // The surface an `attached` tab AND its content panel share. One value for

package/dist/navigation.js

@@ -272,7 +272,9 @@ export function resolveSidebarTokens(theme) {
 }
 
 /**
- * The top app bar's surface, its two text colours and its opt-in divider.
+ * The top app bar's surface and its two text colours. It has NO divider
+ * (sc-7360): the bar and its tab row sit in one surface, so a stored divider
+ * colour or width on the block is inert on both hosts.
  *
  * `tintColor` and `titleColor` are SEPARATE because the web bar has always
  * painted them differently when the author names nothing: the hamburger and
@@ -286,13 +288,11 @@ export function resolveSidebarTokens(theme) {
  * @param {unknown} theme — the whole `theme_config`; the app's
  *   `backgroundColor`/`backgroundGradient` are read because an unset surface
  *   resolves to the page's, as an `attached` tab's already did (sc-6596).
- * @returns {{ backgroundColor: string, tintColor: string, titleColor: string,
- *   borderColor: string|null, borderWidth: number|null }}
+ * @returns {{ backgroundColor: string, tintColor: string, titleColor: string }}
  */
 export function resolveTopBarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const topBar = isPlainObject(config.topBar) ? config.topBar : {};
-  const borderColor = hexOrNull(topBar.borderColor);
   // An explicit colour drives BOTH slots; only the unset case splits.
   const authored = hexOrNull(topBar.textColor);
   return {
@@ -315,13 +315,10 @@ export function resolveTopBarTokens(theme) {
       topBar.activeColor,
       hexOr(sidebarBlock(config).activeColor, brandPrimary(config)),
     ),
-    borderColor,
-    borderWidth: borderColor ? borderWidthOr(topBar.borderWidth) : null,
     // REQ-NAV-STRUCTURE: how the tab row marks its current page.
     // `underline` keeps the tab in the bar's surface and marks it with an
     // indicator. `attached` makes it a real folder tab: it takes the CONTENT's
-    // surface and sits over the row's divider, so the tab and the page beneath
-    // read as one plane. Meaningless on a shape that draws no tab row — a host
+    // surface and meets the page beneath it, so the two read as one plane. Meaningless on a shape that draws no tab row — a host
     // reads it only where it has tabs to draw.
     tabStyle: topBar.tabStyle === "attached" ? "attached" : "underline",
     // The surface an `attached` tab AND its content panel share. One value for

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.131.0",
+  "version": "0.133.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",