highsoft-ui 1.0.172 → 1.0.173

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

@@ -76,6 +76,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

@@ -51,5 +51,6 @@ import { NavGroup as ge } from "./components/Sidebar/NavGroup.js";
 import { NavDisclosure as _e } 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 "./TableOfContents-d26S7KYx.js";
+import { ThemeLoader as be, themeLoaderScript as xe } 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, ye as TableOfContents, J as Tabs, be 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, xe as themeLoaderScript, n as useClipboard, t as useNextTheme, ae as useOptionalSidebarLayout, oe as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.172",
+  "version": "1.0.173",
   "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",