@colixsystems/widget-sdk 0.233.0 → 0.234.0

package/README.md

@@ -84,7 +84,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.233.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.234.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.234.0 (contract 1.189.0)
+
+**The space around a bottom bar's tabs is the author's (host side only).** `resolveFooterTokens` from `@colixsystems/widget-sdk/host` now also resolves `padding`, 0–12px with a default of 4: the bar is its 40px tabs plus that space above and below, so 48px by default (it was a fixed 56) and 40px at zero. A floating bar's `itemRadius` follows the curve one padding in. `FOOTER_SIZES.padding` carries the bound. Nothing a widget imports changes.
 
 ### What's new in 0.233.0 (contract 1.188.0)
 

package/dist/contract.cjs

@@ -6046,7 +6046,10 @@ const CONTRACT = deepFreeze({
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
   // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
   //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
-  version: "1.188.0",
+  // 1.189.0: additive (sc-11703) — `resolveFooterTokens` gains `padding`,
+  //    the space around a bottom bar's tabs (0–12, default 4); `FOOTER_SIZES`
+  //    gains its bound.
+  version: "1.189.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -6042,7 +6042,10 @@ const CONTRACT = deepFreeze({
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
   // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
   //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
-  version: "1.188.0",
+  // 1.189.0: additive (sc-11703) — `resolveFooterTokens` gains `padding`,
+  //    the space around a bottom bar's tabs (0–12, default 4); `FOOTER_SIZES`
+  //    gains its bound.
+  version: "1.189.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/host.d.ts

@@ -275,9 +275,11 @@ export interface FooterTokens {
   shape: "floating" | "docked";
   /** A floating bar's corner radius, px (0–40). */
   radius: number;
-  /** A tab's corner radius, px: a floating bar's curve one row inset in
+  /** A tab's corner radius, px: a floating bar's curve one padding in
    *  (min 6) for a filled tab; 6 for an accent tab or a docked bar. */
   itemRadius: number;
+  /** sc-11703: the space around the tabs, px (0–12, default 4). */
+  padding: number;
   /** A floating bar's distance from the screen's sides, px (0–48). */
   sideMargin: number;
   /** Space below the tabs, px (0–32), on top of the system's clearance. */
@@ -286,14 +288,14 @@ export interface FooterTokens {
 
 /** sc-11678: each bar measurement's upper bound and default, px (min 0). */
 export const FOOTER_SIZES: Readonly<
-  Record<"radius" | "sideMargin" | "bottomSpacing", Readonly<{ max: number; fallback: number }>>
+  Record<"radius" | "sideMargin" | "bottomSpacing" | "padding", Readonly<{ max: number; fallback: number }>>
 >;
 
 /** sc-11678: one bar measurement clamped onto its `FOOTER_SIZES` range, or
  *  `undefined` when the value is not a finite number. */
 export function clampFooterSize(
   value: unknown,
-  key: "radius" | "sideMargin" | "bottomSpacing",
+  key: "radius" | "sideMargin" | "bottomSpacing" | "padding",
 ): number | undefined;
 
 /** sc-11678: the part of the iOS bottom inset a bar keeps clear (the home

package/dist/navigation.cjs

@@ -87,7 +87,7 @@ function menuItemCap(menuType) {
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
 // `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
-// and (sc-11692) `glass`.
+// (sc-11692) `glass` and (sc-11703) `padding`.
 function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -106,6 +106,7 @@ function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  const padding = footerSizeOr(footer, "padding");
   const backgroundColor = hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE);
   // sc-11692: frosted unless switched off; only a floating bar has a page
   // behind it to frost.
@@ -141,11 +142,12 @@ function resolveFooterTokens(theme) {
     // sc-11678: unset floats, so every app gets the rounded, inset bar.
     shape: floats ? "floating" : "docked",
     radius,
-    // A filled tab follows a floating bar's curve one row inset (8px) in,
-    // never sharper than the docked 6px chip. An accent tab paints no surface,
+    // A filled tab follows a floating bar's curve one padding in, never
+    // sharper than the docked 6px chip. An accent tab paints no surface,
     // and a curved top edge would bend its marker into an arc.
     itemRadius:
-      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - 8) : DOCKED_TAB_RADIUS,
+      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - padding) : DOCKED_TAB_RADIUS,
+    padding,
     sideMargin: footerSizeOr(footer, "sideMargin"),
     bottomSpacing: footerSizeOr(footer, "bottomSpacing"),
   };
@@ -157,6 +159,8 @@ const FOOTER_SIZES = Object.freeze({
   radius: Object.freeze({ max: 40, fallback: 28 }),
   sideMargin: Object.freeze({ max: 48, fallback: 12 }),
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
+  // sc-11703: the space around the tabs; 4 makes a 48pt bar (40pt tabs).
+  padding: Object.freeze({ max: 12, fallback: 4 }),
 });
 const DOCKED_TAB_RADIUS = 6;
 

package/dist/navigation.js

@@ -78,7 +78,7 @@ export function menuItemCap(menuType) {
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
 // `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
-// and (sc-11692) `glass`.
+// (sc-11692) `glass` and (sc-11703) `padding`.
 export function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -97,6 +97,7 @@ export function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  const padding = footerSizeOr(footer, "padding");
   const backgroundColor = hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE);
   // sc-11692: frosted unless switched off; only a floating bar has a page
   // behind it to frost.
@@ -132,11 +133,12 @@ export function resolveFooterTokens(theme) {
     // sc-11678: unset floats, so every app gets the rounded, inset bar.
     shape: floats ? "floating" : "docked",
     radius,
-    // A filled tab follows a floating bar's curve one row inset (8px) in,
-    // never sharper than the docked 6px chip. An accent tab paints no surface,
+    // A filled tab follows a floating bar's curve one padding in, never
+    // sharper than the docked 6px chip. An accent tab paints no surface,
     // and a curved top edge would bend its marker into an arc.
     itemRadius:
-      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - 8) : DOCKED_TAB_RADIUS,
+      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - padding) : DOCKED_TAB_RADIUS,
+    padding,
     sideMargin: footerSizeOr(footer, "sideMargin"),
     bottomSpacing: footerSizeOr(footer, "bottomSpacing"),
   };
@@ -148,6 +150,8 @@ export const FOOTER_SIZES = Object.freeze({
   radius: Object.freeze({ max: 40, fallback: 28 }),
   sideMargin: Object.freeze({ max: 48, fallback: 12 }),
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
+  // sc-11703: the space around the tabs; 4 makes a 48pt bar (40pt tabs).
+  padding: Object.freeze({ max: 12, fallback: 4 }),
 });
 const DOCKED_TAB_RADIUS = 6;
 

package/package.json

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

package/src/contract.js

@@ -6042,7 +6042,10 @@ const CONTRACT = deepFreeze({
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
   // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
   //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
-  version: "1.188.0",
+  // 1.189.0: additive (sc-11703) — `resolveFooterTokens` gains `padding`,
+  //    the space around a bottom bar's tabs (0–12, default 4); `FOOTER_SIZES`
+  //    gains its bound.
+  version: "1.189.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,