@neo-ui-kit/react 1.3.17 → 1.4.0

package/README.md

@@ -65,7 +65,7 @@ import "@neo-ui-kit/react/styles.css";
 To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
 
 ```bash
-npm install /path/to/adui/release/neo-ui-kit-react-1.3.17.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.4.0.tgz
 ```
 
 Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).
@@ -404,3 +404,24 @@ const [transport, setTransport] = useState<QuantumBackgroundTransport>();
 ```
 
 The documentation page builds exactly such a panel (song, player, microphone, snapshot, fullscreen, field and sensitivity, plus a closed “Тонкая настройка” section) outside the component. `QuantumFieldExperience`, `QuantumFieldExperienceProps` and `quantumFieldExperienceControls` remain compatible aliases; note that `QuantumFieldExperience` no longer renders its own control panel. The separate lightweight `QuantumField` primitive documented above keeps its original props and rendering; it is not an alias of the full background.
+
+
+### Viewport sizes
+
+Responsive Grid, Stack and FormFields layout uses the available window width in CSS pixels:
+
+| Name | Window width |
+| --- | --- |
+| xs | Below 768 px |
+| sm | 768 to 1023 px |
+| md | 1024 to 1919 px |
+| lg | 1920 to 2559 px |
+| xlg | 2560 px and above |
+
+Values carry forward until the next specified breakpoint. `base` remains an alias for `xs`, and `xl` for `xlg`; explicit canonical keys take priority. Nested layouts resolve their own values independently.
+
+```tsx
+<Grid columns={{ xs: 1, sm: 2, md: 3, lg: 4, xlg: 5 }} gap={3} />
+```
+
+Control `size` selects physical geometry (`xs`, `sm`, `md`, `lg`, `xlg`); it does not limit a component to a particular screen. Explicit compact controls remain compact on large displays. Numeric and CSS-length dimensions remain supported by Icon and Loader. Card padding also includes `xs` and `xlg`.

package/dist/chunks/{chunk-TMCWA446.js → chunk-KAVSRD45.js}

@@ -69,7 +69,7 @@ var illustrations = illustrations_default;
 
 // src/components/layout/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
-var iconSizes = { xs: "1rem", sm: "1.25rem", md: "1.5rem", lg: "2rem" };
+var iconSizes = { xs: "1rem", sm: "1.25rem", md: "1.5rem", lg: "2rem", xlg: "2.5rem" };
 var Icon = ({
   name = "music",
   size,
@@ -1128,7 +1128,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 var Switch = (p) => /* @__PURE__ */ jsx14(BooleanControl, { kind: "Switch", ...p });
 
 // src/core/responsive.ts
-var BREAKPOINTS = ["base", "sm", "md", "lg", "xl"];
+var BREAKPOINTS = ["xs", "sm", "md", "lg", "xlg"];
 function spacing(value) {
   if (typeof value !== "number") return value;
   if (value === 0) return "0";
@@ -1137,11 +1137,11 @@ function spacing(value) {
 function responsiveVars(name, value, format = String, fallback) {
   const values = value != null && typeof value === "object" && !Array.isArray(value) ? value : { base: value ?? fallback };
   const result = {};
-  let current = values.base ?? fallback;
+  let current = values.xs ?? values.base ?? fallback;
   for (const bp of BREAKPOINTS) {
-    current = values[bp] ?? current;
+    current = values[bp] ?? (bp === "xlg" ? values.xl : void 0) ?? current;
     if (current != null)
-      result[`--ad-${name}${bp === "base" ? "" : `-${bp}`}`] = format(current);
+      result[`--ad-${name}${bp === "xs" ? "" : `-${bp}`}`] = format(current);
   }
   return result;
 }
@@ -2590,6 +2590,7 @@ var RotaryKnob = (p) => {
   const baseRef = useRef14(null);
   const feedbackRef = useRef14(null);
   const rotorRef = useRef14(null);
+  const rasterRef = useRef14(null);
   const controlRef = useRef14(null);
   const readoutRef = useRef14(null);
   const controllerRef = useRef14(null);
@@ -2623,7 +2624,7 @@ var RotaryKnob = (p) => {
   const initialRef = useRef14(initial);
   const resetRef = useRef14(void 0);
   resetRef.current = p.resetValue === void 0 ? void 0 : toPosition(p.resetValue);
-  const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320 }[normalizeSize(p.size) ?? "md"];
+  const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320, xlg: 400 }[normalizeSize(p.size) ?? "md"];
   useLayoutEffect4(() => {
     const root = rootRef.current;
     const canvas = baseRef.current;
@@ -2660,6 +2661,69 @@ var RotaryKnob = (p) => {
     let previousFrame = 0;
     let disposed = false;
     let renderingSize = 0;
+    let rasterTimer = 0;
+    const raster = rasterRef.current;
+    const rasterContext = paintable ? raster?.getContext("2d") : null;
+    function invalidateRaster() {
+      clearTimeout(rasterTimer);
+      if (!rasterContext || !("filter" in rasterContext) || !raster) return;
+      raster.hidden = true;
+      delete root.dataset.rasterized;
+      if (!disposed) rasterTimer = window.setTimeout(cacheRaster, 500);
+    }
+    function cacheRaster() {
+      if (!raster || !rasterContext || disposed || renderingSize || drag || animationFrame || root.matches(":hover") || !canvas.width) return;
+      const size = parseFloat(getComputedStyle(root).width);
+      if (!size) return;
+      const ratio = devicePixelRatio || 1;
+      const padding = Math.ceil(parseFloat(getComputedStyle(root).fontSize) * 8);
+      const extent = size + padding * 2;
+      raster.width = raster.height = Math.ceil(extent * ratio);
+      Object.assign(raster.style, {
+        left: `${-padding}px`,
+        top: `${-padding}px`,
+        width: `${raster.width / ratio}px`,
+        height: `${raster.height / ratio}px`
+      });
+      const turned = document.createElement("canvas");
+      turned.width = turned.height = Math.ceil(size * ratio);
+      const turning = turned.getContext("2d");
+      if (!turning) return;
+      turning.translate(size * ratio / 2, size * ratio / 2);
+      turning.rotate((valueAngle(visualValue) - initialAngle) / degrees);
+      turning.drawImage(
+        rotor,
+        -size * ratio / 2,
+        -size * ratio / 2,
+        size * ratio,
+        size * ratio
+      );
+      for (const [source, element] of [
+        [canvas, canvas],
+        [feedback, feedback],
+        [turned, rotor.parentElement]
+      ]) {
+        if (!element) return;
+        rasterContext.filter = getComputedStyle(element).filter.replace(
+          /(-?[\d.]+)px/g,
+          (_, pixels) => `${Number(pixels) * ratio}px`
+        );
+        rasterContext.drawImage(
+          source,
+          0,
+          0,
+          source === turned ? size * ratio : source.width,
+          source === turned ? size * ratio : source.height,
+          padding * ratio,
+          padding * ratio,
+          size * ratio,
+          size * ratio
+        );
+      }
+      rasterContext.filter = "none";
+      raster.hidden = false;
+      root.dataset.rasterized = "true";
+    }
     async function render() {
       if (disposed || !painted) return;
       const cssSize = root.getBoundingClientRect().width;
@@ -2671,6 +2735,7 @@ var RotaryKnob = (p) => {
       );
       if (!size || renderingSize === size || [canvas, rotor, feedback].every((layer) => layer.width === size && layer.height === size)) return;
       renderingSize = size;
+      invalidateRaster();
       canvas.width = canvas.height = size;
       const center = size / 2;
       const radius = size * 0.445;
@@ -2947,6 +3012,7 @@ var RotaryKnob = (p) => {
     }
     function paintFeedback() {
       if (!painted || !feedback.width || disposed) return;
+      invalidateRaster();
       const scale2 = feedback.width * 0.445;
       const start = (startAngle - 90) / degrees;
       const end = (valueAngle(visualValue) - 90) / degrees;
@@ -3254,6 +3320,14 @@ var RotaryKnob = (p) => {
     root.addEventListener("pointerleave", resetHover, {
       signal: listeners.signal
     });
+    for (const event of ["pointerenter", "pointerleave"])
+      root.addEventListener(event, invalidateRaster, { signal: listeners.signal });
+    const tokens = typeof MutationObserver === "undefined" ? null : new MutationObserver(invalidateRaster);
+    for (let node = root; node; node = node.parentElement)
+      tokens?.observe(node, {
+        attributes: true,
+        attributeFilter: ["style", "class", "data-ad-theme", "data-ad-color-scheme"]
+      });
     window.addEventListener("blur", () => finishDrag(true), {
       signal: listeners.signal
     });
@@ -3289,6 +3363,8 @@ var RotaryKnob = (p) => {
       finishDrag();
       listeners.abort();
       observer.disconnect();
+      tokens?.disconnect();
+      clearTimeout(rasterTimer);
       clearTimeout(renderTimer);
       cancelAnimationFrame(animationFrame);
       cancelAnimationFrame(hoverFrame);
@@ -3350,6 +3426,7 @@ var RotaryKnob = (p) => {
           }
         ),
         /* @__PURE__ */ jsx29("span", { className: "knob__surface knob__rotor-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("canvas", { className: "knob__rotor", ref: rotorRef }) }),
+        /* @__PURE__ */ jsx29("canvas", { className: "knob__raster", ref: rasterRef, hidden: true, "aria-hidden": "true" }),
         /* @__PURE__ */ jsx29("span", { className: "knob__sheen", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx29(
           "div",

package/dist/components/controls/Slider/styles.css

@@ -136,3 +136,5 @@
 .ad-slider-field:has(.ad-slider:disabled) .ad-field-label {
   opacity: 0.5;
 }
+
+.ad-slider[data-ad-size="xlg"] { --ad-slider-track: 0.75rem; --ad-slider-thumb: 1.5rem; }

package/dist/components/controls/shared.css

@@ -120,6 +120,30 @@
   --ad-size-pad-x: 0.95rem;
   --ad-size-gap: 0.72rem;
 }
+:is(
+  .ad-button,
+  .ad-icon-button,
+  .ad-toggle-button,
+  .ad-split-button,
+  .ad-input-base,
+  .ad-text-field-shell,
+  .ad-text-area,
+  .ad-number-field,
+  .ad-select,
+  .ad-switch,
+  .ad-checkbox,
+  .ad-slider,
+  .ad-file-picker,
+  .ad-tabs,
+  .ad-tab,
+  .ad-segmented-control
+)[data-ad-size="xlg"] {
+  --ad-size-h: 3.5rem;
+  --ad-size-font: 1.0625rem;
+  --ad-size-radius: 1rem;
+  --ad-size-pad-x: 1.125rem;
+  --ad-size-gap: 0.85rem;
+}
 
 @keyframes ad-btn-breathe {
   50% {

package/dist/components/feedback/Badge/styles.css

@@ -89,3 +89,5 @@
     opacity: 0.35;
   }
 }
+
+.ad-badge[data-ad-size="xlg"] { --ad-badge-cut: 0.5rem; padding: 0.4rem 1rem; font-size: 1rem; line-height: 1.5rem; }

package/dist/components/foundation/Loader/Loader.d.ts

@@ -8,7 +8,7 @@ export interface LoaderProps extends Omit<CommonProps, "size"> {
     /** The picture that moves: a logo, an icon, any image (transparent PNG/SVG/WebP look best). */
     src?: string;
     animation?: LoaderAnimation;
-    /** xs/sm/md/lg, a CSS length, or pixels converted to rem at the 16px design baseline. */
+    /** xs/sm/md/lg/xlg, a CSS length, or pixels converted to rem at the 16px design baseline. */
     size?: number | string;
     /** Speed multiplier: 2 is twice as fast. */
     speed?: number;

package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts

@@ -21,6 +21,7 @@ export declare const loaderSizes: {
     readonly sm: 6.5;
     readonly md: 9;
     readonly lg: 12;
+    readonly xlg: 16;
 };
 export declare const loaderRenderKey: ({ animation }: Pick<LoaderSettings, "animation">) => "flip" | "fill" | "wave" | "palette" | "glow" | "pulse" | "spin" | "breathe" | "bounce" | "orbit" | "shine" | "wobble" | "radar";
 /** Removes large, smoothly connected background regions while preserving enclosed logo details. */

package/dist/components/layout/Avatar/styles.css

@@ -164,3 +164,6 @@
   background: var(--ad-neutral-600, #555);
   box-shadow: none;
 }
+
+.ad-avatar[data-ad-size="xlg"] { --ad-avatar: 5rem; }
+.ad-avatar[data-variant="host"][data-ad-size="xlg"] { --ad-avatar: 10rem; }

package/dist/components/layout/Card/Card.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { CardProps } from "../shared";
 export declare const Card: ({ as, border, shell, padding, title, description, eyebrow, icon, actions, level, children, ...p }: CardProps) => React.DetailedReactHTMLElement<{
     ref: React.RefObject<HTMLElement | null>;
-    "data-ad-padding": "sm" | "md" | "lg" | "none";
+    "data-ad-padding": "xs" | "sm" | "md" | "lg" | "xlg" | "none";
     onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
     id: string | undefined;
     className: string;

package/dist/components/layout/Card/styles.css

@@ -48,3 +48,6 @@
 .ad-card:hover > .ad-card-light {
   opacity: 1;
 }
+
+.ad-card[data-ad-padding="xs"] { padding: var(--ad-space-1); }
+.ad-card[data-ad-padding="xlg"] { padding: var(--ad-space-8); }

package/dist/components/layout/Grid/styles.css

@@ -24,7 +24,7 @@
   grid-column: var(--ad-grid-column-start) / var(--ad-grid-column-end);
   grid-row: var(--ad-grid-row-start) / var(--ad-grid-row-end);
 }
-@media (min-width: 40rem) {
+@media (min-width: 768px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-sm);
   }
@@ -40,7 +40,7 @@
     grid-row: var(--ad-grid-row-start-sm) / var(--ad-grid-row-end-sm);
   }
 }
-@media (min-width: 56.25rem) {
+@media (min-width: 1024px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-md);
   }
@@ -56,7 +56,7 @@
     grid-row: var(--ad-grid-row-start-md) / var(--ad-grid-row-end-md);
   }
 }
-@media (min-width: 75rem) {
+@media (min-width: 1920px) {
   .ad-grid:not(.ad-grid--auto-fit) {
     grid-template-columns: var(--ad-grid-columns-lg);
   }
@@ -72,19 +72,19 @@
     grid-row: var(--ad-grid-row-start-lg) / var(--ad-grid-row-end-lg);
   }
 }
-@media (min-width: 96rem) {
+@media (min-width: 2560px) {
   .ad-grid:not(.ad-grid--auto-fit) {
-    grid-template-columns: var(--ad-grid-columns-xl);
+    grid-template-columns: var(--ad-grid-columns-xlg);
   }
   .ad-grid {
-    row-gap: var(--ad-grid-row-gap-xl);
-    column-gap: var(--ad-grid-column-gap-xl);
-    align-items: var(--ad-grid-align-xl);
-    justify-items: var(--ad-grid-justify-xl);
-    justify-content: var(--ad-grid-distribution-xl);
+    row-gap: var(--ad-grid-row-gap-xlg);
+    column-gap: var(--ad-grid-column-gap-xlg);
+    align-items: var(--ad-grid-align-xlg);
+    justify-items: var(--ad-grid-justify-xlg);
+    justify-content: var(--ad-grid-distribution-xlg);
   }
   .ad-grid-item {
-    grid-column: var(--ad-grid-column-start-xl) / var(--ad-grid-column-end-xl);
-    grid-row: var(--ad-grid-row-start-xl) / var(--ad-grid-row-end-xl);
+    grid-column: var(--ad-grid-column-start-xlg) / var(--ad-grid-column-end-xlg);
+    grid-row: var(--ad-grid-row-start-xlg) / var(--ad-grid-row-end-xlg);
   }
 }

package/dist/components/layout/Stack/styles.css

@@ -15,7 +15,7 @@
 .ad-stack__divider {
   display: contents;
 }
-@media (min-width: 40rem) {
+@media (min-width: 768px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-sm);
     gap: var(--ad-stack-gap-sm);
@@ -24,7 +24,7 @@
     flex-wrap: var(--ad-stack-wrap-sm);
   }
 }
-@media (min-width: 56.25rem) {
+@media (min-width: 1024px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-md);
     gap: var(--ad-stack-gap-md);
@@ -33,7 +33,7 @@
     flex-wrap: var(--ad-stack-wrap-md);
   }
 }
-@media (min-width: 75rem) {
+@media (min-width: 1920px) {
   .ad-stack {
     flex-direction: var(--ad-stack-direction-lg);
     gap: var(--ad-stack-gap-lg);
@@ -42,12 +42,12 @@
     flex-wrap: var(--ad-stack-wrap-lg);
   }
 }
-@media (min-width: 96rem) {
+@media (min-width: 2560px) {
   .ad-stack {
-    flex-direction: var(--ad-stack-direction-xl);
-    gap: var(--ad-stack-gap-xl);
-    align-items: var(--ad-stack-align-xl);
-    justify-content: var(--ad-stack-justify-xl);
-    flex-wrap: var(--ad-stack-wrap-xl);
+    flex-direction: var(--ad-stack-direction-xlg);
+    gap: var(--ad-stack-gap-xlg);
+    align-items: var(--ad-stack-align-xlg);
+    justify-content: var(--ad-stack-justify-xlg);
+    flex-wrap: var(--ad-stack-wrap-xlg);
   }
 }

package/dist/components/layout/shared.d.ts

@@ -31,7 +31,7 @@ export interface CardProps extends CommonProps, Omit<HeaderProps, "as"> {
     as?: "section" | "div" | "article";
     border?: boolean;
     shell?: boolean;
-    padding?: "none" | "sm" | "md" | "lg";
+    padding?: "none" | "xs" | "sm" | "md" | "lg" | "xlg";
     material?: Material;
 }
 export interface AvatarProps extends CommonProps {

package/dist/components/media/RotaryKnob/styles.css

@@ -76,6 +76,13 @@
   user-select: none;
   -webkit-user-select: none;
 }
+.ad-rotary-knob .knob__raster {
+  position: absolute;
+  pointer-events: none;
+}
+.ad-rotary-knob[data-rasterized] .knob__surface {
+  visibility: hidden;
+}
 .ad-rotary-knob .knob__control:active,
 .ad-rotary-knob.is-dragging .knob__control {
   cursor: grabbing;

package/dist/core/base.d.ts

@@ -1,7 +1,7 @@
 import type { AriaRole, CSSProperties, ReactNode, Ref } from "react";
 export type Material = "shell" | "card" | "glass" | "ruby" | "tile" | "input" | "dialog" | "ghost" | "danger";
 export type Variant = "primary" | "secondary" | "ghost" | "danger";
-export type ControlSize = "xs" | "sm" | "md" | "lg";
+export type ControlSize = "xs" | "sm" | "md" | "lg" | "xlg";
 export type LegacySize = "small" | "medium" | "large";
 export type Size = ControlSize | LegacySize;
 export type Tone = "success" | "warning" | "error" | "processing" | "pending" | "offline" | "info";

package/dist/core/responsive.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xlg" | "base" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
 export type Spacing = number | string;
 /** Numbers are steps of the spacing scale; strings are raw CSS lengths. */

package/dist/forms.js

@@ -4,7 +4,7 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-TMCWA446.js";
+} from "./chunks/chunk-KAVSRD45.js";
 import "./chunks/chunk-6VPAU3TV.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-TMCWA446.js";
+} from "./chunks/chunk-KAVSRD45.js";
 import {
   ThemeProvider,
   createNeonRenderer,
@@ -369,7 +369,7 @@ var Card = ({
 import { useInsertionEffect, useRef as useRef2 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var loaderAnimations = ["spin", "pulse", "breathe", "bounce", "flip", "orbit", "wave", "glow", "fill", "shine", "wobble", "radar", "palette"];
-var loaderSizes = { xs: "2rem", sm: "3rem", md: "4rem", lg: "6rem" };
+var loaderSizes = { xs: "2rem", sm: "3rem", md: "4rem", lg: "6rem", xlg: "8rem" };
 var loaderAnimationLabel = (animation, translate2 = tr) => translate2(
   {
     spin: "\u0412\u0440\u0430\u0449\u0435\u043D\u0438\u0435",
@@ -520,7 +520,7 @@ import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var loaderGeneratorAnimations = loaderAnimations.filter(
   (animation) => animation !== "orbit" && animation !== "radar"
 );
-var loaderSizes2 = { xs: 4.5, sm: 6.5, md: 9, lg: 12 };
+var loaderSizes2 = { xs: 4.5, sm: 6.5, md: 9, lg: 12, xlg: 16 };
 var loaderRenderKey = ({ animation }) => animation;
 var loaderSizeItems = Object.keys(loaderSizes2).map((value) => ({
   value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-ui-kit/react",
-  "version": "1.3.17",
+  "version": "1.4.0",
   "description": "NEO UI — React component library",
   "type": "module",
   "license": "MIT",