@colixsystems/widget-sdk 0.117.0 → 0.119.0

package/dist/theme-components.cjs

@@ -245,6 +245,51 @@ function normaliseWidgetStyles(raw) {
   return out;
 }
 
+// Defaults are static manifest config; clone the structured ones so a widget
+// mutating props.style can never corrupt the shared manifest default. Mirrors
+// cloneDefault in property-schema.js.
+function cloneStyleDefault(value) {
+  if (value === null || typeof value !== "object") return value;
+  return JSON.parse(JSON.stringify(value));
+}
+
+// sc-6750: one styleSchema leaf's declared default, with the SAME nesting
+// semantics resolveLeaf (property-schema.js) gives the property side — an
+// `object` def whose own default is absent still contributes its children's.
+function styleLeafDefault(def) {
+  if (!isPlainObject(def)) return undefined;
+  if (def.default !== undefined) return cloneStyleDefault(def.default);
+  if (def.type !== "object" || !isPlainObject(def.properties)) return undefined;
+  const nested = {};
+  for (const [child, childDef] of Object.entries(def.properties)) {
+    if (!isUsableStyleKey(child)) continue;
+    const value = styleLeafDefault(childDef);
+    if (value !== undefined) nested[child] = value;
+  }
+  return Object.keys(nested).length > 0 ? nested : undefined;
+}
+
+/**
+ * sc-6750 — the widget author's OWN declared style baseline: each
+ * `styleSchema` leaf's `default`.
+ *
+ * The weakest layer by design, seeded beneath every theme layer: a widget's
+ * declared default must never out-rank the workspace theme, or every already-
+ * published widget would stop following the theme it follows today.
+ *
+ * @returns {Record<string, unknown>} field → declared default; `{}` when none.
+ */
+function styleSchemaDefaults(styleSchema) {
+  if (!isPlainObject(styleSchema)) return {};
+  const out = {};
+  for (const [field, def] of Object.entries(styleSchema)) {
+    if (!isUsableStyleKey(field)) continue;
+    const value = styleLeafDefault(def);
+    if (value !== undefined) out[field] = value;
+  }
+  return out;
+}
+
 /**
  * The per-component style fields that apply to one widget, keyed by the
  * `styleSchema` field name the widget actually reads. A widget may sit in more
@@ -255,12 +300,19 @@ function normaliseWidgetStyles(raw) {
  * before a value becomes a widget's style, and a host that folded the theme in
  * without normalising must not be able to hand a widget malformed input.
  *
- * @returns {Record<string, string|number>|null} null when nothing applies.
+ * Layered weakest-first: the widget's own `styleSchema` defaults, then the
+ * component scopes, then `widgetStyles[manifestId]`. The caller spreads the
+ * per-instance `props.style` last, so the full order is
+ * styleSchema default -> palette/scopes -> widgetStyles -> props.style.
+ *
+ * @returns {Record<string, unknown>|null} null when nothing applies.
  */
 function componentStyleFor(manifestId, components, styleSchema, widgetStyles) {
   if (typeof manifestId !== "string") return null;
   const validated = normaliseThemeComponents(components);
-  const out = {};
+  // sc-6750: the author's declared defaults are the WEAKEST layer, so they go
+  // in first and every theme layer below overwrites them.
+  const out = styleSchemaDefaults(styleSchema);
   for (const [scope, definition] of Object.entries(CONTRACT.themeComponents)) {
     const tokens = validated[scope];
     if (!tokens) continue;
@@ -305,20 +357,28 @@ function componentStyleFor(manifestId, components, styleSchema, widgetStyles) {
 }
 
 /**
- * Fold the theme's per-component tokens into a widget's props as `style`
- * DEFAULTS. The author's per-instance REQ-THEME-13 values are spread last and
- * therefore always win — the theme token is the app-wide baseline, the
- * Properties Panel is the final word.
+ * Fold the widget's declared `styleSchema` defaults and the theme's
+ * per-component tokens into a widget's props as `style` DEFAULTS. The author's
+ * per-instance REQ-THEME-13 values are spread last and therefore always win —
+ * the theme token is the app-wide baseline, the Properties Panel the final word.
+ *
+ * sc-6750: a `styleSchema` leaf's own `default` is resolved here too, as the
+ * BOTTOM layer. It is the widget author's baseline, so a workspace theme still
+ * out-ranks it and a field the author never defaulted follows the theme exactly
+ * as before — precedence: styleSchema default -> palette/`components.<scope>`
+ * -> `widgetStyles[manifestId]` -> per-instance `props.style`.
  *
- * Returns the SAME `props` reference when the theme sets nothing for this
- * widget, so an unthemed app takes no extra render work and behaves exactly as
- * it did before REQ-THEME-15.
+ * Returns the SAME `props` reference when neither the theme nor the schema sets
+ * anything for this widget, so an unthemed app with no declared style defaults
+ * takes no extra render work and behaves exactly as it did before REQ-THEME-15.
  *
  * @param {string} manifestId — the widget's canonical manifest id.
  * @param {object} theme — the resolved widget theme (`workspace.theme`); its
  *   `components` slice is read.
  * @param {object} props — the widget's resolved props (post-`resolveProps`).
- * @returns {object} props, with `style` folded when the theme applies.
+ * @param {object} [styleSchema] — the widget's declared style fields; their
+ *   `default`s form the bottom style layer.
+ * @returns {object} props, with `style` folded when anything applies.
  */
 function applyThemeComponentStyle(manifestId, theme, props, styleSchema) {
   const themed = componentStyleFor(

package/dist/theme-components.js

@@ -237,6 +237,51 @@ export function normaliseWidgetStyles(raw) {
   return out;
 }
 
+// Defaults are static manifest config; clone the structured ones so a widget
+// mutating props.style can never corrupt the shared manifest default. Mirrors
+// cloneDefault in property-schema.js.
+function cloneStyleDefault(value) {
+  if (value === null || typeof value !== "object") return value;
+  return JSON.parse(JSON.stringify(value));
+}
+
+// sc-6750: one styleSchema leaf's declared default, with the SAME nesting
+// semantics resolveLeaf (property-schema.js) gives the property side — an
+// `object` def whose own default is absent still contributes its children's.
+function styleLeafDefault(def) {
+  if (!isPlainObject(def)) return undefined;
+  if (def.default !== undefined) return cloneStyleDefault(def.default);
+  if (def.type !== "object" || !isPlainObject(def.properties)) return undefined;
+  const nested = {};
+  for (const [child, childDef] of Object.entries(def.properties)) {
+    if (!isUsableStyleKey(child)) continue;
+    const value = styleLeafDefault(childDef);
+    if (value !== undefined) nested[child] = value;
+  }
+  return Object.keys(nested).length > 0 ? nested : undefined;
+}
+
+/**
+ * sc-6750 — the widget author's OWN declared style baseline: each
+ * `styleSchema` leaf's `default`.
+ *
+ * The weakest layer by design, seeded beneath every theme layer: a widget's
+ * declared default must never out-rank the workspace theme, or every already-
+ * published widget would stop following the theme it follows today.
+ *
+ * @returns {Record<string, unknown>} field → declared default; `{}` when none.
+ */
+function styleSchemaDefaults(styleSchema) {
+  if (!isPlainObject(styleSchema)) return {};
+  const out = {};
+  for (const [field, def] of Object.entries(styleSchema)) {
+    if (!isUsableStyleKey(field)) continue;
+    const value = styleLeafDefault(def);
+    if (value !== undefined) out[field] = value;
+  }
+  return out;
+}
+
 /**
  * The per-component style fields that apply to one widget, keyed by the
  * `styleSchema` field name the widget actually reads. A widget may sit in more
@@ -247,12 +292,19 @@ export function normaliseWidgetStyles(raw) {
  * before a value becomes a widget's style, and a host that folded the theme in
  * without normalising must not be able to hand a widget malformed input.
  *
- * @returns {Record<string, string|number>|null} null when nothing applies.
+ * Layered weakest-first: the widget's own `styleSchema` defaults, then the
+ * component scopes, then `widgetStyles[manifestId]`. The caller spreads the
+ * per-instance `props.style` last, so the full order is
+ * styleSchema default -> palette/scopes -> widgetStyles -> props.style.
+ *
+ * @returns {Record<string, unknown>|null} null when nothing applies.
  */
 function componentStyleFor(manifestId, components, styleSchema, widgetStyles) {
   if (typeof manifestId !== "string") return null;
   const validated = normaliseThemeComponents(components);
-  const out = {};
+  // sc-6750: the author's declared defaults are the WEAKEST layer, so they go
+  // in first and every theme layer below overwrites them.
+  const out = styleSchemaDefaults(styleSchema);
   for (const [scope, definition] of Object.entries(CONTRACT.themeComponents)) {
     const tokens = validated[scope];
     if (!tokens) continue;
@@ -297,20 +349,28 @@ function componentStyleFor(manifestId, components, styleSchema, widgetStyles) {
 }
 
 /**
- * Fold the theme's per-component tokens into a widget's props as `style`
- * DEFAULTS. The author's per-instance REQ-THEME-13 values are spread last and
- * therefore always win — the theme token is the app-wide baseline, the
- * Properties Panel is the final word.
+ * Fold the widget's declared `styleSchema` defaults and the theme's
+ * per-component tokens into a widget's props as `style` DEFAULTS. The author's
+ * per-instance REQ-THEME-13 values are spread last and therefore always win —
+ * the theme token is the app-wide baseline, the Properties Panel the final word.
+ *
+ * sc-6750: a `styleSchema` leaf's own `default` is resolved here too, as the
+ * BOTTOM layer. It is the widget author's baseline, so a workspace theme still
+ * out-ranks it and a field the author never defaulted follows the theme exactly
+ * as before — precedence: styleSchema default -> palette/`components.<scope>`
+ * -> `widgetStyles[manifestId]` -> per-instance `props.style`.
  *
- * Returns the SAME `props` reference when the theme sets nothing for this
- * widget, so an unthemed app takes no extra render work and behaves exactly as
- * it did before REQ-THEME-15.
+ * Returns the SAME `props` reference when neither the theme nor the schema sets
+ * anything for this widget, so an unthemed app with no declared style defaults
+ * takes no extra render work and behaves exactly as it did before REQ-THEME-15.
  *
  * @param {string} manifestId — the widget's canonical manifest id.
  * @param {object} theme — the resolved widget theme (`workspace.theme`); its
  *   `components` slice is read.
  * @param {object} props — the widget's resolved props (post-`resolveProps`).
- * @returns {object} props, with `style` folded when the theme applies.
+ * @param {object} [styleSchema] — the widget's declared style fields; their
+ *   `default`s form the bottom style layer.
+ * @returns {object} props, with `style` folded when anything applies.
  */
 export function applyThemeComponentStyle(manifestId, theme, props, styleSchema) {
   const themed = componentStyleFor(

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.117.0",
+  "version": "0.119.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
+  "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -48,7 +49,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/interaction-lift.test.js src/__tests__/toast-host.test.js src/__tests__/overlay-tokens.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-camera.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js"
+    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/flatten-entry.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/interaction-lift.test.js src/__tests__/toast-host.test.js src/__tests__/overlay-tokens.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-camera.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js"
   },
   "engines": {
     "node": ">=18"
@@ -83,5 +84,8 @@
     "sdk",
     "low-code"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/parser": "^7.29.7"
+  }
 }