@colixsystems/widget-sdk 0.183.0 → 0.184.0

package/README.md

@@ -74,7 +74,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.183.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.184.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.184.0 (contract 1.145.0)
+
+**A page's top navigation bar can put its tabs on the left, in the centre or on the right.** The tab row always started at the left edge, which looks wrong under a centred or right-aligned brand. `resolveTopBarTokens` now returns **`tabAlignment`** (`"left"` | `"center"` | `"right"`), read from `theme_config.topBar.tabAlignment`; anything else, including unset, resolves to `"left"`, so an app that never chose is unchanged. It also returns **`tabRowWidth`** (`"full"` | `"content"`, default `"full"`): the column the tabs sit in. `content` gives the tabs the page content's width and inset, so they line up with it, while the bar's own surface still spans the full width. Both hosts place the tabs with flexible spacers either side rather than by centring the row, so a row with more tabs than fit still scrolls sideways from its first tab instead of cutting it off. Host-integration surface only — no author-facing hook, prop, primitive, or manifest field changed.
 
 ### What's new in 0.183.0 (contract 1.144.0)
 

package/dist/contract.cjs

@@ -4803,7 +4803,11 @@ const CONTRACT = deepFreeze({
   //    `send_invitation`; `false` stores the invite unsent. Invite rows gain
   //    `sent_at` and the `not_sent` status, and `useInvites().resend` is its
   //    first send. Omitting the flag emails at once, as before.
-  version: "1.144.0",
+  // 1.145.0: additive (sc-10123) — `resolveTopBarTokens` returns
+  //    `tabAlignment` ("left" | "center" | "right"), where a local top bar's
+  //    tabs sit across the row, and `tabRowWidth` ("full" | "content"), the
+  //    column they sit in. Unset resolves to "left" / "full", as before.
+  version: "1.145.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -4799,7 +4799,11 @@ const CONTRACT = deepFreeze({
   //    `send_invitation`; `false` stores the invite unsent. Invite rows gain
   //    `sent_at` and the `not_sent` status, and `useInvites().resend` is its
   //    first send. Omitting the flag emails at once, as before.
-  version: "1.144.0",
+  // 1.145.0: additive (sc-10123) — `resolveTopBarTokens` returns
+  //    `tabAlignment` ("left" | "center" | "right"), where a local top bar's
+  //    tabs sit across the row, and `tabRowWidth` ("full" | "content"), the
+  //    column they sit in. Unset resolves to "left" / "full", as before.
+  version: "1.145.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/host.d.ts

@@ -291,6 +291,11 @@ export interface TopBarTokens {
    *  bar's surface behind an indicator; `attached` cuts the bar away under the
    *  current tab so the page shows through it. */
   tabStyle: "underline" | "attached";
+  /** Where the row's tabs sit across its width; `left` unless authored. */
+  tabAlignment: "left" | "center" | "right";
+  /** The column the tabs sit in: the whole bar, or the page content's. The
+   *  bar's surface spans the full width either way. */
+  tabRowWidth: "full" | "content";
   /** Under `attached`, the colour the PANEL behind the row paints — the
    *  authored `tabActiveBackgroundColor`, alpha kept — or null for the page's
    *  own wash. The current tab paints nothing itself. */

package/dist/navigation.cjs

@@ -535,6 +535,9 @@ function resolveTopStripeLayout(theme) {
   };
 }
 
+const TAB_ALIGNMENTS = ["left", "center", "right"];
+const TAB_ROW_WIDTHS = ["full", "content"];
+
 function resolveTopBarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const topBar = isPlainObject(config.topBar) ? config.topBar : {};
@@ -566,6 +569,18 @@ function resolveTopBarTokens(theme) {
     // 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",
+    // sc-10123: where the row's tabs sit across its width. Both hosts place
+    // them with flexible spacers rather than centring the row, so a row that
+    // overflows still scrolls from its first tab instead of clipping it.
+    tabAlignment: TAB_ALIGNMENTS.includes(topBar.tabAlignment)
+      ? topBar.tabAlignment
+      : "left",
+    // sc-10123: the column the tabs sit in. `full` spans the bar; `content`
+    // shares the page content's width and inset, so the tabs line up with it.
+    // The bar's surface always spans.
+    tabRowWidth: TAB_ROW_WIDTHS.includes(topBar.tabRowWidth)
+      ? topBar.tabRowWidth
+      : "full",
     // The surface the PANEL behind an `attached` row paints — the authored
     // active colour, alpha and all, or nothing. Under `attached` the current
     // tab itself paints NOTHING: it is a hole in the bar, and what shows

package/dist/navigation.js

@@ -526,6 +526,9 @@ export function resolveTopStripeLayout(theme) {
   };
 }
 
+const TAB_ALIGNMENTS = ["left", "center", "right"];
+const TAB_ROW_WIDTHS = ["full", "content"];
+
 export function resolveTopBarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const topBar = isPlainObject(config.topBar) ? config.topBar : {};
@@ -557,6 +560,18 @@ export function resolveTopBarTokens(theme) {
     // 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",
+    // sc-10123: where the row's tabs sit across its width. Both hosts place
+    // them with flexible spacers rather than centring the row, so a row that
+    // overflows still scrolls from its first tab instead of clipping it.
+    tabAlignment: TAB_ALIGNMENTS.includes(topBar.tabAlignment)
+      ? topBar.tabAlignment
+      : "left",
+    // sc-10123: the column the tabs sit in. `full` spans the bar; `content`
+    // shares the page content's width and inset, so the tabs line up with it.
+    // The bar's surface always spans.
+    tabRowWidth: TAB_ROW_WIDTHS.includes(topBar.tabRowWidth)
+      ? topBar.tabRowWidth
+      : "full",
     // The surface the PANEL behind an `attached` row paints — the authored
     // active colour, alpha and all, or nothing. Under `attached` the current
     // tab itself paints NOTHING: it is a hole in the bar, and what shows

package/package.json

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