@bysages/core 0.0.0 → 0.0.1

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import tokensStyles from "@bysages/tokens/styles";
 //#region src/theme.ts
 /** Each scene pairs with a default accent — the pigment that carries its
 * context (civic identity is zhusha, never an error color; tech stays
@@ -257,10 +258,6 @@ function detachInkRipple() {
 	detachPress = void 0;
 }
 //#endregion
-//#region ../tokens/dist/js/styles.mjs
-/** Stylesheet for the full token layer, generated from dist/css/index.css. */
-var styles_default = "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    --bs-color-text-secondary: var(--bs-color-gray-600);\n    --bs-color-text-tertiary: var(--bs-color-gray-500);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide glow.\n       The inset variant serves parts flush against a container edge (steppers),\n       where an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 16%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 22%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Each accent redefines the\n     primary block and the focus hue; the fixed semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-brand-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-brand-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-celadon-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-celadon-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-zhusha-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-zhusha-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface for its audience: civic serves elders and civic desks (square\n     seal-cut geometry, generous targets, loud contrast, an unhurried pace),\n     tech serves modern efficiency products (sharp, dense, quick), enterprise\n     is the quiet commercial baseline, studio the literati gathering for\n     design and editorial work.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace, where the key light stands, and how far it reaches — never\n     interaction, never the semantic pigments. Each scene pairs with a default\n     accent and (for civic) the high-contrast tier; those pairings are applied\n     by the theme engine as plain data attributes, so the accent and contrast\n     rules — including their dark variants — carry them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-5) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and widens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 30%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack — MiSans\n     and HarmonyOS Sans lead, falling back into PingFang / YaHei so mixed CJK-Latin lines stay\n     on one rhythm. Sizes are fixed rem values outside the density scale; compact\n     UI may choose --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      MiSans, \"HarmonyOS Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, -apple-system,\n      \"Segoe UI\", Roboto, \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  :root,\n  :host {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";
-//#endregion
 //#region src/styles/base.ts
 /** Document-level guard rules. The machines drive visibility with the
 * `hidden` attribute (select/combobox item indicators), which any author
@@ -505,7 +502,11 @@ const aiCss = `
   border-radius: var(--bs-radius-lg);
   background: var(--bs-color-surface-1);
   inline-size: fit-content;
-  max-inline-size: min(75%, 30rem);
+  /* A fixed ceiling, not a percentage: the percentage feeds the
+     fit-content resolution a reference it cannot satisfy (the parent's
+     own width is being fit-content from this very box), and short
+     messages then collapse toward min-content — one glyph per line. */
+  max-inline-size: 30rem;
 }
 
 /* Markdown response: the ink is set with relaxed leading, code rides
@@ -9906,7 +9907,7 @@ const componentStyles = {
 /** The complete token layer (`@layer bs.tokens`): themes, density, contrast,
 * typography, motion, z-index, plus the document-level base guard and the
 * ink-ripple motion grammar. */
-const tokensCss = styles_default + baseCss + inkRippleCss;
+const tokensCss = tokensStyles + baseCss + inkRippleCss;
 let injected = false;
 /** True when an SSR integration already delivered the whole layer (the
 * Nuxt module ships it as one build-time stylesheet and plants this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/core",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Shared core of By Sages Elements — theme engine, per-component styles, and the lighting engine, all token-driven",
   "keywords": [
     "css",
@@ -39,8 +39,12 @@
       "import": "./dist/index.mjs"
     }
   },
+  "dependencies": {
+    "@bysages/tokens": "0.0.1"
+  },
   "scripts": {
     "dev": "basis build --stub",
-    "build": "vp pack"
+    "build": "vp pack",
+    "release": "basis publish"
   }
 }