@colixsystems/widget-sdk 0.164.0 → 0.165.0

package/README.md

@@ -73,7 +73,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.164.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.165.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.165.0 (contract 1.127.0 — unchanged)
+
+**`no-hardcoded-design` flags a literal corner radius.** A radius is the app's shape: `theme.radii`, Theme Settings and the SDK's `Card` / `Button` / `ListRow` / `Tabs` all carry it, so a `borderRadius: 12` pinned in a widget is exactly where two widgets in one app stop matching. The rule now warns on a literal non-zero radius on any corner spelling; read it from `theme.radii.*` or a style field, or draw the surface with the SDK component. A computed radius (`size / 2` for a circle) and `0` are not flagged, and `// appstudio-design-ok: <reason>` licenses a genuine exception. Still a warning for a human author; like every linter finding it blocks the AI widget agent's publish, which is how generated widgets are held to it.
 
 ### What's new in 0.164.0 (contract 1.127.0)
 
@@ -827,7 +831,7 @@ Additive — one new hook, one new optional context-slice member; no existing ex
 
 **Two linter rules make the styling contract checkable, and `lintStyleWiring` joins the linter export (sc-6455).** Every visual value a widget writes reaches the app's owner through one of exactly two channels — a **theme token** (`useTheme()`), which is the app-wide default and follows a look change, or a **`styleSchema` field** read off `props.style`, which the Studio offers per instance in the widget editor *and* app-wide under **Design → Widget appearance**. A literal reaches neither: it outranks the theme permanently and no control on either surface can move it, so the owner finds a corner of their app they cannot restyle. Until now that rule was documentation only.
 
-- **`no-hardcoded-design`** flags a colour literal (`#rgb` / `#rrggbb` / `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()`), a `fontFamily` string literal, or a numeric `fontSize`. A `fontSize` resolved off a theme token or a style field (`style.valueSize ?? 18`) is *not* flagged — a literal `default` beside a declared field is the contract working. Raw `padding` / `margin` / `borderRadius` numbers are deliberately out of scope: measured layout legitimately carries them, so a spacing rule would be noise.
+- **`no-hardcoded-design`** flags a colour literal (`#rgb` / `#rrggbb` / `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()`), a `fontFamily` string literal, a numeric `fontSize`, or (since 0.165.0) a literal non-zero corner radius (`borderRadius: 12`, any per-corner spelling). A `fontSize` resolved off a theme token or a style field (`style.valueSize ?? 18`) is *not* flagged — a literal `default` beside a declared field is the contract working — and neither is a computed radius (`size / 2`) or `0`. Raw `padding` / `margin` numbers are deliberately out of scope: measured layout legitimately carries them, so a spacing rule would be noise.
 - **`style-field-unread`** flags a `styleSchema` field whose name appears nowhere in the widget's source — a dead control the author moves to no effect. It runs over the WHOLE bundle, not per file, so a split-impl widget that reads a field in `widget.web.jsx` and not in `widget.native.jsx` is correctly counted as wired.
 
 A value that genuinely cannot be a token — a categorical series palette, a video letterbox, a scannable QR plate — is licensed with a preceding comment. **The reason is mandatory**; a bare marker licenses nothing. A marker on its own line covers the whole statement below it (bracket-balanced, so one marker covers a multi-line palette); a trailing marker covers only its own line.

package/dist/linter.cjs

@@ -1337,16 +1337,20 @@ function narrowManifestForFile(manifest, filename) {
 // colour or font pinned in the source outranks BOTH permanently, so neither
 // the workspace theme nor Design -> Widget appearance can ever reach it.
 //
-// Deliberately narrow: colour literals, a `fontFamily` string, and a bare
-// numeric `fontSize`. Raw padding/margin/borderRadius numbers are NOT flagged
-// — measured layout legitimately carries them (a `flexBasis` cell width the
-// designer skill itself teaches), so a spacing rule would be noise that
-// devalues the three unambiguous ones.
+// Deliberately narrow: colour literals, a `fontFamily` string, a bare numeric
+// `fontSize`, and a literal non-zero corner radius. A radius is the app's
+// shape — `theme.radii`, Theme Settings, the SDK components all carry it — so
+// a pinned one is the mismatch between two widgets. Raw padding/margin numbers
+// are NOT flagged: measured layout legitimately carries them (a `flexBasis`
+// cell width the designer skill itself teaches), and a computed radius
+// (`size / 2`, a circle) is geometry, not a look.
 const _DESIGN_HEX_RE =
   /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})(?![0-9a-fA-F])/;
 const _DESIGN_FUNC_COLOR_RE = /\b(?:rgba?|hsla?)\s*\(/;
 const _DESIGN_FONT_FAMILY_RE = /\bfontFamily\s*:\s*["'`]\s*\S/;
 const _DESIGN_FONT_SIZE_RE = /\bfontSize\s*:\s*-?\d/;
+const _DESIGN_RADIUS_RE =
+  /\bborder(?:Top|Bottom|Start|End)?(?:Left|Right|Start|End)?Radius\s*:\s*(?:0*[1-9]\d*(?:\.\d+)?|0\.\d*[1-9]\d*)\s*(?=[,}]|$)/;
 // A line that already reads the theme or the author's style object is
 // resolving a DECLARED fallback, not pinning a look — `style.valueSize ?? 18`
 // is exactly what a styleSchema `default` is for. Colour literals are held to
@@ -1411,6 +1415,8 @@ function _hardcodedDesignRules(source) {
       !_DESIGN_TOKEN_REF_RE.test(line)
     ) {
       what = "a pixel font size";
+    } else if (_DESIGN_RADIUS_RE.test(line)) {
+      what = "a pixel corner radius";
     }
     if (!what) continue;
     findings.push({
@@ -1419,7 +1425,8 @@ function _hardcodedDesignRules(source) {
       label:
         `${what} pinned in the source is beyond the reach of BOTH the ` +
         `workspace theme and the author's Style controls. Read it from ` +
-        `useTheme() (theme.colors.* / theme.typography.*), or declare a ` +
+        `useTheme() (theme.colors.* / theme.typography.* / theme.radii.*), ` +
+        `use the SDK's <Card> / <Button> / <ListRow>, or declare a ` +
         `styleSchema field and apply props.style.<field>. License a value ` +
         `that truly cannot be a token — a series palette, a video ` +
         `letterbox, a QR plate — with a preceding ` +

package/dist/linter.js

@@ -1408,16 +1408,20 @@ export function narrowManifestForFile(manifest, filename) {
 // colour or font pinned in the source outranks BOTH permanently, so neither
 // the workspace theme nor Design -> Widget appearance can ever reach it.
 //
-// Deliberately narrow: colour literals, a `fontFamily` string, and a bare
-// numeric `fontSize`. Raw padding/margin/borderRadius numbers are NOT flagged
-// — measured layout legitimately carries them (a `flexBasis` cell width the
-// designer skill itself teaches), so a spacing rule would be noise that
-// devalues the three unambiguous ones.
+// Deliberately narrow: colour literals, a `fontFamily` string, a bare numeric
+// `fontSize`, and a literal non-zero corner radius. A radius is the app's
+// shape — `theme.radii`, Theme Settings, the SDK components all carry it — so
+// a pinned one is the mismatch between two widgets. Raw padding/margin numbers
+// are NOT flagged: measured layout legitimately carries them (a `flexBasis`
+// cell width the designer skill itself teaches), and a computed radius
+// (`size / 2`, a circle) is geometry, not a look.
 const _DESIGN_HEX_RE =
   /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})(?![0-9a-fA-F])/;
 const _DESIGN_FUNC_COLOR_RE = /\b(?:rgba?|hsla?)\s*\(/;
 const _DESIGN_FONT_FAMILY_RE = /\bfontFamily\s*:\s*["'`]\s*\S/;
 const _DESIGN_FONT_SIZE_RE = /\bfontSize\s*:\s*-?\d/;
+const _DESIGN_RADIUS_RE =
+  /\bborder(?:Top|Bottom|Start|End)?(?:Left|Right|Start|End)?Radius\s*:\s*(?:0*[1-9]\d*(?:\.\d+)?|0\.\d*[1-9]\d*)\s*(?=[,}]|$)/;
 // A line that already reads the theme or the author's style object is
 // resolving a DECLARED fallback, not pinning a look — `style.valueSize ?? 18`
 // is exactly what a styleSchema `default` is for. Colour literals are held to
@@ -1482,6 +1486,8 @@ function _hardcodedDesignRules(source) {
       !_DESIGN_TOKEN_REF_RE.test(line)
     ) {
       what = "a pixel font size";
+    } else if (_DESIGN_RADIUS_RE.test(line)) {
+      what = "a pixel corner radius";
     }
     if (!what) continue;
     findings.push({
@@ -1490,7 +1496,8 @@ function _hardcodedDesignRules(source) {
       label:
         `${what} pinned in the source is beyond the reach of BOTH the ` +
         `workspace theme and the author's Style controls. Read it from ` +
-        `useTheme() (theme.colors.* / theme.typography.*), or declare a ` +
+        `useTheme() (theme.colors.* / theme.typography.* / theme.radii.*), ` +
+        `use the SDK's <Card> / <Button> / <ListRow>, or declare a ` +
         `styleSchema field and apply props.style.<field>. License a value ` +
         `that truly cannot be a token — a series palette, a video ` +
         `letterbox, a QR plate — with a preceding ` +

package/package.json

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