@birdapi/velinstyle 1.1.0 → 1.2.0

package/schemas/section.schema.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/section.schema.json",
+  "title": "VelinStyle Section Blueprint Meta",
+  "type": "object",
+  "required": ["id", "role"],
+  "properties": {
+    "id": { "type": "string" },
+    "role": { "type": "string" },
+    "blueprintFile": { "type": "string" },
+    "inputs": { "type": "array", "items": { "type": "string" } },
+    "requiredContent": { "type": "array", "items": { "type": "string" } },
+    "optionalContent": { "type": "array", "items": { "type": "string" } },
+    "designRules": { "type": "array", "items": { "type": "string" } },
+    "a11yRules": { "type": "array", "items": { "type": "string" } },
+    "seoRules": { "type": "array", "items": { "type": "string" } },
+    "compatiblePrev": { "type": "array", "items": { "type": "string" } },
+    "compatibleNext": { "type": "array", "items": { "type": "string" } },
+    "examplePrompts": { "type": "array", "items": { "type": "string" } },
+    "commonMistakes": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-bundle.schema.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-bundle.schema.json",
+  "title": "VelinStyle Skill Bundle",
+  "type": "object",
+  "required": ["id", "origin", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "origin": { "type": "string", "enum": ["official", "community", "enterprise"] },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "graphs": { "type": "array", "items": { "type": "string" } },
+    "templates": { "type": "array", "items": { "type": "string" } },
+    "docs": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-graph.schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-graph.schema.json",
+  "title": "VelinStyle Workflow Graph",
+  "type": "object",
+  "required": ["id", "entry", "nodes", "edges"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "entry": { "type": "string" },
+    "nodes": { "type": "object" },
+    "edges": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["from", "to"],
+        "properties": {
+          "from": { "type": "string" },
+          "to": { "type": "string" },
+          "when": { "type": "string" }
+        }
+      }
+    }
+  }
+}

package/schemas/skill-pack.schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-pack.schema.json",
+  "title": "VelinStyle Skill Pack",
+  "type": "object",
+  "required": ["id", "name", "skills"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "version": { "type": "string" },
+    "priority": { "type": "string" },
+    "skills": { "type": "array", "items": { "type": "string" }, "minItems": 1 }
+  }
+}

package/schemas/skill-project.schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-project.schema.json",
+  "title": "VelinStyle Project Skill Chain",
+  "type": "object",
+  "required": ["id", "name", "workflowGraph", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "name": { "type": "string" },
+    "priority": { "type": "string" },
+    "workflowGraph": { "type": "string" },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "skills": { "type": "array", "items": { "type": "string" } },
+    "optimizedFor": { "type": "array", "items": { "type": "string" } }
+  }
+}

package/schemas/skill-record.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-record.schema.json",
+  "title": "VelinStyle Skill Record",
+  "type": "object",
+  "required": ["id", "category", "priority", "status", "capabilities", "inputs", "outputs", "compatibility", "prosePath"],
+  "properties": {
+    "id": { "type": "string", "pattern": "^velin-[a-z0-9-]+$" },
+    "name": { "type": "string" },
+    "description": { "type": "string" },
+    "category": { "type": "string", "enum": ["design", "development", "components", "utilities", "themes", "motion", "accessibility", "testing", "review", "documentation", "migration", "release", "developer-experience", "performance", "security", "ai-workflows"] },
+    "priority": { "type": "string", "enum": ["core", "recommended", "advanced", "experimental"] },
+    "status": { "type": "string", "enum": ["draft", "experimental", "beta", "stable", "deprecated", "legacy"] },
+    "confidence": { "type": "string", "enum": ["high", "medium", "low"] },
+    "capabilities": { "type": "array", "items": { "type": "string" }, "minItems": 1 },
+    "dependsOn": { "type": "array", "items": { "type": "string" } },
+    "requiresCli": { "type": "array", "items": { "type": "string" } },
+    "inputs": { "type": "array", "items": { "type": "string", "enum": ["prompt", "html", "css", "tokens", "docs", "screenshot", "figma", "markdown", "plan-json", "component-tag", "url", "meta-json"] } },
+    "outputs": { "type": "array", "items": { "type": "string", "enum": ["html", "css", "markdown", "plan-json", "review-json", "diff", "checklist", "report", "meta-json", "registry-json"] } },
+    "optimizedFor": { "type": "array", "items": { "type": "string", "enum": ["cursor", "vscode", "claude-code", "windsurf"] } },
+    "compatibility": { "type": "object" },
+    "onlyIf": { "type": "array", "items": { "type": "string" } },
+    "hooks": { "type": "object" },
+    "origin": { "type": "string", "enum": ["official", "community", "enterprise"] },
+    "prosePath": { "type": "string", "pattern": "^skills/.+/SKILL\\.md$" }
+  }
+}

package/schemas/skill-registry.schema.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-registry.schema.json",
+  "title": "VelinStyle Skill Registry",
+  "type": "object",
+  "required": ["version", "skills", "packs", "workflowGraphs", "bundles", "templates", "projects"],
+  "properties": {
+    "version": { "type": "string" },
+    "adapter": { "type": "string" },
+    "skills": { "type": "array", "items": { "$ref": "./skill-record.schema.json" } },
+    "packs": { "type": "array" },
+    "workflowGraphs": { "type": "array" },
+    "bundles": { "type": "array" },
+    "templates": { "type": "array" },
+    "projects": { "type": "array" }
+  }
+}

package/schemas/skill-template.schema.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/skill-template.schema.json",
+  "title": "VelinStyle Project Template",
+  "type": "object",
+  "required": ["id", "workflowGraph", "packs"],
+  "properties": {
+    "id": { "type": "string" },
+    "workflowGraph": { "type": "string" },
+    "packs": { "type": "array", "items": { "type": "string" } },
+    "theme": { "type": "string" },
+    "demo": { "type": "string" },
+    "docs": { "type": "array", "items": { "type": "string" } },
+    "starterFiles": { "type": "array", "items": { "type": "string" } },
+    "defaults": { "type": "object" }
+  }
+}

package/schemas/token-graph.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/token-graph.schema.json",
+  "title": "VelinStyle Token Semantic Graph",
+  "type": "object",
+  "required": ["version", "tokens"],
+  "properties": {
+    "version": { "type": "integer", "minimum": 1 },
+    "tokens": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["name", "layer", "usage"],
+        "properties": {
+          "name": { "type": "string" },
+          "layer": { "type": "string", "enum": ["core", "semantic", "component"] },
+          "usage": { "type": "string" },
+          "cssVariable": { "type": "string" },
+          "pairsWith": { "type": "array", "items": { "type": "string" } },
+          "contrastTarget": { "type": "string", "enum": ["aa", "aaa", "none"] },
+          "surfaceRole": { "type": "string" },
+          "description": { "type": "string" }
+        }
+      }
+    }
+  }
+}

package/schemas/utility.schema.json

@@ -0,0 +1,166 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://velinstyle.info/schemas/utility.schema.json",
+  "title": "VelinStyle Utility Source Schema",
+  "description": "Draft machine-readable source for the Utility Engine (VS-035 / #12). Authors edit this shape; the generator emits CSS, catalog, and docs. Hand-authored src/utilities/*.css remain authoritative until the generator MVP lands (ADR 0007).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["version", "prefix", "breakpoints", "families"],
+  "properties": {
+    "version": {
+      "type": "integer",
+      "minimum": 1,
+      "description": "Schema document version for the generator."
+    },
+    "prefix": {
+      "type": "string",
+      "const": "velin",
+      "description": "Mandatory class prefix (ADR 0004)."
+    },
+    "breakpoints": {
+      "type": "object",
+      "description": "Viewport breakpoints. Keys become name segments before the property.",
+      "additionalProperties": {
+        "type": "object",
+        "required": ["minWidth"],
+        "properties": {
+          "minWidth": {
+            "type": "string",
+            "description": "CSS length used in @media (width >= …)."
+          },
+          "token": {
+            "type": "string",
+            "description": "Optional CSS variable name; wiring tokens into @media is a follow-up."
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "scales": {
+      "type": "object",
+      "description": "Named token scales referenced by family values.",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": { "type": "string" }
+      }
+    },
+    "variantBudgets": {
+      "type": "object",
+      "description": "Placeholder for VS-039 — which variant families may expand which utilities.",
+      "additionalProperties": {
+        "type": "object",
+        "properties": {
+          "allow": {
+            "type": "array",
+            "items": { "type": "string" }
+          },
+          "maxClasses": { "type": "integer", "minimum": 0 }
+        },
+        "additionalProperties": false
+      }
+    },
+    "families": {
+      "type": "array",
+      "minItems": 1,
+      "items": { "$ref": "#/$defs/family" }
+    }
+  },
+  "$defs": {
+    "family": {
+      "type": "object",
+      "required": ["id", "property", "values"],
+      "additionalProperties": false,
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Stable family id (e.g. display, spacing)."
+        },
+        "property": {
+          "type": "string",
+          "description": "CSS property name emitted for each value."
+        },
+        "classStem": {
+          "type": "string",
+          "description": "Optional stem override when class name ≠ property (e.g. w for inline-size)."
+        },
+        "logicalDefault": {
+          "type": "boolean",
+          "default": true,
+          "description": "Prefer logical properties (ADR 0002)."
+        },
+        "output": {
+          "type": "string",
+          "enum": ["generated", "hand"],
+          "default": "generated",
+          "description": "generated → src/utilities/generated/; hand → legacy file until migrated."
+        },
+        "responsive": {
+          "type": "boolean",
+          "default": false,
+          "description": "When true, emit viewport variants for breakpoints in allowlist."
+        },
+        "responsiveBreakpoints": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "Subset of breakpoint keys; empty means all."
+        },
+        "values": {
+          "type": "array",
+          "minItems": 1,
+          "items": { "$ref": "#/$defs/value" }
+        }
+      }
+    },
+    "value": {
+      "type": "object",
+      "required": ["name", "css"],
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Class segment after stem (e.g. block → .velin-block)."
+        },
+        "css": {
+          "type": "string",
+          "description": "Declaration value (e.g. block, var(--velin-space-4))."
+        },
+        "scaleRef": {
+          "type": "string",
+          "description": "Optional scales.* key for docs/catalog."
+        }
+      }
+    }
+  },
+  "examples": [
+    {
+      "version": 1,
+      "prefix": "velin",
+      "breakpoints": {
+        "sm": { "minWidth": "36rem" },
+        "md": { "minWidth": "48rem" },
+        "lg": { "minWidth": "62rem" },
+        "xl": { "minWidth": "80rem" },
+        "2xl": { "minWidth": "96rem" }
+      },
+      "families": [
+        {
+          "id": "display",
+          "property": "display",
+          "responsive": true,
+          "responsiveBreakpoints": ["sm", "md", "lg", "xl"],
+          "output": "hand",
+          "values": [
+            { "name": "block", "css": "block" },
+            { "name": "flex", "css": "flex" },
+            { "name": "grid", "css": "grid" },
+            { "name": "hidden", "css": "none" },
+            { "name": "inline", "css": "inline" },
+            { "name": "inline-block", "css": "inline-block" },
+            { "name": "inline-flex", "css": "inline-flex" },
+            { "name": "contents", "css": "contents" }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/components/alert.css

@@ -10,6 +10,17 @@
     color: var(--velin-color-text);
     font-size: var(--velin-text-base);
     line-height: var(--velin-leading-normal);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    overflow-wrap: break-word;
+  }
+
+  /*
+   * Text-only alerts (no icon/close/content shell): use block flow so
+   * inline <strong>/<code> nodes do not become horizontal flex items.
+   */
+  .velin-alert:not(:has(.velin-alert__icon, .velin-alert__close, .velin-alert__content)) {
+    display: block;
   }
 
   .velin-alert[role="alert"] {
@@ -24,7 +35,17 @@
   }
 
   .velin-alert__content {
-    flex-grow: 1;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: break-word;
+  }
+
+  .velin-alert__content > p {
+    margin-block: 0 var(--velin-space-2);
+  }
+
+  .velin-alert__content > p:last-child {
+    margin-block-end: 0;
   }
 
   .velin-alert__title {

package/src/components/calendar-dropzone.css

@@ -0,0 +1,5 @@
+/* Host hooks for calendar / dropzone when used without shadow pierce */
+velin-calendar,
+velin-file-dropzone {
+  display: block;
+}

package/src/layout/app-shell.css

@@ -0,0 +1,33 @@
+@layer layout {
+  .velin-app-shell {
+    display: flex;
+    min-block-size: 100dvh;
+  }
+  .velin-app-shell__nav {
+    inline-size: 16rem;
+    flex-shrink: 0;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+  .velin-app-shell__body {
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .velin-app-shell__content {
+    flex: 1;
+  }
+  .velin-toc {
+    inline-size: 10rem;
+    flex-shrink: 0;
+  }
+  .velin-docs-nav {
+    inline-size: 12rem;
+    flex-shrink: 0;
+  }
+  .velin-docs-main {
+    flex: 1;
+    min-inline-size: 16rem;
+  }
+}

package/src/tokens/shadow.css

@@ -10,6 +10,19 @@
     --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.06);
   }
 
+  /* Dark shadows: attribute OR system (ADR 0011 parity with color.css) */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-velin-theme="light"]) {
+      --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.2);
+      --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.25), 0 1px 2px oklch(0% 0 0 / 0.2);
+      --velin-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.3), 0 2px 4px oklch(0% 0 0 / 0.2);
+      --velin-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.35), 0 4px 6px oklch(0% 0 0 / 0.2);
+      --velin-shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.4), 0 8px 10px oklch(0% 0 0 / 0.2);
+      --velin-shadow-2xl: 0 25px 50px oklch(0% 0 0 / 0.5);
+      --velin-shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.3);
+    }
+  }
+
   [data-velin-theme="dark"] {
     --velin-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.2);
     --velin-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.25), 0 1px 2px oklch(0% 0 0 / 0.2);

package/src/utilities/border.css

@@ -7,6 +7,8 @@
   .velin-border-inline { border-inline: 1px solid var(--velin-color-border); }
   .velin-border-block-start { border-block-start: 1px solid var(--velin-color-border); }
   .velin-border-block-end { border-block-end: 1px solid var(--velin-color-border); }
+  .velin-border-inline-end { border-inline-end: 1px solid var(--velin-color-border); }
+  .velin-border-inline-start { border-inline-start: 1px solid var(--velin-color-border); }
 
   /* Border color */
   .velin-border-primary { border-color: var(--velin-color-primary); }

package/src/utilities/display.css

@@ -27,30 +27,7 @@
   .velin-opacity-75 { opacity: 0.75; }
   .velin-opacity-100 { opacity: 1; }
 
-  /* Responsive display via min-width */
-  @media (width >= 36rem) {
-    .velin-sm-block { display: block; }
-    .velin-sm-flex { display: flex; }
-    .velin-sm-grid { display: grid; }
-    .velin-sm-hidden { display: none; }
-    .velin-sm-inline { display: inline; }
-  }
-
-  @media (width >= 48rem) {
-    .velin-md-block { display: block; }
-    .velin-md-flex { display: flex; }
-    .velin-md-grid { display: grid; }
-    .velin-md-hidden { display: none; }
-    .velin-md-inline { display: inline; }
-  }
-
-  @media (width >= 62rem) {
-    .velin-lg-block { display: block; }
-    .velin-lg-flex { display: flex; }
-    .velin-lg-grid { display: grid; }
-    .velin-lg-hidden { display: none; }
-    .velin-lg-inline { display: inline; }
-  }
+  /* Responsive display variants live only in responsive.css (VS-037 / #14). */
 
   /* Columns (multi-column layout) */
   .velin-columns-1 { columns: 1; }

package/src/utilities/responsive.css

@@ -7,7 +7,12 @@
 
   /* --- SM (min-width: 36rem / 576px) --- */
   @media (width >= 36rem) {
-    /* Display (extending existing) */
+    /* Display (single owner for viewport variants — VS-037) */
+    .velin-sm-block { display: block; }
+    .velin-sm-flex { display: flex; }
+    .velin-sm-grid { display: grid; }
+    .velin-sm-hidden { display: none; }
+    .velin-sm-inline { display: inline; }
     .velin-sm-inline-block { display: inline-block; }
     .velin-sm-inline-flex { display: inline-flex; }
     .velin-sm-contents { display: contents; }
@@ -83,6 +88,11 @@
   /* --- MD (min-width: 48rem / 768px) --- */
   @media (width >= 48rem) {
     /* Display */
+    .velin-md-block { display: block; }
+    .velin-md-flex { display: flex; }
+    .velin-md-grid { display: grid; }
+    .velin-md-hidden { display: none; }
+    .velin-md-inline { display: inline; }
     .velin-md-inline-block { display: inline-block; }
     .velin-md-inline-flex { display: inline-flex; }
     .velin-md-contents { display: contents; }
@@ -176,6 +186,11 @@
   /* --- LG (min-width: 62rem / 992px) --- */
   @media (width >= 62rem) {
     /* Display */
+    .velin-lg-block { display: block; }
+    .velin-lg-flex { display: flex; }
+    .velin-lg-grid { display: grid; }
+    .velin-lg-hidden { display: none; }
+    .velin-lg-inline { display: inline; }
     .velin-lg-inline-block { display: inline-block; }
     .velin-lg-inline-flex { display: inline-flex; }
     .velin-lg-contents { display: contents; }

package/src/utilities/spacing.css

@@ -37,14 +37,18 @@
 
   /* Margin - block-start */
   .velin-mbs-0 { margin-block-start: var(--velin-space-0); }
+  .velin-mbs-1 { margin-block-start: var(--velin-space-1); }
   .velin-mbs-2 { margin-block-start: var(--velin-space-2); }
+  .velin-mbs-3 { margin-block-start: var(--velin-space-3); }
   .velin-mbs-4 { margin-block-start: var(--velin-space-4); }
   .velin-mbs-6 { margin-block-start: var(--velin-space-6); }
   .velin-mbs-8 { margin-block-start: var(--velin-space-8); }
 
   /* Margin - block-end */
   .velin-mbe-0 { margin-block-end: var(--velin-space-0); }
+  .velin-mbe-1 { margin-block-end: var(--velin-space-1); }
   .velin-mbe-2 { margin-block-end: var(--velin-space-2); }
+  .velin-mbe-3 { margin-block-end: var(--velin-space-3); }
   .velin-mbe-4 { margin-block-end: var(--velin-space-4); }
   .velin-mbe-6 { margin-block-end: var(--velin-space-6); }
   .velin-mbe-8 { margin-block-end: var(--velin-space-8); }
@@ -68,6 +72,18 @@
   .velin-pb-4 { padding-block: var(--velin-space-4); }
   .velin-pb-6 { padding-block: var(--velin-space-6); }
   .velin-pb-8 { padding-block: var(--velin-space-8); }
+  .velin-pb-10 { padding-block: var(--velin-space-10); }
+  .velin-pb-12 { padding-block: var(--velin-space-12); }
+
+  /* Padding - block axis alias (py = padding-block, matches blueprint / Tailwind-style naming) */
+  .velin-py-0 { padding-block: var(--velin-space-0); }
+  .velin-py-2 { padding-block: var(--velin-space-2); }
+  .velin-py-3 { padding-block: var(--velin-space-3); }
+  .velin-py-4 { padding-block: var(--velin-space-4); }
+  .velin-py-6 { padding-block: var(--velin-space-6); }
+  .velin-py-8 { padding-block: var(--velin-space-8); }
+  .velin-py-10 { padding-block: var(--velin-space-10); }
+  .velin-py-12 { padding-block: var(--velin-space-12); }
 
   /* Padding - inline */
   .velin-pi-0 { padding-inline: var(--velin-space-0); }
@@ -76,6 +92,22 @@
   .velin-pi-4 { padding-inline: var(--velin-space-4); }
   .velin-pi-6 { padding-inline: var(--velin-space-6); }
   .velin-pi-8 { padding-inline: var(--velin-space-8); }
+  .velin-pi-10 { padding-inline: var(--velin-space-10); }
+  .velin-pi-12 { padding-inline: var(--velin-space-12); }
+
+  /* Padding - block-start / block-end (logical, matches mbs/mbe) */
+  .velin-pbs-0 { padding-block-start: var(--velin-space-0); }
+  .velin-pbs-1 { padding-block-start: var(--velin-space-1); }
+  .velin-pbs-2 { padding-block-start: var(--velin-space-2); }
+  .velin-pbs-3 { padding-block-start: var(--velin-space-3); }
+  .velin-pbs-4 { padding-block-start: var(--velin-space-4); }
+  .velin-pbs-6 { padding-block-start: var(--velin-space-6); }
+  .velin-pbe-0 { padding-block-end: var(--velin-space-0); }
+  .velin-pbe-1 { padding-block-end: var(--velin-space-1); }
+  .velin-pbe-2 { padding-block-end: var(--velin-space-2); }
+  .velin-pbe-3 { padding-block-end: var(--velin-space-3); }
+  .velin-pbe-4 { padding-block-end: var(--velin-space-4); }
+  .velin-pbe-6 { padding-block-end: var(--velin-space-6); }
 
   /* Gap utilities */
   .velin-gap-0 { gap: 0; }

package/src/velinstyle.css

@@ -42,6 +42,7 @@
 @import "layout/grid.css";
 @import "layout/flex.css";
 @import "layout/patterns.css";
+@import "layout/app-shell.css";
 
 /* Components */
 @import "components/button.css";
@@ -73,6 +74,7 @@
 @import "components/search.css";
 @import "components/attributes.css";
 @import "components/highlight.css";
+@import "components/calendar-dropzone.css";
 
 /* Utilities */
 @import "utilities/color.css";