@colixsystems/widget-sdk 0.232.0 → 0.233.0

package/README.md

@@ -84,7 +84,11 @@ 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.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**.
+
+### 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,9 @@ 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`.
+  version: "1.188.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -6040,7 +6040,9 @@ 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`.
+  version: "1.188.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/host.d.ts

@@ -265,6 +265,11 @@ 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";

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`
+// and (sc-11692) `glass`.
 function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -105,8 +106,15 @@ function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  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,
@@ -151,6 +159,16 @@ const FOOTER_SIZES = Object.freeze({
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
 });
 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`
+// and (sc-11692) `glass`.
 export function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -96,8 +97,15 @@ export function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  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,
@@ -142,6 +150,16 @@ export const FOOTER_SIZES = Object.freeze({
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
 });
 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.233.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,9 @@ 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`.
+  version: "1.188.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,