highsoft-ui 1.0.172 → 1.0.174

package/dist/lib/components/Figure/ImagePair.d.ts

@@ -0,0 +1,20 @@
+import { ImgHTMLAttributes } from 'react';
+export interface ImagePairProps {
+    src: string;
+    /** Dark-theme variant; renders a second `<img>` the theme CSS swaps in. */
+    srcDark?: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+    srcSet?: string;
+    sizes?: string;
+    className?: string;
+}
+/**
+ * The figure's image, or its light/dark pair. One `<img>` without `srcDark`;
+ * with it, two with the same `alt`, of which `[data-theme]` on the page (or
+ * the OS preference) displays exactly one, so layout and assistive technology
+ * meet a single image.
+ */
+export declare function ImagePair({ src, srcDark, alt, width, height, loading, srcSet, sizes, className }: ImagePairProps): import("react").JSX.Element;

package/dist/lib/components/Figure/ZoomImage.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ImagePairProps } from './ImagePair';
+export interface ZoomImageProps extends ImagePairProps {
+    /** The figure's caption, repeated under the enlarged image. */
+    caption?: ReactNode;
+    /** Accessible name of the trigger (default "Enlarge image"). */
+    zoomLabel?: string;
+    /** Accessible name of the close control (default "Close"). */
+    closeLabel?: string;
+}
+/**
+ * The figure's image as a button that opens it enlarged in a native
+ * `<dialog>`: the browser owns the top layer, the focus trap, Escape, and
+ * returning focus to the trigger on close. The only script is showModal(),
+ * close() and the backdrop click; the transitions are CSS on the animation
+ * tokens, off under reduced motion.
+ */
+export declare function ZoomImage({ caption, zoomLabel, closeLabel, className, ...image }: ZoomImageProps): import("react").JSX.Element;

package/dist/lib/components/Figure/index.d.ts

@@ -0,0 +1,96 @@
+import { HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import { TypographyColor } from '../Typography';
+export type FigureCaptionSize = 75 | 100;
+/**
+ * How an image sits on the page. `hairline` (default): border-100 and 8px
+ * radius. `card`: the same plus the BrowserFrame shadow, for an illustration
+ * that should read as a picture placed on the page. `none`: the bare image.
+ */
+export type FigureFrame = 'none' | 'hairline' | 'card';
+interface FigureBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * The caption, rendered as a `<figcaption>` under the content. Say what the
+     * figure shows and what to notice; this is the text crawlers and AI agents
+     * read as the figure's description, and it names the figure for assistive
+     * technology.
+     */
+    caption?: ReactNode;
+    /** Caption text size — typography size `100` (default) or `75`. */
+    captionSize?: FigureCaptionSize;
+    /** Caption color (default `secondary`). */
+    captionColor?: TypographyColor;
+    /** `start` (default) aligns content and caption to the left edge; `center` centers both. */
+    align?: 'start' | 'center';
+    /**
+     * Frame around an image: `hairline` (default) is border-100 and 8px radius,
+     * `card` adds the BrowserFrame shadow so an illustration reads as a picture
+     * on the page, `none` is the bare image. Ignored when the figure wraps
+     * `children`, which draw their own frame.
+     */
+    frame?: FigureFrame;
+}
+interface FigureImageProps extends FigureBaseProps {
+    /** Image source. With `src`, Figure renders the `<img>` itself. */
+    src: string;
+    /**
+     * Dark-theme variant of the image. Both images render with the same
+     * `alt`; the page's `data-theme` (set by ThemeLoader before first paint)
+     * shows one and hides the other, with the OS preference as the fallback
+     * when no theme attribute is set. Without it the one image serves both
+     * themes: nothing is dimmed or inverted.
+     */
+    srcDark?: string;
+    /**
+     * What the image shows, in one sentence. Required with `src`; pass `""`
+     * for a purely decorative image. Keep the explanation in `caption`.
+     */
+    alt: string;
+    /** Intrinsic image size, so the browser reserves the space before the image loads. */
+    width?: number;
+    height?: number;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+    /** Responsive sources, passed through to the `<img>`. */
+    srcSet?: string;
+    sizes?: string;
+    /**
+     * Click to enlarge (default `false`). The image becomes a button that opens
+     * it in a native `<dialog>` over the page, with the caption under it;
+     * Escape, the close button or a click outside closes it and focus returns
+     * to the image. Opt in for screenshots and diagrams whose detail matters.
+     */
+    zoom?: boolean;
+    /** Accessible name of the enlarge button (default "Enlarge image"). */
+    zoomLabel?: string;
+    /** Accessible name of the dialog's close button (default "Close"). */
+    closeLabel?: string;
+    children?: never;
+}
+interface FigureWrapProps extends FigureBaseProps {
+    src?: undefined;
+    srcDark?: never;
+    alt?: never;
+    width?: never;
+    height?: never;
+    loading?: never;
+    srcSet?: never;
+    sizes?: never;
+    zoom?: never;
+    zoomLabel?: never;
+    closeLabel?: never;
+    /** The content: a `BrowserFrame`, `VideoPlayer`, `CodeBlock`, a chart, a table. */
+    children: ReactNode;
+}
+export type FigureProps = FigureImageProps | FigureWrapProps;
+/**
+ * A `<figure>` with a `<figcaption>`: an image, a live demo, a video or a
+ * code sample together with the sentence or two that explain it. Pass `src`
+ * and `alt` for an image; wrap anything else as `children`. The caption sits
+ * under the content in secondary text; spacing to the surrounding prose is
+ * the page's job.
+ *
+ * The caption is the point. An iframe's contents are not read along with the
+ * page, and an image is only its alt text, so the caption is where a search
+ * engine, an AI agent and a screen-reader user get the explanation.
+ */
+export declare const Figure: import('react').ForwardRefExoticComponent<FigureProps & import('react').RefAttributes<HTMLElement>>;
+export {};

package/dist/lib/components/TableOfContents/index.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+/** One row of the list — a heading on the page. */
+export interface TableOfContentsItem {
+    /** The heading element's `id`: the link target (`#id`) and what the scroll spy watches. */
+    id: string;
+    /** The heading text. */
+    title: ReactNode;
+    /** Nesting depth. `1` (default) is a top-level row; `2` and `3` indent 12px per step. */
+    level?: 1 | 2 | 3;
+    /** Link target. Defaults to `#${id}`. */
+    href?: string;
+}
+export interface TableOfContentsProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The page's headings, in document order. Renders nothing when empty. */
+    items: TableOfContentsItem[];
+    /**
+     * Heading above the list — the `<nav>`'s accessible name. Default
+     * `'On this page'`. Pass `null` to hide it; the nav then falls back to
+     * `aria-label` (or the default text).
+     */
+    title?: ReactNode;
+    /**
+     * The current heading's `id`. Controlled: when given, the built-in scroll
+     * spy is off and the highlight follows this prop. `null` highlights nothing.
+     */
+    activeId?: string | null;
+    /**
+     * The row that starts current in uncontrolled mode. The scroll spy takes
+     * over once it finds the headings; until then (or with `spy={false}`) this
+     * row stays current and clicks move the highlight.
+     */
+    defaultActiveId?: string | null;
+    /**
+     * Called when the current heading changes — by the scroll spy or by a click
+     * on a row. In controlled mode, use it to update `activeId`.
+     */
+    onActiveChange?: (id: string | null) => void;
+    /**
+     * Built-in scroll spy (default `true`): the current heading is the last one
+     * whose top has scrolled past `spyOffset`. Ignored when `activeId` is given.
+     */
+    spy?: boolean;
+    /**
+     * The fold line in px from the top of the viewport that a heading has to
+     * cross to become current. Set it to the height of a sticky header (plus
+     * any `scroll-margin-top` on the headings). Default `0`.
+     */
+    spyOffset?: number;
+    /**
+     * Called when a row is clicked, before the browser navigates to the hash.
+     * Call `event.preventDefault()` to take the navigation over (e.g. for an
+     * eased scroll with a header offset).
+     */
+    onItemClick?: (item: TableOfContentsItem, event: MouseEvent<HTMLAnchorElement>) => void;
+}
+/**
+ * "On this page" navigation — a rule down the left, a semibold title and one
+ * link per heading. Rows are tertiary text; hovering lifts one to primary and
+ * grows a 2px bar over the rule, which the current row keeps in a stronger
+ * colour — the bar animates in and out on the bounce token.
+ *
+ * Uncontrolled by default: a scroll spy marks the last heading that has
+ * crossed `spyOffset`, and a clicked row stays current while its heading is on
+ * screen (so a jump to a short last section doesn't snap back to the section
+ * above it). Pass `activeId` to drive the highlight yourself.
+ */
+export declare const TableOfContents: import('react').ForwardRefExoticComponent<TableOfContentsProps & import('react').RefAttributes<HTMLElement>>;

package/dist/lib/main.d.ts

@@ -19,6 +19,8 @@ export type { HeaderProps, HeaderPosition, SubHeaderItem } from './components/He
 export { Box } from './components/Box';
 export { BrowserFrame } from './components/BrowserFrame';
 export type { BrowserFrameProps, BrowserFrameAction } from './components/BrowserFrame';
+export { Figure } from './components/Figure';
+export type { FigureProps, FigureCaptionSize } from './components/Figure';
 export { CopyCode } from './components/CopyCode';
 export type { CopyCodeProps } from './components/CopyCode';
 export { CodeBlock } from './components/CodeBlock';
@@ -76,6 +78,8 @@ export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, SidebarSwit
 export { PrefPanel } from './components/PrefPanel';
 export { PrevNextNav } from './components/PrevNextNav';
 export type { PrevNextNavProps, PrevNextNavItem, PrevNextNavBack } from './components/PrevNextNav';
+export { TableOfContents } from './components/TableOfContents';
+export type { TableOfContentsProps, TableOfContentsItem } from './components/TableOfContents';
 export { VideoPlayer } from './components/VideoPlayer';
 export type { VideoPlayerProps, VideoPlayerSource, VideoPlayerTrack } from './components/VideoPlayer';
 export { VideoPlayerModal } from './components/VideoPlayer/VideoPlayerModal';

package/dist/main.js

@@ -1,55 +1,57 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-bAjntFD8.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-CdrrwvXk.js";
-import { t as s } from "./BrowserFrame-CisPLoTR.js";
-import { t as c } from "./CopyCode-72gVieQO.js";
-import { t as l } from "./FrameworkIcon-B8GmMx0r.js";
-import { t as u } from "./CodeBlock-CGBo8nwy.js";
-import { n as d, t as f } from "./ClientLogo-Dj7K48YL.js";
-import { t as p } from "./LogoCarousel-TbyB0ot0.js";
-import { t as m } from "./Icon-DJTgdvsG.js";
-import { t as h } from "./Link-CYR92_U0.js";
-import { t as g } from "./ProductIcon-C5yvnjHr.js";
-import { t as _ } from "./ButtonGroup-JtJaVLlu.js";
-import { t as v } from "./InputSolo-CbnsJlJu.js";
-import { t as y } from "./SearchDropdown-Ow5_Hu21.js";
-import { i as b, n as x, r as S, t as C } from "./InputGrouped-DLghbzO7.js";
-import { t as w } from "./Container-BDssaLig.js";
-import { t as T } from "./DiscordInvite-DfPVlJ5G.js";
-import { t as E } from "./Heading-DNDHqYWO.js";
-import { n as D } from "./Typography-DI1AkqiO.js";
-import { n as O, t as k } from "./List-B1zRI6pm.js";
-import { n as A, t as j } from "./Features-BS-_cksu.js";
-import { t as M } from "./Logo-Bz0G2G-k.js";
-import { t as N } from "./NewsletterSignup-BPLup66s.js";
-import { n as P, r as F, t as I } from "./Dropdown-DLRtYhFa.js";
-import { t as L } from "./PrefPanel-6oTpfC5q.js";
-import { n as R, t as z } from "./Label-B-Xt6XQQ.js";
-import { t as B } from "./VideoCover-25FfvhPg.js";
-import { t as V } from "./VideoPlayer-CB2lOh95.js";
-import { t as H } from "./VideoPlayerModal-CVJbPd6n.js";
-import { t as U } from "./Footer-CqtCkr_g.js";
-import { n as W } from "./GPTInput-g460kfc6.js";
-import { t as G } from "./Notification-DtqcW5FH.js";
-import { n as K, t as q } from "./Header-CQKgp8xy.js";
-import { t as J } from "./Tabs-TRXBM5Zr.js";
-import { n as Y, t as X } from "./RadioBox-C7bDjItJ.js";
-import { n as Z, t as Q } from "./Checkbox-DU_KGp-P.js";
-import { t as $ } from "./Toggle-BHjptO7-.js";
-import { t as ee } from "./ToggleCard-kMpxzTnh.js";
-import { t as te } from "./ToggleList-Dh7wb2-W.js";
-import { Modal as ne } from "./components/Modal/index.js";
-import { t as re } from "./RoadmapDetails-CLQzIxv7.js";
-import { ModalContactFooter as ie } from "./components/Modal/ModalContactFooter.js";
-import { useOptionalSidebarLayout as ae, useSidebarLayout as oe } from "./components/Sidebar/context.js";
-import { SidebarLayout as se, SidebarMain as ce } from "./components/Sidebar/SidebarLayout.js";
-import { SidebarResizer as le } from "./components/Sidebar/SidebarResizer.js";
-import { Sidebar as ue, SidebarBody as de, SidebarHeader as fe, SidebarSection as pe } from "./components/Sidebar/Sidebar.js";
-import { SidebarSwitcher as me } from "./components/Sidebar/SidebarSwitcher.js";
-import { NavItem as he } from "./components/Sidebar/NavItem.js";
-import { NavGroup as ge } from "./components/Sidebar/NavGroup.js";
-import { NavDisclosure as _e } from "./components/Sidebar/NavDisclosure.js";
+import { t as o } from "./Button-DFcjZsF4.js";
+import { t as s } from "./BrowserFrame-_qNod9an.js";
+import { n as c } from "./Typography-DI1AkqiO.js";
+import { t as l } from "./Icon-DJTgdvsG.js";
+import { Figure as u } from "./components/Figure/index.js";
+import { t as d } from "./CopyCode-DS2T69as.js";
+import { t as f } from "./FrameworkIcon-B8GmMx0r.js";
+import { t as p } from "./CodeBlock-rPC0sIvR.js";
+import { n as m, t as h } from "./ClientLogo-Dj7K48YL.js";
+import { t as g } from "./LogoCarousel-BsmxIlzx.js";
+import { t as _ } from "./Link-CYR92_U0.js";
+import { t as v } from "./ProductIcon-C5yvnjHr.js";
+import { t as y } from "./ButtonGroup-dTeFICBP.js";
+import { t as b } from "./InputSolo-CbnsJlJu.js";
+import { t as x } from "./SearchDropdown-g3g30peB.js";
+import { i as S, n as C, r as w, t as T } from "./InputGrouped-DNiMvxxa.js";
+import { t as E } from "./Container-BDssaLig.js";
+import { t as D } from "./DiscordInvite-DfPVlJ5G.js";
+import { t as O } from "./Heading-DNDHqYWO.js";
+import { n as k, t as A } from "./List-CdwPhveO.js";
+import { n as j, t as M } from "./Features-BQ5o3wcc.js";
+import { t as N } from "./Logo-Bz0G2G-k.js";
+import { t as P } from "./NewsletterSignup-CTbjNSnk.js";
+import { n as F, r as I, t as L } from "./Dropdown-Ck7IASlc.js";
+import { t as R } from "./PrefPanel-CwrWfi3R.js";
+import { n as z, t as B } from "./Label-DTIv_3zs.js";
+import { t as V } from "./VideoCover-DdN1nXfu.js";
+import { t as H } from "./VideoPlayer-C0pHiwYx.js";
+import { t as U } from "./VideoPlayerModal-Bh2u5h8g.js";
+import { t as W } from "./Footer-C2tXo3oR.js";
+import { n as G } from "./GPTInput-g460kfc6.js";
+import { t as K } from "./Notification-CTSGBhJk.js";
+import { n as q, t as J } from "./Header-DqE0a41T.js";
+import { t as Y } from "./Tabs-TRXBM5Zr.js";
+import { n as X, t as Z } from "./RadioBox-C7bDjItJ.js";
+import { n as Q, t as $ } from "./Checkbox-X7FrR_6F.js";
+import { t as ee } from "./Toggle-BHjptO7-.js";
+import { t as te } from "./ToggleCard-kMpxzTnh.js";
+import { t as ne } from "./ToggleList-Dh7wb2-W.js";
+import { Modal as re } from "./components/Modal/index.js";
+import { t as ie } from "./RoadmapDetails-B-2pgXHz.js";
+import { ModalContactFooter as ae } from "./components/Modal/ModalContactFooter.js";
+import { useOptionalSidebarLayout as oe, useSidebarLayout as se } from "./components/Sidebar/context.js";
+import { SidebarLayout as ce, SidebarMain as le } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as ue } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as de, SidebarBody as fe, SidebarHeader as pe, SidebarSection as me } from "./components/Sidebar/Sidebar.js";
+import { SidebarSwitcher as he } from "./components/Sidebar/SidebarSwitcher.js";
+import { NavItem as ge } from "./components/Sidebar/NavItem.js";
+import { NavGroup as _e } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ve } from "./components/Sidebar/NavDisclosure.js";
 import "./components/Sidebar/index.js";
-import { t as ve } from "./PrevNextNav-XaxS2FTm.js";
-import { ThemeLoader as ye, themeLoaderScript as be } from "./components/ThemeLoader/index.js";
-export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, Q as Checkbox, Z as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, I as Dropdown, P as DropdownItem, F as DropdownSeparator, j as FeatureItem, A as Features, U as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, W as GPTInput, q as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, z as Label, h as Link, k as List, O as ListItem, M as Logo, p as LogoCarousel, ne as Modal, ie as ModalContactFooter, _e as NavDisclosure, ge as NavGroup, he as NavItem, R as NewTag, N as NewsletterSignup, G as Notification, L as PrefPanel, ve as PrevNextNav, g as ProductIcon, X as RadioBox, Y as RadioBoxGroup, re as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, ue as Sidebar, de as SidebarBody, fe as SidebarHeader, se as SidebarLayout, ce as SidebarMain, le as SidebarResizer, pe as SidebarSection, me as SidebarSwitcher, K as SubHeader, J as Tabs, ye as ThemeLoader, i as ThemeProvider, $ as Toggle, ee as ToggleCard, te as ToggleList, D as Typography, B as VideoCover, V as VideoPlayer, H as VideoPlayerModal, d as clientLogoLabels, be as themeLoaderScript, n as useClipboard, t as useNextTheme, ae as useOptionalSidebarLayout, oe as useSidebarLayout, r as useSuccessFlash, e as useTheme };
+import { t as ye } from "./PrevNextNav-BwP-lRaG.js";
+import { t as be } from "./TableOfContents-d26S7KYx.js";
+import { ThemeLoader as xe, themeLoaderScript as Se } from "./components/ThemeLoader/index.js";
+export { a as Box, s as BrowserFrame, o as Button, y as ButtonGroup, $ as Checkbox, Q as CheckboxGroup, h as ClientLogo, p as CodeBlock, E as Container, d as CopyCode, D as DiscordInvite, L as Dropdown, F as DropdownItem, I as DropdownSeparator, M as FeatureItem, j as Features, u as Figure, W as Footer, T as FormGroup, C as FormRow, f as FrameworkIcon, G as GPTInput, J as Header, O as Heading, l as Icon, w as InputGrouped, b as InputSolo, B as Label, _ as Link, A as List, k as ListItem, N as Logo, g as LogoCarousel, re as Modal, ae as ModalContactFooter, ve as NavDisclosure, _e as NavGroup, ge as NavItem, z as NewTag, P as NewsletterSignup, K as Notification, R as PrefPanel, ye as PrevNextNav, v as ProductIcon, Z as RadioBox, X as RadioBoxGroup, ie as RoadmapDetails, x as SearchDropdown, S as SelectGrouped, de as Sidebar, fe as SidebarBody, pe as SidebarHeader, ce as SidebarLayout, le as SidebarMain, ue as SidebarResizer, me as SidebarSection, he as SidebarSwitcher, q as SubHeader, be as TableOfContents, Y as Tabs, xe as ThemeLoader, i as ThemeProvider, ee as Toggle, te as ToggleCard, ne as ToggleList, c as Typography, V as VideoCover, H as VideoPlayer, U as VideoPlayerModal, m as clientLogoLabels, Se as themeLoaderScript, n as useClipboard, t as useNextTheme, oe as useOptionalSidebarLayout, se as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/dist/{prism-light-oph9ikSp.js → prism-light-D9OePufj.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-DvDqDt-f.js";
+import { r as t, t as n } from "./create-element-DHbI55TT.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.172",
+  "version": "1.0.174",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "generate:api": "node scripts/extract-component-api.mjs",
-    "predev": "node scripts/extract-component-api.mjs",
+    "predev": "node scripts/extract-component-api.mjs && npm run studio:assets",
     "dev": "astro dev",
     "build": "tsc -p ./tsconfig.build.json && vite build",
     "build:app": "astro build",
@@ -49,12 +49,17 @@
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --write",
     "prettier-ci": "npx prettier . --check",
-    "prebuild:app": "node scripts/extract-component-api.mjs",
+    "prebuild:app": "node scripts/extract-component-api.mjs && npm run studio:assets",
     "icons": "node scripts/convert-product-icons.cjs",
     "icons:frameworks": "node scripts/convert-framework-icons.cjs",
     "icons:clients": "node scripts/convert-client-logos.cjs",
     "stylelint": "npx stylelint '**/*.css'",
-    "prepare": "husky && husky install"
+    "prepare": "husky && husky install",
+    "studio:assets": "node tools/icon-studio/scripts/prepare-assets.mjs",
+    "studio:serve": "python3 tools/icon-studio/viewer/serve.py",
+    "test:studio": "node --test tools/icon-studio/viewer/test-*.mjs && python3 -m unittest discover -s tools/icon-studio/viewer -p 'test_*.py'",
+    "studio:test-browser": "node tools/icon-studio/scripts/prepare-assets.mjs --test-browser",
+    "studio:verify-addon": "python3 tools/icon-studio/scripts/verify-addon.py"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -104,6 +109,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
+    "fflate": "^0.8.2",
     "glob": "^13.0.0",
     "globals": "^17.0.0",
     "husky": "^9.0.11",
@@ -118,6 +124,7 @@
     "stylelint": "^17.0.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
+    "three": "^0.186.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.31.1",
     "vite": "^8.0.0",