@colixsystems/widget-sdk 0.157.0 → 0.158.0

package/README.md

@@ -119,7 +119,7 @@ Behaviour: a bare date given to a `mode="datetime"` picker now shows local midni
 
 **The app header's row is arrangeable, and `./host` publishes the resolver both hosts read (sc-8023).** The row runs across the top of the content outside the side panel, and is drawn three times — as the phone header where the panel is a drawer, as the desktop strip, and as the full-width bar when one is switched on. Each surface hard-coded its own copy of it, so an author could colour the row but never move anything in it.
 
-- **`resolveTopStripeLayout(theme)`** reads `theme.sidebar.stripe` and returns the arrangement fully resolved: `slots` (already filtered and sequenced, so no host re-derives it), `order`, the box (`height`, `paddingX`, `contentOffsetY`), the resolved `backgroundColor` (joined in 0.155.0 by `tintColor` and `titleColor`), and `menuSide` — which edge the drawer must arrive from, since the brand grows and a burger ordered after it sits at the trailing edge. The web Player picks the drawer's side with it; the export makes it `drawerPosition`.
+- **`resolveTopStripeLayout(theme)`** reads `theme.sidebar.stripe` and returns the arrangement fully resolved: `slots` (already filtered and sequenced, so no host re-derives it), `order`, the box (`height`, `paddingX`, `contentOffsetY`, and `barHeight` — the height once the nudge is held, since pushing the contents down grows the bar rather than letting them fall out of it), the resolved `backgroundColor` (joined in 0.155.0 by `tintColor` and `titleColor`), and `menuSide` — which edge the drawer must arrive from, since the brand grows and a burger ordered after it sits at the trailing edge. The web Player picks the drawer's side with it; the export makes it `drawerPosition`.
 - **`TOP_STRIPE_SLOTS`** is the vocabulary (`back`, `menu`, `brand`, `notifications`) and **`TOP_STRIPE_ALWAYS_SHOWN_SLOTS`** the slots that move but never hide. The burger is the only member: it is drawn only where the panel is a drawer, and there it is the sole route into the menu, so hiding it would strand the visitor. It keeps its place in `order` regardless.
 - **`topStripeShowKey(slot)`** derives the `theme_config` key that shows or hides one slot, in one place, so a control, the write path and the resolver cannot spell it differently.
 - **The bounds travel with the resolver** — `MIN`/`MAX_TOP_STRIPE_HEIGHT_PX`, `MIN`/`MAX_TOP_STRIPE_PADDING_X_PX`, `MAX_TOP_STRIPE_OFFSET_Y_PX` — so a control offers exactly the range the resolver clamps to. `DEFAULT_TOP_STRIPE_HEIGHT_PX` / `DEFAULT_TOP_STRIPE_PADDING_X_PX` are what the DESKTOP row measures with nothing stored, published so a control can show the number an author is departing from; the resolver still answers `null`, because each surface keeps its own box until one is named.

package/dist/host.d.ts

@@ -332,8 +332,12 @@ export interface TopStripeLayout {
    *  bar's 64px, the phone header's content-sized row. */
   height: number | null;
   paddingX: number | null;
-  /** How far the row is pushed down, 0-60px. */
+  /** How far the row's contents are pushed down, 0-60px. */
   contentOffsetY: number;
+  /** The bar's total height once the nudge is held — its box plus
+   *  `contentOffsetY`, so contents never fall out of the bottom. Null only
+   *  while both are unset, where each surface keeps its own box. */
+  barHeight: number | null;
   /** Every slot in the author's sequence, hidden ones included. */
   order: TopStripeSlot[];
   /** What the bar actually SHOWS, already filtered and sequenced. A surface

package/dist/navigation.cjs

@@ -405,6 +405,7 @@ function topStripeOrder(value) {
  * @param {unknown} theme — the whole `theme_config`.
  * @returns {{ backgroundColor: string, tintColor: string, titleColor: string,
  *   height: number|null, paddingX: number|null, contentOffsetY: number,
+ *   barHeight: number|null,
  *   order: string[], slots: string[], menuSide: "start"|"end" }}
  */
 function resolveTopStripeLayout(theme) {
@@ -422,30 +423,40 @@ function resolveTopStripeLayout(theme) {
       : TOP_STRIPE_SLOT_SHOWN_BY_DEFAULT[slot];
   };
   const slots = order.filter(shown);
+  // Unset defers to each surface's own box — the desktop bar's fixed 64px, the
+  // phone header's content-sized row.
+  const height = topStripeClampedOr(
+    stripe.height,
+    MIN_TOP_STRIPE_HEIGHT_PX,
+    MAX_TOP_STRIPE_HEIGHT_PX,
+    null,
+  );
+  const contentOffsetY = topStripeClampedOr(
+    stripe.contentOffsetY,
+    0,
+    MAX_TOP_STRIPE_OFFSET_Y_PX,
+    0,
+  );
   return {
     // There is no alignment to resolve: the brand slot GROWS, so the row has no
     // free space for `justify-content` to distribute and every value looked
     // identical. The row spreads because the brand takes the slack.
-    // Unset defers to each surface's own box — the desktop bar's fixed 64px,
-    // the phone header's content-sized row.
-    height: topStripeClampedOr(
-      stripe.height,
-      MIN_TOP_STRIPE_HEIGHT_PX,
-      MAX_TOP_STRIPE_HEIGHT_PX,
-      null,
-    ),
+    height,
     paddingX: topStripeClampedOr(
       stripe.paddingX,
       MIN_TOP_STRIPE_PADDING_X_PX,
       MAX_TOP_STRIPE_PADDING_X_PX,
       null,
     ),
-    contentOffsetY: topStripeClampedOr(
-      stripe.contentOffsetY,
-      0,
-      MAX_TOP_STRIPE_OFFSET_Y_PX,
-      0,
-    ),
+    contentOffsetY,
+    // sc-8552: the bar GROWS by the nudge rather than letting its contents fall
+    // out of the bottom — the box the author sized, plus what they pushed into
+    // it. For a surface that must state a height (the desktop bar, the native
+    // header); the phone row is content-sized and grows on its padding alone.
+    barHeight:
+      height === null && contentOffsetY === 0
+        ? null
+        : (height ?? DEFAULT_TOP_STRIPE_HEIGHT_PX) + contentOffsetY,
     // sc-8023: the stripe's OWN surface, inheriting the app-header colour when
     // unset — so an untouched app is unmoved, and an author who dresses a
     // page's top navigation bar no longer repaints the stripe above the panel by

package/dist/navigation.js

@@ -396,6 +396,7 @@ function topStripeOrder(value) {
  * @param {unknown} theme — the whole `theme_config`.
  * @returns {{ backgroundColor: string, tintColor: string, titleColor: string,
  *   height: number|null, paddingX: number|null, contentOffsetY: number,
+ *   barHeight: number|null,
  *   order: string[], slots: string[], menuSide: "start"|"end" }}
  */
 export function resolveTopStripeLayout(theme) {
@@ -413,30 +414,40 @@ export function resolveTopStripeLayout(theme) {
       : TOP_STRIPE_SLOT_SHOWN_BY_DEFAULT[slot];
   };
   const slots = order.filter(shown);
+  // Unset defers to each surface's own box — the desktop bar's fixed 64px, the
+  // phone header's content-sized row.
+  const height = topStripeClampedOr(
+    stripe.height,
+    MIN_TOP_STRIPE_HEIGHT_PX,
+    MAX_TOP_STRIPE_HEIGHT_PX,
+    null,
+  );
+  const contentOffsetY = topStripeClampedOr(
+    stripe.contentOffsetY,
+    0,
+    MAX_TOP_STRIPE_OFFSET_Y_PX,
+    0,
+  );
   return {
     // There is no alignment to resolve: the brand slot GROWS, so the row has no
     // free space for `justify-content` to distribute and every value looked
     // identical. The row spreads because the brand takes the slack.
-    // Unset defers to each surface's own box — the desktop bar's fixed 64px,
-    // the phone header's content-sized row.
-    height: topStripeClampedOr(
-      stripe.height,
-      MIN_TOP_STRIPE_HEIGHT_PX,
-      MAX_TOP_STRIPE_HEIGHT_PX,
-      null,
-    ),
+    height,
     paddingX: topStripeClampedOr(
       stripe.paddingX,
       MIN_TOP_STRIPE_PADDING_X_PX,
       MAX_TOP_STRIPE_PADDING_X_PX,
       null,
     ),
-    contentOffsetY: topStripeClampedOr(
-      stripe.contentOffsetY,
-      0,
-      MAX_TOP_STRIPE_OFFSET_Y_PX,
-      0,
-    ),
+    contentOffsetY,
+    // sc-8552: the bar GROWS by the nudge rather than letting its contents fall
+    // out of the bottom — the box the author sized, plus what they pushed into
+    // it. For a surface that must state a height (the desktop bar, the native
+    // header); the phone row is content-sized and grows on its padding alone.
+    barHeight:
+      height === null && contentOffsetY === 0
+        ? null
+        : (height ?? DEFAULT_TOP_STRIPE_HEIGHT_PX) + contentOffsetY,
     // sc-8023: the stripe's OWN surface, inheriting the app-header colour when
     // unset — so an untouched app is unmoved, and an author who dresses a
     // page's top navigation bar no longer repaints the stripe above the panel by

package/package.json

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