@scalar/blocks 0.4.3 → 0.5.0

package/dist/styles/schema-tree.css

@@ -0,0 +1,91 @@
+/**
+ * Schema tree rail tokens. Declared at app scope, not on `.schema-tree`, because
+ * rails are also drawn by surfaces above any tree root (a response row's panel,
+ * the response-headers group); scoped to the root they fell back to the raw
+ * border colour. Each panel sets only its own `--schema-depth`. The depth fade
+ * is deliberately not a token: a custom property substitutes where it is
+ * declared, so see `schema-rail` below for the use-site formula.
+ */
+.scalar-app {
+  --schema-gutter: 16px;
+  --schema-row-pad: 6px;
+  --schema-depth: 0;
+  /* The theme's own border colour, so rails match every other hairline on the
+     page; the depth fade in `schema-rail` softens nested rails from this base. */
+  --schema-rail-base: var(--scalar-border-color);
+  /* Control sizes, and the HALF of each that positions it. A floating control
+     is centred on the rail by hanging it `half + gutter` to the left of the
+     text, so the halves must be tokens too: hard-coded offsets silently drift
+     off the rail the moment a size changes. */
+  --schema-glyph-size: 18px;
+  --schema-glyph-half: 9px;
+  --schema-glyph-icon: 16px;
+  --schema-toggle-size: 24px;
+  --schema-toggle-half: 12px;
+}
+
+/**
+ * Schema tree utilities: the depth-faded rail, the glyph puck and the rail's
+ * pointer strip, shared so every surface composes the same classes. Their custom
+ * properties live in the `.scalar-app` token block above (--schema-rail-base,
+ * --schema-depth, the control sizes); only the glyph's own colours are set on
+ * the tree root (--schema-glyph-background, --schema-glyph-color). The fade must stay a
+ * use-site formula: a custom property substitutes where it is declared, so a
+ * token would freeze at depth 0 and every rail would render the same grey.
+ */
+@utility schema-rail {
+  border-inline-start: var(--scalar-border-width) solid
+    color-mix(in srgb, var(--schema-rail-base), var(--scalar-background-1) min(calc(var(--schema-depth) * 8%), 40%));
+}
+
+/* The knockout puck a tree glyph sits in: opaque, so a rail reads as passing
+   behind it. 18px around a 16px icon (16/14 in a narrow container), inside a
+   larger hit target on purpose. The border is always there, transparent at
+   rest, so the hover ring never shifts the icon. */
+@utility schema-glyph {
+  inline-size: var(--schema-glyph-size, 18px);
+  block-size: var(--schema-glyph-size, 18px);
+  display: grid;
+  place-items: center;
+  border-radius: 9999px;
+  border: var(--scalar-border-width) solid transparent;
+  background: var(--schema-glyph-background, var(--scalar-background-1));
+  color: var(--schema-glyph-color, var(--scalar-color-2));
+}
+
+/* Tree-control hover variant: a glyph puck lights while the pointer is over
+   anything that toggles its row. That is the control carrying
+   `group/tree-control` (a row trigger, the gutter toggle, a reveal button);
+   for a gutter toggle it is also the row heading beside it, which toggles the
+   row on click too; and it is the open panel's rail, which closes the row.
+   The heading and rail cases are data attributes that pointer events write
+   (SchemaProperty.vue, SchemaRailPanel.vue), not `:has(... :hover)`: a `:has()`
+   anchor on every expandable row made each element inserted under it restyle
+   the whole open subtree. The attributes exist only while hovering and say
+   exactly what `:hover` said. */
+@custom-variant tree-control-hover (
+  &:is(:where(.group\/tree-control):hover *),
+  :where(.property--tree[data-heading-hovered]) > .property-toggle &,
+  :where([data-child-rail-hovered]) > :where(.property-toggle, .parameter-item-trigger, .callback-item-trigger, .schema-card-title) &
+);
+
+/* The rail's hit target: an 11px strip straddling the 1px line (6px outside,
+   5px inside). Pointer-only, so pair it with aria-hidden and data-rail-hit. */
+@utility rail-hit {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(-1 * var(--scalar-border-width) - 5px);
+  inline-size: 11px;
+  cursor: pointer;
+}
+
+/* Rail hover variant: matches a railed panel while the pointer is over its own
+   hit strip. The strip writes data-rail-hovered on the panel from its pointer
+   events (SchemaRailPanel.vue), so every surface's strip triggers it
+   identically, and no `:has(> [data-rail-hit]:hover)` anchor is needed (see
+   the tree-control variant above for why). */
+@custom-variant rail-hover {
+  &[data-rail-hovered] {
+    @slot;
+  }
+}

package/dist/styles/tailwind.config.css

@@ -10,3 +10,25 @@
 
 /* Search for Tailwind classes in Scalar Blocks */
 @source "../";
+
+/* Shared schema tree controls and rails */
+@import "./schema-tree.css";
+/**
+ * Visually hides content while leaving it available to assistive technology.
+ * A shared utility rather than a style scoped to ScreenReader.vue, so the
+ * schema tree and the response headers can label a row's child count from
+ * plain markup. `clip-path` replaces the deprecated `clip`; `white-space:
+ * nowrap` matters because some engines announce a wrapped 1x1 box one word per
+ * line, breaking the sentence apart.
+ */
+@utility screenreader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/vue-styles.css

@@ -1,2 +1,2 @@
-.request-card[data-v-24e941aa]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-24e941aa]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-24e941aa]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-24e941aa]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-24e941aa]{flex:1;display:flex}.request-card-simple[data-v-24e941aa]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-24e941aa]{flex-direction:column;width:100%;display:flex}
+.request-card[data-v-24e941aa]{color:var(--scalar-color-1);font-size:var(--scalar-font-size-3)}.request-method[data-v-24e941aa]{font-family:var(--scalar-font-code);margin-right:6px}.request-card-footer[data-v-24e941aa]{flex-shrink:0;justify-content:flex-end;padding:6px;display:flex;position:relative}.request-card-footer-addon[data-v-24e941aa]{flex:1;align-items:center;min-width:0;display:flex}.request-editor-section[data-v-24e941aa]{flex:1;display:flex}.request-card-simple[data-v-24e941aa]{font-size:var(--scalar-small);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.code-snippet[data-v-24e941aa]{flex-direction:column;width:100%;display:flex}.error[data-v-8f822427]{background-color:var(--scalar-color-red)}.schema-card[data-v-8f822427]{font-size:var(--scalar-font-size-4);color:var(--scalar-color-1)}.schema-card-title[data-v-8f822427]{height:var(--schema-title-height);color:var(--scalar-color-2);font-weight:var(--scalar-semibold);font-size:var(--scalar-mini);border-bottom:var(--scalar-border-width) solid transparent;align-items:center;gap:4px;padding:6px 8px;display:flex}button.schema-card-title[data-v-8f822427]{cursor:pointer}button.schema-card-title[data-v-8f822427]:hover{color:var(--scalar-color-1)}.schema-properties-open>.schema-card-title[data-v-8f822427]{border-bottom:var(--scalar-border-width) solid var(--scalar-border-color);border-bottom-right-radius:0;border-bottom-left-radius:0}.schema-properties-open>.schema-properties[data-v-8f822427]{width:fit-content}.schema-card-description[data-v-8f822427]{color:var(--scalar-color-2)}.schema-card-description+.schema-properties[data-v-8f822427]{width:fit-content;margin-top:8px}.schema-card--level-0:first-of-type>.schema-card-description[data-v-8f822427]:has(+.schema-properties){border-bottom:var(--scalar-border-width) solid var(--scalar-border-color);margin-bottom:-8px;padding-bottom:8px}.schema-card--level-0~.schema-card--level-0>.schema-card-description[data-v-8f822427]:has(+.schema-properties){padding-top:8px}.schema-properties-open.schema-properties[data-v-8f822427],.schema-properties-open>.schema-card--open[data-v-8f822427]{width:100%}.schema-properties[data-v-8f822427]{border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius-lg);flex-direction:column;width:fit-content;display:flex}.schema-properties-name[data-v-8f822427]{width:100%}.schema-properties .schema-properties[data-v-8f822427]{border-radius:13.5px}.schema-properties .schema-properties.schema-properties-open[data-v-8f822427]{border-radius:var(--scalar-radius-lg)}.schema-properties-open[data-v-8f822427]{width:100%}.schema-card--compact[data-v-8f822427]{align-self:flex-start}.schema-card--compact.schema-card--open[data-v-8f822427]{align-self:initial}.schema-card-title--compact[data-v-8f822427]{color:var(--scalar-color-2);border-bottom:none;height:auto;padding:6px 10px 6px 8px}.schema-properties-open>.schema-card-title--compact[data-v-8f822427]{position:static}.property--level-0>.schema-properties>.schema-card--level-0>.schema-properties[data-v-8f822427]{border:none}.property--level-0 .schema-card--level-0:not(.schema-card--compact) .property--level-1[data-v-8f822427]{padding:0 0 8px}:not(.composition-panel)>.schema-card--compact.schema-card--level-0>.schema-properties[data-v-8f822427]{border:none}[data-v-8f822427] .schema-card-description p{font-size:var(--scalar-small,var(--scalar-paragraph));color:var(--scalar-color-2);margin-bottom:6px;display:block}.children .schema-card-description[data-v-8f822427]:first-of-type{padding-top:0}.property-rule[data-v-c738e9ab] .composition-panel>.schema-card>.schema-properties>ul>li.property.property--tree-container{padding-top:0!important}.property-heading:empty+.property-description[data-v-1b21ab2e]:last-of-type,.property-description[data-v-1b21ab2e]:first-of-type:last-of-type{margin-top:0}.property-list[data-v-1b21ab2e]{border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius);margin-top:10px}.property-list .property[data-v-1b21ab2e]:last-of-type{padding-bottom:10px}.enum-toggle-button[data-v-1b21ab2e]:hover{color:var(--scalar-color-1)}.badge-colored[data-v-2a7101e8]{background-color:var(--badge-color);color:color-mix(in srgb, var(--badge-color), black 40%)}@supports (color:lch(from red calc((50 - l) * infinity) 0 0)){.badge-colored[data-v-2a7101e8]{color:lch(from var(--badge-color) calc((50 - l) * infinity) 0 0 / 1)}}.badge.text-orange[data-v-2a7101e8]{background:color-mix(in srgb, var(--scalar-color-orange), transparent 90%);border:#0000}.badge.text-yellow[data-v-2a7101e8]{background:color-mix(in srgb, var(--scalar-color-yellow), transparent 90%);border:#0000}.badge.text-red[data-v-2a7101e8]{background:color-mix(in srgb, var(--scalar-color-red), transparent 90%);border:#0000}.badge.text-purple[data-v-2a7101e8]{background:color-mix(in srgb, var(--scalar-color-purple), transparent 90%);border:#0000}.badge.text-green[data-v-2a7101e8]{background:color-mix(in srgb, var(--scalar-color-green), transparent 90%);border:#0000}.property-default[data-v-46973243]{font-size:var(--scalar-mini);flex-direction:column;display:flex;position:relative}.property-default[data-v-46973243]:hover:before{content:"";border-radius:var(--scalar-radius);width:100%;height:20px;position:absolute;top:0;left:0}.property-default:hover .property-default-label span[data-v-46973243]{color:var(--scalar-color-1)}.property-default-label span[data-v-46973243]{color:var(--scalar-color-2);border-bottom:var(--scalar-border-width) dotted currentColor;position:relative}.property-default-value[data-v-46973243]{font-family:var(--scalar-font-code);align-items:center;gap:8px;width:100%;padding:6px;display:flex}.property-default-value span[data-v-46973243]{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.property-default-value[data-v-46973243] svg{color:var(--scalar-color-3)}.property-default-value[data-v-46973243]:hover svg{color:var(--scalar-color-1)}.property-default-value[data-v-46973243]{background:var(--scalar-background-2);border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius)}.property-default-value-list[data-v-46973243]{background-color:var(--scalar-background-1);box-shadow:var(--scalar-shadow-1);border-radius:var(--scalar-radius-lg);border:var(--scalar-border-width) solid var(--scalar-border-color);z-index:2;flex-direction:column;gap:3px;min-width:200px;max-width:300px;padding:9px;display:none;position:absolute;top:18px;left:50%;overflow:auto;transform:translate(-50%)}.property-default:hover .property-default-value-list[data-v-46973243]{display:flex}.property-detail[data-v-8b57daa7]{display:inline-flex}.property-detail+.property-detail[data-v-8b57daa7]:before{content:"·";margin:0 .5ch;display:block}.property-detail-truncate[data-v-8b57daa7]{overflow:hidden}.property-detail-truncate>.property-detail-value[data-v-8b57daa7]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.property-detail-prefix[data-v-8b57daa7]{color:var(--scalar-color-2)}code.property-detail-value[data-v-8b57daa7]{font-family:var(--scalar-font-code);font-size:var(--scalar-font-size-3);color:var(--scalar-color-2);background:color-mix(in srgb, var(--scalar-background-2), var(--scalar-background-1));border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius);padding:0 4px}.property-example[data-v-b3473aa1]{font-size:var(--scalar-mini);flex-direction:column;display:flex;position:relative}.property-example[data-v-b3473aa1]:hover:before{content:"";border-radius:var(--scalar-radius);width:100%;height:20px;position:absolute;top:0;left:0}.property-example-value[data-v-b3473aa1]{font-family:var(--scalar-font-code);align-items:center;gap:8px;width:100%;padding:6px;display:flex}.property-example-value span[data-v-b3473aa1]{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.property-example-value[data-v-b3473aa1] svg{color:var(--scalar-color-3)}.property-example-value[data-v-b3473aa1]:hover svg{color:var(--scalar-color-1)}.property-example-value[data-v-b3473aa1]{background:var(--scalar-background-2);border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius)}.property-example-value-list[data-v-b3473aa1]{background-color:var(--scalar-background-1);box-shadow:var(--scalar-shadow-1);border-radius:var(--scalar-radius-lg);border:var(--scalar-border-width) solid var(--scalar-border-color);z-index:1000;flex-direction:column;gap:3px;min-width:200px;max-width:300px;padding:9px;display:none;position:absolute;top:18px;left:50%;overflow:auto;transform:translate(-50%)}.property-example:hover .property-example-value-list[data-v-b3473aa1]{display:flex}.property-pattern[data-v-db399b2d]{font-size:var(--scalar-mini);flex-direction:column;display:flex;position:relative}.property-pattern[data-v-db399b2d]:hover:before{content:"";border-radius:var(--scalar-radius);width:100%;height:20px;position:absolute;top:0;left:0}.property-pattern-popup[data-v-db399b2d]{background-color:var(--scalar-background-1);box-shadow:var(--scalar-shadow-1);border-radius:var(--scalar-radius-lg);border:var(--scalar-border-width) solid var(--scalar-border-color);z-index:1000;min-width:200px;max-width:min(500px,100vw - 32px);max-height:min(400px,100vh - 32px);padding:9px;display:none;position:absolute;top:18px;left:50%;overflow-y:auto;transform:translate(-50%)}.property-pattern:hover .property-pattern-popup[data-v-db399b2d],.property-pattern:focus-within .property-pattern-popup[data-v-db399b2d],.property-pattern.is-open .property-pattern-popup[data-v-db399b2d]{display:flex}.property-pattern-value[data-v-db399b2d]{font-family:var(--scalar-font-code);background:var(--scalar-background-2);border:var(--scalar-border-width) solid var(--scalar-border-color);border-radius:var(--scalar-radius);align-items:flex-start;gap:8px;width:100%;padding:6px;display:flex}.property-pattern-value code[data-v-db399b2d]{font-family:var(--scalar-font-code);font-size:var(--scalar-font-size-3);color:var(--scalar-color-2);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;text-align:left;flex:1}.property-heading[data-v-266fd7fb]{white-space:nowrap;flex-wrap:wrap;align-items:baseline;row-gap:9px;display:flex}:is(.property-heading[data-v-266fd7fb]:has(+.children),.property-heading[data-v-266fd7fb]:has(+.property-rule)){margin-bottom:9px}.property-heading[data-v-266fd7fb]>*{margin-right:9px}.property-heading[data-v-266fd7fb]:last-child{margin-right:0}.property-name[data-v-266fd7fb]{max-width:100%;font-family:var(--scalar-font-code);font-weight:var(--scalar-bold);font-size:var(--scalar-font-size-4);white-space:normal;overflow-wrap:break-word}.property-additional[data-v-266fd7fb]{font-family:var(--scalar-font-code)}.property-required[data-v-266fd7fb],.property-optional[data-v-266fd7fb]{color:var(--scalar-color-2)}.property-required[data-v-266fd7fb]{font-size:var(--scalar-mini);color:var(--scalar-color-orange)}.light-mode .property-required[data-v-266fd7fb]{color:color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 32%)}.property-read-only[data-v-266fd7fb]{font-size:var(--scalar-mini);color:var(--scalar-color-blue)}.property-write-only[data-v-266fd7fb]{font-size:var(--scalar-mini);color:var(--scalar-color-green)}.property-discriminator[data-v-266fd7fb]{font-size:var(--scalar-mini);color:var(--scalar-color-purple)}.property-detail[data-v-266fd7fb]{font-size:var(--scalar-mini);color:var(--scalar-color-2);align-items:center;min-width:0;display:flex}.property-const[data-v-266fd7fb]{color:var(--scalar-color-1)}.deprecated[data-v-266fd7fb]{text-decoration:line-through}.property[data-v-071aaa62]{color:var(--scalar-color-1);font-size:var(--scalar-small);flex-direction:column;padding:10px;display:flex;position:relative}.property[data-v-071aaa62]:has(>.property-rule:first-of-type):not(.property--compact){padding-top:8px;padding-bottom:8px}.property--deprecated[data-v-071aaa62]{background:repeating-linear-gradient(-45deg, var(--scalar-background-2) 0, var(--scalar-background-2) 2px, transparent 2px, transparent 5px);background-size:100%}.property-description[data-v-071aaa62]{line-height:1.4;font-size:var(--scalar-small);margin-top:6px}.property-description[data-v-071aaa62]:has(+.property-rule){margin-bottom:9px}[data-v-071aaa62] .property-description *{color:var(--scalar-color-2)!important}.property[data-v-071aaa62]:not(:last-of-type){border-bottom:var(--scalar-border-width) solid var(--scalar-border-color)}.property-description+.children[data-v-071aaa62],.children+.property-rule[data-v-071aaa62]{margin-top:9px}.children[data-v-071aaa62]{flex-direction:column;display:flex}.children .property--compact.property--level-1[data-v-071aaa62]{padding:12px}.property-example-value[data-v-071aaa62]{all:unset;font-family:var(--scalar-font-code);border-top:var(--scalar-border-width) solid var(--scalar-border-color);padding:6px}.property-rule[data-v-071aaa62]{border-radius:var(--scalar-radius-lg);flex-direction:column;display:flex}.property-example[data-v-071aaa62]{background:0 0;border:none;flex-direction:row;gap:8px;display:flex}.property-example-label[data-v-071aaa62],.property-example-value[data-v-071aaa62]{padding:3px 0 0}.property-example-value[data-v-071aaa62]{background:var(--scalar-background-2);border-radius:var(--scalar-radius);border-top:0;padding:3px 4px}.property-name[data-v-071aaa62]{font-family:var(--scalar-font-code);font-weight:var(--scalar-semibold)}.property-name-additional-properties[data-v-071aaa62]:before,.property-name-pattern-properties[data-v-071aaa62]:before{text-transform:uppercase;font-size:var(--scalar-micro);border-radius:var(--scalar-radius);color:var(--scalar-color-1);border:var(--scalar-border-width) solid var(--scalar-border-color);background-color:var(--scalar-background-2);margin-right:4px;padding:2px 4px;display:inline-block}.property-name-pattern-properties[data-v-071aaa62]:before{content:"regex"}.property-name-additional-properties[data-v-071aaa62],.property-name-pattern-properties[data-v-071aaa62]{border:1px dashed var(--scalar-border-color);color:var(--scalar-color-accent);border-radius:var(--scalar-radius);padding:2px;display:inline-block}.schema-type-icon[data-v-39d4fd7f]{color:var(--scalar-color-1);display:none}.schema-type[data-v-39d4fd7f]{font-family:var(--scalar-font-code);color:var(--scalar-color-1)}
 /*$vite$:1*/

package/package.json

@@ -17,7 +17,7 @@
     "blocks",
     "docs"
   ],
-  "version": "0.4.3",
+  "version": "0.5.0",
   "engines": {
     "node": ">=22"
   },
@@ -30,6 +30,31 @@
       "import": "./dist/code-example/index.js",
       "types": "./dist/code-example/index.d.ts",
       "default": "./dist/code-example/index.js"
+    },
+    "./schema": {
+      "import": "./dist/schema/index.js",
+      "types": "./dist/schema/index.d.ts",
+      "default": "./dist/schema/index.js"
+    },
+    "./specification-extensions": {
+      "import": "./dist/specification-extensions/index.js",
+      "types": "./dist/specification-extensions/index.d.ts",
+      "default": "./dist/specification-extensions/index.js"
+    },
+    "./shared": {
+      "import": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts",
+      "default": "./dist/shared/index.js"
+    },
+    "./schema/helpers": {
+      "import": "./dist/schema/helpers/index.js",
+      "types": "./dist/schema/helpers/index.d.ts",
+      "default": "./dist/schema/helpers/index.js"
+    },
+    "./schema/expansion": {
+      "import": "./dist/schema/expansion/index.js",
+      "types": "./dist/schema/expansion/index.d.ts",
+      "default": "./dist/schema/expansion/index.js"
     }
   },
   "files": [
@@ -37,24 +62,31 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/components": "0.30.6",
-    "@scalar/helpers": "0.16.0",
+    "@scalar/components": "0.30.7",
+    "@scalar/helpers": "0.16.1",
     "@scalar/icons": "0.7.6",
-    "@scalar/snippetz": "0.10.5",
+    "@scalar/localization": "0.2.5",
+    "@scalar/snippetz": "0.10.6",
     "@scalar/themes": "0.18.1",
-    "@scalar/types": "0.22.4",
-    "@scalar/workspace-store": "0.68.0",
+    "@scalar/types": "0.23.0",
+    "@scalar/use-hooks": "0.4.18",
+    "@scalar/workspace-store": "0.68.1",
     "@types/har-format": "^1.2.16",
+    "@vueuse/core": "13.9.0",
     "js-base64": "^3.9.2",
     "vue": "^3.5.40"
   },
   "devDependencies": {
+    "@playwright/test": "1.62.1",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/vue3-vite": "10.5.10",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "2.4.11",
-    "@vueuse/core": "13.9.0",
     "jsdom": "27.4.0",
+    "storybook": "10.5.10",
     "tailwindcss": "^4.3.3",
     "vite": "8.1.5",
     "vitest": "4.1.10",
@@ -63,9 +95,15 @@
   },
   "scripts": {
     "build": "vite build && pnpm build:styles && vue-tsc -p tsconfig.build.json",
+    "build:storybook": "storybook build",
     "build:styles": "shx cp -r src/styles dist && tailwindcss --optimize -i src/style.css -o dist/style.css && cat dist/vue-styles.css >> dist/style.css",
     "dev": "vite --config playground/vite.config.ts",
+    "dev:storybook": "storybook dev -p 6006 --ci",
+    "preview:storybook": "vite preview --outDir storybook-static -c test/vite.config.ts 1>&2",
     "test": "vitest",
+    "test:e2e:storybook": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:5001/ playwright test -c playwright.config.ts",
+    "test:e2e:storybook:ci": "playwright test -c playwright.config.ts",
+    "test:e2e:storybook:update-snapshots": "pnpm test:e2e:storybook --update-snapshots",
     "types:check": "vue-tsc --noEmit"
   }
 }