npm - @cube-dev/ui-kit - Versions diffs - 0.206.0 → 0.206.2 - Mend

@cube-dev/ui-kit 0.206.0 → 0.206.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (587) hide show

package/dist/utils/modules.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/utils/react/RenderCache.tsx

package/dist/utils/react/Slots.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { c } from "react/compiler-runtime";
 import { Children, cloneElement, createContext, useContext } from "react";

package/dist/utils/react/chain.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 //#region src/utils/react/disabledProps.ts
 /**

package/dist/utils/react/forwardRefWithGenerics.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * @deprecated Declare a ref prop on a generic component, or preserve an

package/dist/utils/react/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeProps } from "./mergeProps.js";

package/dist/utils/react/interactions.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useRef, useState } from "react";

package/dist/utils/react/isTextOnly.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 //#region src/utils/react/isTextOnly.ts
 function isTextOnly(children) {

package/dist/utils/react/mapProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props, emptyValue = "") {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v), emptyValue);

package/dist/utils/react/overlayKeyPropagation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/overlayKeyPropagation.ts
 /**
 * Keys whose final handling belongs to the overlay around a control, not to

package/dist/utils/react/programmaticFocus.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/programmaticFocus.ts
 /**
 * Telling focus the user moved from focus a component moved for them.

package/dist/utils/react/resolveIcon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/utils/react/useBufferedValue.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 //#region src/utils/react/useBufferedValue.ts

package/dist/utils/react/useCombinedRefs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";

package/dist/utils/react/useEventBus.js CHANGED Viewed

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

package/dist/utils/react/useId.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/utils/react/useIsDarwin.js CHANGED Viewed

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

package/dist/utils/react/useKeySymbols.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { c } from "react/compiler-runtime";
 //#region src/utils/react/useKeySymbols.ts

package/dist/utils/react/useLayoutEffect.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx
 const useLayoutEffect$1 = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;

package/dist/utils/react/useLocalStorage.js CHANGED Viewed

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

package/dist/utils/react/useMergeStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 //#region src/utils/react/useMergeStyles.ts

package/dist/utils/react/useOverlayEscapeGuard.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { getEventTarget, nodeContains } from "@react-aria/utils";

package/dist/utils/react/usePopoverSync.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useEffect, useEffectEvent, useRef } from "react";

package/dist/utils/react/useQaProps.js CHANGED Viewed

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

package/dist/utils/react/useScheme.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 //#region src/utils/react/useScheme.ts
 /**

package/dist/utils/react/useViewportSize.js CHANGED Viewed

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

package/dist/utils/react/wrapNodeIfPlain.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { Fragment, isValidElement } from "react";
 //#region src/utils/react/wrapNodeIfPlain.ts
 function wrapNodeIfPlain(children, render) {

package/dist/utils/selection.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { isSelector, mergeStyles } from "@tenphi/tasty";
 //#region src/utils/styles.ts
 function isRecord(value) {

package/dist/utils/tree.js CHANGED Viewed

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

package/dist/utils/warnings.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js CHANGED Viewed

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.2 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.206.0";
+const VERSION = "0.206.2";
 const TASTY_VERSION = "3.17.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Usage.md CHANGED Viewed

@@ -412,7 +412,7 @@ Most components are a design contract: customize them through their own props (`
 The package's `tasty.config.ts` lists the other components as `protectedComponents`, and `tasty/no-protected-restyle` from `@tenphi/eslint-plugin-tasty` 1.12.0 or newer reports a restyle of one in your code:
 - instance `styles`, and every `*Styles` prop such as `inputStyles`;
-- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. Root `styles` that sets only allowed props passes too;
+- style props other than the ones that place or size the component (`width`, `height`, `gridArea`, `margin`, `inset`, …). Containers (`Card`, `Panel`, `ResizablePanel`, `Content`, `Header`, `Footer`, `Alert`, `Result`, `Skeleton`, and `Layout` and `GridLayout` with their sub-components) also keep the ones that lay out their content: `padding`, `gap`, `flow`, `place*`, `align*`, `justify*`, `grid*`, `overflow` and `scrollbar`. `Placeholder` keeps `radius`, the shape of what it stands in for. Root `styles` that sets only allowed props passes too;
 - `tasty()` wrappers that restyle a protected component, and wrappers of those wrappers.
 On an input, the style props that place or size it act on its outer element: the field wrapper when it renders (see [Field properties](./FieldProperties.md)), the input itself otherwise. Its `styles` always style the input, so a root `styles` that only sizes it passes the rule but sizes the input inside the field, not the field. To size the input alone, beside a side label for example, use its `controlWidth` prop. Input components take no other style props.
@@ -447,7 +447,7 @@ An intended override takes a disable comment with its reason on the line before
 With this rule on, `tasty/no-styles-prop` can stay off, so the primitives keep their `styles`.
-The same `extends` gives the plugin's other rules the names UI Kit defines: its tokens, presets and recipes, and the `@dark`, `@hc` and `@reduced-motion` state aliases. `tasty/valid-color-token`, `tasty/valid-custom-property`, `tasty/valid-preset`, `tasty/valid-recipe`, `tasty/valid-state-key` and `tasty/no-unknown-state-alias` then report only names that don't exist. List what your app defines itself, in its own `configure()` or `tokens`, in its own config, which adds to the lists it extends:
+The same `extends` gives the plugin's other rules the names UI Kit defines: its tokens, presets and recipes, and the `@dark`, `@hc` and `@reduced-motion` state aliases. `tasty/valid-color-token`, `tasty/valid-custom-property`, `tasty/valid-preset`, `tasty/valid-recipe`, `tasty/valid-state-key` and `tasty/no-unknown-state-alias` then report only names that don't exist. The tokens include the ones a component's docs offer you, to read inside that component or set on it, such as a dialog's `$dialog-padding-h` or a layout's `$content-padding`. A component's other custom properties are internal and can change, so the rules report them too. List what your app defines itself, in its own `configure()` or `tokens`, in its own config, which adds to the lists it extends:
 ```ts
 // tasty.config.ts

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.206.0",
+  "version": "0.206.2",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -209,6 +209,7 @@
     "test:form-compiled": "vitest run --config vitest.form-compiled.config.ts",
     "diagnostics:hooks": "node scripts/hooks-diagnostics.mjs",
     "check:react-package": "node scripts/compiler/check-package.mjs",
+    "check:component-tokens": "node scripts/check-component-tokens.mjs",
     "check:consumer-declarations": "node scripts/check-consumer-declarations.mjs"
   }
 }

package/tasty.config.ts CHANGED Viewed

@@ -20,6 +20,53 @@
 import { runtimeNames } from './tasty.config.generated';
+/**
+ * Component tokens a component's docs offer consumers: to read inside the
+ * component that sets them, so their own content lines up with it, or to set
+ * on it. Each is part of that component's documented API:
+ * `pnpm check:component-tokens` fails when one is in no component's
+ * `.docs.mdx`, and `src/tokens/tasty-config.test.ts` when no component sets
+ * it. UI Kit's internal component tokens are in `src/tasty.config.ts`, which
+ * consumers' lint never reads.
+ */
+export const componentTokens = [
+  // Dialog
+  '$dialog-size',
+  '$dialog-padding-h',
+  '$dialog-title-padding-v',
+  '$dialog-content-padding-v',
+  '$dialog-footer-v',
+  // Item, Button and the text inputs publish their height; ColorSwatch reads it.
+  '$size',
+  '$prefix-gap',
+  '$suffix-gap',
+  // ItemButton's actions
+  '$action-size',
+  // ItemTable's rows and cells
+  '#row-base',
+  '#row-overlay',
+  '#row-text',
+  '$row-overlay-weight',
+  '$dim',
+  '$row-height',
+  '$header-height',
+  '$cell-padding-x',
+  '$cell-padding-y',
+  // Layout, for its sub-components
+  '$content-padding',
+  // FieldWrapper's side label, for a row without one
+  '$full-label-width',
+  // GridProvider
+  '$grid-width',
+  '$columns-amount',
+  '$column-gap',
+  '$column-width',
+  // Slider and HueSlider, through `thumbTokens`
+  '#slider-thumb',
+  // Notifications and Toast: an app sets it to keep the stack below its bar.
+  '$overlay-inset-top',
+];
 export default {
   extends: '@tenphi/tasty',
@@ -107,7 +154,9 @@ export default {
     },
     // Containers. `Layout` and `GridLayout` cover their sub-components, such
     // as `Layout.Content`, whose `scrollbar` is their own prop;
-    // `ResizablePanel`'s `direction` is the side it resizes from.
+    // `ResizablePanel`'s `direction` is the side it resizes from. `Alert`,
+    // `Result` and `Skeleton` hold content the consumer supplies, so how that
+    // content is spaced is the consumer's call.
     {
       source: '@cube-dev/ui-kit',
       include: [
@@ -119,6 +168,9 @@ export default {
         'Footer',
         'Layout',
         'GridLayout',
+        'Alert',
+        'Result',
+        'Skeleton',
       ],
       allowedStyleProps: [
         'position',
@@ -151,6 +203,13 @@ export default {
         'direction',
       ],
     },
+    // A placeholder stands in for content of any shape, so `radius` is its
+    // shape, like `dimension`.
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['Placeholder'],
+      allowedStyleProps: ['position', 'dimension', 'radius'],
+    },
     {
       source: '@cube-dev/ui-kit',
       // `*Icon` also matches `Icon`. `Button.Group` is `ButtonGroup`, a
@@ -188,21 +247,13 @@ export default {
   tokens: [
     ...runtimeNames.tokens,
-    // `<Root>` sets it for every element below it, through its `tokens`.
+    // Set for the whole app outside `getTokens()`: `<Root>`'s `tokens`, and
+    // the `html` block `GlobalStyles` writes.
     '$pointer',
+    '$font-sans',
+    '$font-mono',
-    // Component tokens, set in one file and read in another.
-    // ColorPanel, ColorSwatch, ColorSwatchGroup and HueSlider set these per
-    // render through `tokens`.
-    '#color-picker',
-    '#color-picker-contrast',
-    '#color-swatch',
-    '#slider-thumb',
-    '#slider-thumb-hovered',
-    // Tabs, and Layout's tiny scrollbar (`useTinyScrollbar`).
-    '$tab-indicator-size',
-    '$scrollbar-h-left',
-    '$scrollbar-h-width',
+    ...componentTokens,
   ],
   states: runtimeNames.states,
   presets: runtimeNames.presets,