@gjsify/storybook-nativescript 0.38.1 → 0.40.0

package/lib/types/story-view.d.ts

@@ -7,8 +7,8 @@ export type StoryArgsListener = (args: StoryArgs) => void;
  * Base class for NativeScript story views.
  *
  * Provides default chrome — a clamped boxed group (`AdwClamp` +
- * `AdwPreferencesGroup`) with a title + description above a centered,
- * dashed-framed preview "stage" — built programmatically with the
+ * `AdwPreferencesGroup`) with a title + description above a centered, tinted
+ * preview "stage" — built programmatically with the
  * `@gjsify/adwaita-nativescript` widgets + the Adwaita CSS classes. Simple
  * stories compose their preview by calling {@link addContent}; a subclass that
  * needs a bespoke layout passes its own root view to the constructor (then

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/storybook-nativescript",
-    "version": "0.38.1",
+    "version": "0.40.0",
     "description": "NativeScript renderer for the @gjsify/stories contract — the NS counterpart of @gjsify/storybook (GTK) and @gjsify/adwaita-storybook (browser), built on @gjsify/adwaita-nativescript real native widgets",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -39,12 +39,12 @@
         "gnome"
     ],
     "dependencies": {
-        "@gjsify/adwaita-icons": "^0.38.1",
-        "@gjsify/adwaita-core": "^0.38.1",
-        "@gjsify/adwaita-nativescript": "^0.38.1",
-        "@gjsify/devtools-nativescript": "^0.38.1",
-        "@gjsify/stories": "^0.38.1",
-        "@gjsify/storybook-core": "^0.38.1"
+        "@gjsify/adwaita-icons": "^0.40.0",
+        "@gjsify/adwaita-core": "^0.40.0",
+        "@gjsify/adwaita-nativescript": "^0.40.0",
+        "@gjsify/devtools-nativescript": "^0.40.0",
+        "@gjsify/stories": "^0.40.0",
+        "@gjsify/storybook-core": "^0.40.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -55,8 +55,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.38.1",
-        "@gjsify/unit": "^0.38.1",
+        "@gjsify/cli": "^0.40.0",
+        "@gjsify/unit": "^0.40.0",
         "@nativescript/types": "~9.0.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"

package/src/theme/storybook.css

@@ -108,8 +108,26 @@
 /* ===== Detail area (preview content + right controls overlay) ===== */
 
 .sb-controls-split,
+/* The preview AREA carries the tint, not a box inside it — the stage version floated
+ * in the pane with no edge. On the element that already owns the area's background,
+ * because an opaque background one level in covers a gradient one level out (measured
+ * on the browser target: five sample points across the pane returned the identical
+ * colour while the computed style still reported a background-image).
+ *
+ * The NS subset's two substitutions still hold: one `linear-gradient` per declaration
+ * rather than two radial corners, and the accent spelled out per scheme because there
+ * are no custom properties — so a runtime accent does NOT reach this backdrop here.
+ * Middle stops fade to a zero-alpha COPY of each tint rather than to `transparent`,
+ * which is rgba(0,0,0,0) and pulls a grey through the centre. */
 .sb-preview-scroll {
     background-color: #fafafb;
+    background-image: linear-gradient(
+        135deg,
+        rgba(28, 113, 216, 0.07) 0%,
+        rgba(28, 113, 216, 0) 45%,
+        rgba(146, 110, 228, 0) 55%,
+        rgba(146, 110, 228, 0.06) 100%
+    );
 }
 
 .sb-preview-pane {
@@ -136,15 +154,9 @@
     margin: 3 0 0 0;
 }
 
-/*
- * Centered, dashed-framed preview stage (mirrors the browser .story-stage and
- * the native renderer's .story-stage). NS supports a dashed border style.
- */
+/* Breathing room only. No radius and no surface: nothing here is a box any more —
+ * the tinted area is `.sb-preview-scroll` above. */
 .story-stage {
-    border-width: 1;
-    border-color: rgba(0, 0, 0, 0.28);
-    border-style: dashed;
-    border-radius: 12;
     padding: 18;
     margin: 12 0 0 0;
 }
@@ -217,10 +229,6 @@
     color: rgba(255, 255, 255, 0.55);
 }
 
-.ns-dark .story-stage {
-    border-color: rgba(255, 255, 255, 0.28);
-}
-
 /* ===== Appearance dialog swatches =====
  * Round accent swatches. NS has no radio input and no `:checked`, so selection is a
  * class the dialog maintains and the ring is a border — `border-radius`,
@@ -251,3 +259,22 @@
 .ns-dark .sb-swatch.selected {
     border-color: #ffffff;
 }
+
+/* The preview area's dark tint. Only the accent end changes: it carries the
+ * STANDALONE accent, which libadwaita lightens for a dark background
+ * (#1c71d8 → #78aeed), while the purple is decoration and is the same hue in
+ * both schemes — as it is on the website. Alphas rise slightly because a tint
+ * over #1d1d20 reads weaker than the same tint over white.
+ *
+ * The full compound is restated rather than only the changed stops: NS sums
+ * specificity FLAT (class, attribute and pseudo-class 10 each — css-selector.js
+ * :205,292) and there is no per-stop cascade for a gradient anyway. */
+.ns-dark .sb-preview-scroll {
+    background-image: linear-gradient(
+        135deg,
+        rgba(120, 174, 237, 0.09) 0%,
+        rgba(120, 174, 237, 0) 45%,
+        rgba(146, 110, 228, 0) 55%,
+        rgba(146, 110, 228, 0.08) 100%
+    );
+}