@colixsystems/widget-sdk 0.232.0 → 0.234.0

package/README.md

@@ -84,7 +84,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.232.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)
+
+**A floating bottom navigation bar is frosted glass by default (host side only).** `resolveFooterTokens` from `@colixsystems/widget-sdk/host` now also resolves `glass`, true for a floating bar unless the theme's `footer.glass` is `false` (a docked bar is never frosted, as nothing scrolls behind it), and `glassTint`, the 8-digit hex surface laid over the blur: the bar's `backgroundColor` at 72%, or its own alpha when it already has one. Nothing a widget imports changes.
 
 ### What's new in 0.232.0 (contract 1.187.0)
 

package/dist/contract.cjs

@@ -6044,7 +6044,12 @@ const CONTRACT = deepFreeze({
   //    bar's `shape` (unset floats), `radius`, `itemRadius`, `sideMargin` and
   //    `bottomSpacing`; host exports `FOOTER_SIZES`, `clampFooterSize` and
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
-  version: "1.187.0",
+  // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
+  //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
+  // 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

@@ -6040,7 +6040,12 @@ const CONTRACT = deepFreeze({
   //    bar's `shape` (unset floats), `radius`, `itemRadius`, `sideMargin` and
   //    `bottomSpacing`; host exports `FOOTER_SIZES`, `clampFooterSize` and
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
-  version: "1.187.0",
+  // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
+  //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
+  // 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

@@ -265,14 +265,21 @@ export interface FooterTokens {
   /** The active tab's surface, or `null` for none — which is what "accent"
    *  resolves to unless the author names one. */
   activeSurface: string | null;
+  /** sc-11692: a floating bar's frosted glass, on unless `glass: false`. */
+  glass: boolean;
+  /** The see-through surface laid over the blur (8-digit hex), or `null`
+   *  when the bar is not frosted. */
+  glassTint: string | null;
   /** sc-11678: a rounded bar inset from the screen's sides, the page showing
    *  around and beneath it, or the edge-to-edge strip. Unset is "floating". */
   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. */
@@ -281,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

@@ -86,7 +86,8 @@ function menuItemCap(menuType) {
 // The authorable keys are the controls the Design panel offers, one for one:
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
-// `tabLayout`, and (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`.
+// `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
+// (sc-11692) `glass` and (sc-11703) `padding`.
 function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -105,8 +106,16 @@ 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.
+  const glass = floats && footer.glass !== false;
   return {
-    backgroundColor: hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE),
+    backgroundColor,
+    glass,
+    // The surface over the blur: the bar's colour, see-through.
+    glassTint: glass ? translucentHex(backgroundColor) : null,
     textColor: hexOr(footer.textColor, DEFAULT_CHROME_TEXT),
     borderColor: divider ? borderColor : null,
     borderWidth: divider ? borderWidth : null,
@@ -133,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"),
   };
@@ -149,8 +159,20 @@ 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;
+
+// sc-11692: a colour that already carries its own alpha keeps it; an opaque
+// one is laid over the blur at 72%.
+const GLASS_TINT_ALPHA = "b8";
+function translucentHex(hex) {
+  const digits = hex.slice(1);
+  if (digits.length === 8) return hex;
+  const six = digits.length === 3 ? digits.replace(/./g, (d) => d + d) : digits;
+  return `#${six}${GLASS_TINT_ALPHA}`;
+}
 function clampFooterSize(value, key) {
   if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
   return Math.min(Math.max(Math.round(value), 0), FOOTER_SIZES[key].max);

package/dist/navigation.js

@@ -77,7 +77,8 @@ export function menuItemCap(menuType) {
 // The authorable keys are the controls the Design panel offers, one for one:
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
-// `tabLayout`, and (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`.
+// `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
+// (sc-11692) `glass` and (sc-11703) `padding`.
 export function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -96,8 +97,16 @@ 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.
+  const glass = floats && footer.glass !== false;
   return {
-    backgroundColor: hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE),
+    backgroundColor,
+    glass,
+    // The surface over the blur: the bar's colour, see-through.
+    glassTint: glass ? translucentHex(backgroundColor) : null,
     textColor: hexOr(footer.textColor, DEFAULT_CHROME_TEXT),
     borderColor: divider ? borderColor : null,
     borderWidth: divider ? borderWidth : null,
@@ -124,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"),
   };
@@ -140,8 +150,20 @@ 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;
+
+// sc-11692: a colour that already carries its own alpha keeps it; an opaque
+// one is laid over the blur at 72%.
+const GLASS_TINT_ALPHA = "b8";
+function translucentHex(hex) {
+  const digits = hex.slice(1);
+  if (digits.length === 8) return hex;
+  const six = digits.length === 3 ? digits.replace(/./g, (d) => d + d) : digits;
+  return `#${six}${GLASS_TINT_ALPHA}`;
+}
 export function clampFooterSize(value, key) {
   if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
   return Math.min(Math.max(Math.round(value), 0), FOOTER_SIZES[key].max);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.232.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

@@ -6040,7 +6040,12 @@ const CONTRACT = deepFreeze({
   //    bar's `shape` (unset floats), `radius`, `itemRadius`, `sideMargin` and
   //    `bottomSpacing`; host exports `FOOTER_SIZES`, `clampFooterSize` and
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
-  version: "1.187.0",
+  // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
+  //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
+  // 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,