@cube-dev/ui-kit 0.157.2 → 0.158.0

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.157.2";
+const VERSION = "0.158.0";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Theming.md

@@ -25,11 +25,11 @@ value so this stays true.
 | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
 | `hue`                        | **Accent** hue in degrees — the brand. Drives the `accent-*` family, `primary` / `purple` / `special`, and the brand-tinted `focus`, loading faces and disabled chip. | `280.3`                             |
 | `baseHue`                    | **Base** hue in degrees — the neutral chrome: `surface` and its ladder, the `surface-text*` ramp, `border`, `placeholder`.                                            | inherits `hue`                      |
-| `saturation`                 | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none.                                                                     | `80`                                |
+| `saturation`                 | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none.                                                                     | `100`                               |
 | `themes.<status>.hue`        | Hue for `success` / `danger` / `warning` / `note`.                                                                                                                    | `156.9` / `23.1` / `84.3` / `302.3` |
 | `themes.<status>.saturation` | Saturation for that status theme.                                                                                                                                     | inherits `saturation`               |
-| `themes.code.saturation`     | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`.                                                                | `80`                                |
-| `pastel`                     | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`.                                                                                                | `false`                             |
+| `themes.code.saturation`     | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`, nor track its default.                                         | `80`                                |
+| `pastel`                     | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`.                                                                                                | `true`                              |
 | `contrastLevel`              | Global. `'auto'`, or a manual `0`–`100` level.                                                                                                                        | `'auto'`                            |
 
 ### The setter replaces
@@ -101,9 +101,12 @@ Syntax colors are their own theme with their own seed, so neither the brand hue
 the palette saturation reaches them. Hues are absolute literals — a brand re-seeded
 toward green would otherwise collide `code-string` with `code-number` (156°) — and
 the saturation is fixed at `80` rather than inheriting, so muting the app cannot
-wash out a code block. `pastel` skips them for the same reason: it lowers the chroma
-ceiling far enough to take `code-keyword` from ~0.19 to ~0.07, collapsing the spread
-that keeps the syntax hues apart.
+wash out a code block. That `80` is its own constant (`DEFAULT_CODE_SATURATION`),
+deliberately not the palette default it once shared a value with: the app seed moved
+to `100` with the pastel palette and the syntax colors stayed put, which is the whole
+point of them not inheriting. `pastel` skips them for the same reason: it lowers
+the chroma ceiling far enough to take `code-keyword` from ~0.19 to ~0.07,
+collapsing the spread that keeps the syntax hues apart.
 
 So `themes.code.saturation` is the only thing that moves them. Tune it on its own:
 
@@ -117,7 +120,8 @@ and saturation are pinned.
 
 That separate seed is also a hard requirement, not a preference: a Glaze colour can
 never exceed its own theme seed, and four of these sit at factor `1.0`. Inside a
-default theme seeded below 80 they simply could not hold their chroma.
+default theme seeded below `80` they simply could not hold their chroma — which is
+also why the pinned seed is a floor to respect rather than a number to tidy up.
 
 ### Inherited vs pinned
 
@@ -141,7 +145,7 @@ setPaletteConfig(({ baseHue, ...config }) => config);
 An explicit `baseHue: undefined` is equivalent to omitting it; neither is a value.
 
 `getPaletteConfig()` resolves everything, which loses that distinction — it cannot
-tell you whether `80` was chosen or inherited. `getPaletteConfigInput()` returns the
+tell you whether `100` was chosen or inherited. `getPaletteConfigInput()` returns the
 sparse config as set, which is what a settings UI needs to render an inherited value
 as inherited and offer a way back:
 
@@ -337,11 +341,14 @@ and not per request:
 
 ## Caveats
 
-**`pastel: true` is a redesign, not a filter.** It changes every resolved color
-outside the `code-*` family. The per-color saturation factors in this palette were
-tuned for the non-pastel space — pastel equalizes chroma across hues, so a pastel
-palette on the shipped seeds resolves more saturated than you may expect. Re-tune
-the seeds alongside it.
+**`pastel` is a redesign, not a filter — in either direction.** It changes every
+resolved color outside the `code-*` family, and the shipped palette is now pastel
+(`pastel: true`, seed `100`), so it is `pastel: false` that is the departure. The two
+spaces want different seeds: pastel equalizes the chroma ceiling across hues, where
+the non-pastel one is per-hue and lets warm hues run further. Flipping the flag alone
+therefore re-tunes nothing — a seed picked in one space lands somewhere else in the
+other, and the warm statuses move most. Re-tune the seeds alongside it, in whichever
+direction you flip.
 
 **Re-seeding costs about 10 ms.** Rebuilding the eight themes and re-solving
 ~156 tokens across four scheme variants is not free, though it is inside a frame.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.157.2",
+  "version": "0.158.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -29,7 +29,8 @@
     "docs/components",
     "docs/tasty",
     "docs/glaze",
-    "docs/*.md"
+    "docs/*.md",
+    "tasty.config.ts"
   ],
   "keywords": [
     "uikit"
@@ -91,7 +92,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.0.0",
+    "@tenphi/eslint-plugin-tasty": "^1.0.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -0,0 +1,390 @@
+/**
+ * Tasty Extension Configuration
+ *
+ * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
+ * It provides token names, units, presets, and state aliases for validation and autocomplete.
+ *
+ * Projects using @cube-dev/ui-kit can extend this config:
+ * ```typescript
+ * export default {
+ *   extends: '@cube-dev/ui-kit',
+ *   // Add project-specific tokens, presets, etc.
+ * };
+ * ```
+ *
+ * @see https://github.com/tenphi/tasty-vscode-extension for extension documentation
+ */
+
+export default {
+  extends: '@tenphi/tasty',
+
+  /**
+   * Consumers re-export `tasty` from this package rather than from
+   * `@tenphi/tasty`, and the ESLint plugin only inspects `tasty({ styles })`
+   * calls whose import it can trace back to a tracked source. Without this,
+   * every downstream project sees zero findings. Unioned with the parent's
+   * list, so ui-kit's own `@tenphi/tasty` imports stay covered.
+   */
+  importSources: ['@cube-dev/ui-kit'],
+
+  tokens: [
+    // Declared in src/tasty-augment.d.ts but previously absent here, so the
+    // ESLint plugin reported them as unknown once story files started being
+    // linted. Keep the two lists in sync.
+    '#accent-surface-border',
+    '#black',
+    '#danger-border',
+    '#draft',
+    '#light-grey',
+    '#note-border',
+    '#pink-01',
+    '#pink-02',
+    '#primary-border',
+    '#success-border',
+    '#warning-border',
+    '#white',
+    // ---- Glaze: neutral surface ramp (default theme) ----
+    '#surface',
+    '#surface-2',
+    '#surface-3',
+    '#surface-4',
+    '#surface-inverse',
+    '#surface-text',
+    '#surface-text-soft',
+    '#surface-text-soft-2',
+    '#surface-2-text',
+    '#surface-2-text-soft',
+    '#surface-3-text',
+    '#surface-3-text-soft',
+
+    // ---- Glaze: accent system (default theme) ----
+    '#accent-surface',
+    '#accent-surface-2',
+    '#accent-surface-3',
+    '#accent-surface-hover',
+    '#accent-surface-text',
+    '#accent-text',
+    '#accent-text-soft',
+    '#accent-icon',
+    '#accent-disabled-surface',
+    '#accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme primary / purple (purple is alias of primary) ----
+    '#primary',
+    '#primary-bg',
+    '#primary-text',
+    '#primary-text-soft',
+    '#primary-icon',
+    '#primary-hover',
+    '#primary-disabled',
+    '#primary-desaturated',
+    '#primary-surface',
+    '#primary-surface-text',
+    '#primary-accent-surface',
+    '#primary-accent-surface-2',
+    '#primary-accent-surface-3',
+    '#primary-accent-surface-hover',
+    '#primary-accent-surface-text',
+    '#primary-accent-text',
+    '#primary-accent-text-soft',
+    '#primary-accent-icon',
+    '#primary-accent-disabled-surface',
+    '#primary-accent-disabled-surface-text',
+    '#purple',
+    '#purple-bg',
+    '#purple-text',
+    '#purple-text-soft',
+    '#purple-icon',
+    '#purple-hover',
+    '#purple-disabled',
+    '#purple-surface',
+    '#purple-surface-text',
+    '#purple-accent-surface',
+    '#purple-accent-surface-2',
+    '#purple-accent-surface-3',
+    '#purple-accent-surface-hover',
+    '#purple-accent-surface-text',
+    '#purple-accent-text',
+    '#purple-accent-text-soft',
+    '#purple-accent-icon',
+    '#purple-accent-disabled-surface',
+    '#purple-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme danger ----
+    '#danger',
+    '#danger-bg',
+    '#danger-text',
+    '#danger-text-soft',
+    '#danger-icon',
+    '#danger-hover',
+    '#danger-disabled',
+    '#danger-desaturated',
+    '#danger-surface',
+    '#danger-surface-text',
+    '#danger-accent-surface',
+    '#danger-accent-surface-2',
+    '#danger-accent-surface-3',
+    '#danger-accent-surface-hover',
+    '#danger-accent-surface-text',
+    '#danger-accent-text',
+    '#danger-accent-text-soft',
+    '#danger-accent-icon',
+    '#danger-accent-disabled-surface',
+    '#danger-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme success ----
+    '#success',
+    '#success-bg',
+    '#success-text',
+    '#success-text-soft',
+    '#success-icon',
+    '#success-hover',
+    '#success-disabled',
+    '#success-desaturated',
+    '#success-surface',
+    '#success-surface-text',
+    '#success-accent-surface',
+    '#success-accent-surface-2',
+    '#success-accent-surface-3',
+    '#success-accent-surface-hover',
+    '#success-accent-surface-text',
+    '#success-accent-text',
+    '#success-accent-text-soft',
+    '#success-accent-icon',
+    '#success-accent-disabled-surface',
+    '#success-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme warning ----
+    '#warning',
+    '#warning-bg',
+    '#warning-text',
+    '#warning-text-soft',
+    '#warning-icon',
+    '#warning-hover',
+    '#warning-disabled',
+    '#warning-desaturated',
+    '#warning-surface',
+    '#warning-surface-text',
+    '#warning-accent-surface',
+    '#warning-accent-surface-2',
+    '#warning-accent-surface-3',
+    '#warning-accent-surface-hover',
+    '#warning-accent-surface-text',
+    '#warning-accent-text',
+    '#warning-accent-text-soft',
+    '#warning-accent-icon',
+    '#warning-accent-disabled-surface',
+    '#warning-accent-disabled-surface-text',
+
+    // ---- Glaze: per-theme note ----
+    '#note',
+    '#note-bg',
+    '#note-text',
+    '#note-text-soft',
+    '#note-icon',
+    '#note-hover',
+    '#note-disabled',
+    '#note-desaturated',
+    '#note-surface',
+    '#note-surface-text',
+    '#note-accent-surface',
+    '#note-accent-surface-2',
+    '#note-accent-surface-3',
+    '#note-accent-surface-hover',
+    '#note-accent-surface-text',
+    '#note-accent-text',
+    '#note-accent-text-soft',
+    '#note-accent-icon',
+    '#note-accent-disabled-surface',
+    '#note-accent-disabled-surface-text',
+
+    // ---- Glaze: PrismCode syntax palette ----
+    '#code-comment',
+    '#code-punctuation',
+    '#code-keyword',
+    '#code-string',
+    '#code-number',
+    '#code-function',
+    '#code-attribute',
+
+    // ---- Glaze: LoadingAnimation cube faces (opaque) ----
+    '#loading-face-1',
+    '#loading-face-2',
+    '#loading-face-3',
+
+    // ---- Glaze: shadows / overlays / focus / placeholder ----
+    '#shadow-sm',
+    '#shadow-md',
+    '#shadow-lg',
+    '#overlay',
+    '#focus',
+    '#placeholder',
+
+    // ---- Legacy aliases (mapped in src/tokens/colors.ts) ----
+    '#pink',
+    '#text',
+    '#dark',
+    '#dark-bg',
+    '#dark-01',
+    '#dark-02',
+    '#dark-03',
+    '#dark-04',
+    '#dark-05',
+    '#purple-01',
+    '#purple-02',
+    '#purple-03',
+    '#purple-04',
+    '#light',
+    '#border',
+    '#clear',
+    '#shadow',
+    '#minor',
+    '#disabled',
+    '#disabled-surface-text',
+    '#disabled-surface',
+    '#disabled-opacity',
+
+    // ---- Component-local custom tokens ----
+    '#scrollbar-thumb',
+    '#scrollbar-outline',
+    '#scrollbar-bg',
+    '#scrollbar-corner',
+    '#tabs-fade-left',
+    '#tabs-fade-right',
+    '#slider-thumb',
+    '#slider-thumb-hovered',
+    // ColorPicker: the color being edited, and the black/white that reads on
+    // top of it. Both are set as inline custom properties per render.
+    '#color-picker',
+    '#color-picker-contrast',
+    // ColorSwatchGroup: the color of an individual swatch, set inline per option.
+    '#color-swatch',
+
+    // Custom Property Tokens (from src/tokens/base.ts)
+    '$tab-indicator-size',
+    '$font-size',
+    '$line-height',
+    '$input-font-size',
+    '$input-line-height',
+    '$input-letter-spacing',
+    '$disabled-opacity',
+    '$stroke-width',
+    '$large-radius',
+    '$card-radius',
+    '$leaf-sharp-radius',
+    '$fade-width',
+    '$min-dialog-size',
+    '$disclosure-transition',
+    '$tab-transition',
+    '$fade-transition',
+    '$scrollbar-width',
+    '$scrollbar-outline-width',
+    '$scrollbar-radius',
+
+    // Spacing Tokens
+    '$space-xs',
+    '$space-sm',
+    '$space-md',
+    '$space-lg',
+    '$space-xl',
+
+    // Size Tokens
+    '$size-xs',
+    '$size-sm',
+    '$size-md',
+    '$size-lg',
+    '$size-xl',
+
+    // Shadow Tokens
+    '$item-shadow',
+    '$card-shadow',
+    '$dialog-shadow',
+
+    // Layout Tokens
+    '$max-content-width',
+    '$topbar-height',
+    '$devmodebar-height',
+    '$sidebar-width',
+    '$border-radius-base',
+    '$scrollbar-h-left',
+    '$scrollbar-h-width',
+  ],
+
+  // Note: Built-in units (x, r, cr, bw, ow, fs, lh, sf) are always available.
+  // No need to list them here - they're automatically included by the extension.
+
+  /**
+   * Valid recipe names for the `recipe` style property.
+   * These are defined in src/components/Root.tsx via configure().
+   */
+  recipes: [
+    'reset',
+    'button',
+    'input',
+    'input-autofill',
+    'input-placeholder',
+    'input-search-cancel-button',
+  ],
+
+  /**
+   * State alias names for autocomplete.
+   * These are predefined responsive and theme states.
+   */
+  states: ['@mobile', '@compact'],
+
+  /**
+   * Valid preset names for the `preset` style property.
+   * These are defined in src/tokens/typography.ts.
+   *
+   * Note: Preset modifiers (strong, italic, icon, tight) are built-in
+   * and can be combined with any preset using `/` separator (e.g., 't1 / strong', 'h2 / italic').
+   */
+  presets: [
+    // Base text
+    'default',
+
+    // Headings (h1-h6)
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+
+    // Text styles (t1-t4, with medium weight variants)
+    't1',
+    't2',
+    't2m',
+    't3',
+    't3m',
+    't4',
+    't4m',
+
+    // Markdown/prose styles (m1-m3)
+    'm1',
+    'm2',
+    'm3',
+
+    // Paragraph styles (p1-p4)
+    'p1',
+    'p2',
+    'p3',
+    'p4',
+
+    // Caption/uppercase styles (c1-c2)
+    'c1',
+    'c2',
+    'c3',
+
+    // Snippet / monospace styles (s2-s4)
+    's2',
+    's3',
+    's4',
+
+    // Tag typography
+    'tag',
+
+    // Inline semantic styles
+    'inline',
+  ],
+};