@wallarm-org/design-system 1.30.0 → 1.31.0

package/dist/components/CodeSnippet/index.d.ts

@@ -6,6 +6,7 @@ export { CodeSnippetCode, type CodeSnippetCodeProps } from './CodeSnippetCode';
 export { CodeSnippetContent, type CodeSnippetContentProps } from './CodeSnippetContent';
 export { type CodeSnippetContextValue, type CodeSnippetSize, type LineColor, type LineConfig, type LineRange, type LineTextStyle, } from './CodeSnippetContext';
 export { CodeSnippetCopyButton, type CodeSnippetCopyButtonProps } from './CodeSnippetCopyButton';
+export { type CodeSnippetFrameContextValue } from './CodeSnippetFrameContext';
 export { CodeSnippetFullscreenButton, type CodeSnippetFullscreenButtonProps, } from './CodeSnippetFullscreenButton';
 export { CodeSnippetHeader, type CodeSnippetHeaderProps } from './CodeSnippetHeader';
 export { CodeSnippetLineNumbers, type CodeSnippetLineNumbersProps } from './CodeSnippetLineNumbers';
@@ -15,7 +16,7 @@ export { CodeSnippetTab, type CodeSnippetTabProps } from './CodeSnippetTab';
 export { CodeSnippetTabs, type CodeSnippetTabsProps } from './CodeSnippetTabs';
 export { CodeSnippetTitle, type CodeSnippetTitleProps } from './CodeSnippetTitle';
 export { CodeSnippetWrapButton, type CodeSnippetWrapButtonProps } from './CodeSnippetWrapButton';
-export { useAdapter, useCodeSnippet } from './hooks';
+export { useAdapter, useCodeSnippet, useCodeSnippetFrame } from './hooks';
 export { InlineCodeSnippet, type InlineCodeSnippetProps } from './InlineCodeSnippet';
 export { type FoldButtonProps, type FoldRegion } from './lib/foldUtils';
 export { getHttpFolds, HTTP_FOLD_ID, type HttpFoldOptions, type HttpFoldSectionOptions, } from './lib/httpFolds';

package/dist/components/CodeSnippet/index.js

@@ -13,6 +13,6 @@ export { CodeSnippetTab } from "./CodeSnippetTab.js";
 export { CodeSnippetTabs } from "./CodeSnippetTabs.js";
 export { CodeSnippetTitle } from "./CodeSnippetTitle.js";
 export { CodeSnippetWrapButton } from "./CodeSnippetWrapButton.js";
-export { useAdapter, useCodeSnippet } from "./hooks/index.js";
+export { useAdapter, useCodeSnippet, useCodeSnippetFrame } from "./hooks/index.js";
 export { InlineCodeSnippet } from "./InlineCodeSnippet.js";
 export { HTTP_FOLD_ID, getHttpFolds } from "./lib/httpFolds.js";

package/dist/components/CodeSnippet/internal/CodeSnippetFrame.d.ts

@@ -0,0 +1,22 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CodeSnippetFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    isFullscreen: boolean;
+    setIsFullscreen: (fullscreen: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * Frame shell shared by CodeSnippetRoot and CodeEditorRoot.
+ *
+ * The root `<div>` (with every consumer prop, `className` and `ref`) is always
+ * rendered through `createPortal` into one persistent host element. Entering or
+ * leaving fullscreen only moves that host between an inline placeholder and
+ * `document.body`, so the subtree is never remounted (child state, focus
+ * targets, editor instances survive). Fullscreen classes are merged into the
+ * consumer `className`, not substituted.
+ *
+ * SSR: on the server (and during the hydration pass) the root renders inline
+ * inside the placeholder; the client switches to the portal right after
+ * hydration (a one-time remount at mount, never on fullscreen toggle).
+ */
+export declare const CodeSnippetFrame: FC<CodeSnippetFrameProps>;

package/dist/components/CodeSnippet/internal/CodeSnippetFrame.js

@@ -0,0 +1,81 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+const FULLSCREEN_CLASSES = 'fixed inset-16 z-50 m-0 w-auto h-auto min-w-0 min-h-0 max-w-[none] max-h-[none]';
+const BACKDROP_CLASSES = 'fixed inset-0 z-40 backdrop-blur-xs bg-component-dialog-overlay';
+const HOST_CLASSES = 'contents';
+const noop = ()=>{};
+const subscribeNoop = ()=>noop;
+const getClientSnapshot = ()=>true;
+const getServerSnapshot = ()=>false;
+const createHost = ()=>{
+    if ("u" < typeof document) return null;
+    const host = document.createElement('div');
+    host.className = HOST_CLASSES;
+    return host;
+};
+const CodeSnippetFrame = ({ ref, isFullscreen, setIsFullscreen, className, children, ...props })=>{
+    const backdropTestId = useTestId('backdrop');
+    const placeholderRef = useRef(null);
+    const [host] = useState(createHost);
+    const canPortal = useSyncExternalStore(subscribeNoop, getClientSnapshot, getServerSnapshot);
+    const portalReady = canPortal && null !== host;
+    useLayoutEffect(()=>{
+        if (!host) return;
+        return ()=>host.remove();
+    }, [
+        host
+    ]);
+    useLayoutEffect(()=>{
+        if (!portalReady || !host) return;
+        const target = isFullscreen ? document.body : placeholderRef.current;
+        if (!target || host.parentNode === target) return;
+        const active = document.activeElement;
+        const refocus = active instanceof HTMLElement && host.contains(active) ? active : null;
+        target.appendChild(host);
+        if (refocus && !refocus.isSameNode(document.activeElement)) refocus.focus({
+            preventScroll: true
+        });
+    }, [
+        portalReady,
+        host,
+        isFullscreen
+    ]);
+    useEffect(()=>{
+        if (!isFullscreen) return;
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key && !event.defaultPrevented) setIsFullscreen(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isFullscreen,
+        setIsFullscreen
+    ]);
+    const frame = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isFullscreen ? /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                "data-testid": backdropTestId,
+                className: BACKDROP_CLASSES,
+                onClick: ()=>setIsFullscreen(false)
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                ...props,
+                ref: ref,
+                className: cn(className, isFullscreen && FULLSCREEN_CLASSES),
+                children: children
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: placeholderRef,
+        "data-slot": "code-snippet-frame",
+        className: HOST_CLASSES,
+        children: portalReady && host ? /*#__PURE__*/ createPortal(frame, host) : frame
+    });
+};
+CodeSnippetFrame.displayName = 'CodeSnippetFrame';
+export { CodeSnippetFrame };

package/dist/components/CodeSnippet/internal/CodeToken.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
-import type { Token } from '../adapters/types';
+import type { Token, TokenType } from '../adapters/types';
+export declare const TOKEN_CLASSES: Record<TokenType, string>;
 export type CodeTokenProps = {
     token: Token;
     colorClass?: string;

package/dist/components/CodeSnippet/internal/CodeToken.js

@@ -23,4 +23,4 @@ const CodeToken = ({ token, colorClass, rangeColorClass })=>/*#__PURE__*/ jsx("s
         className: rangeColorClass ?? colorClass ?? token.className ?? TOKEN_CLASSES[token.type],
         children: token.content
     });
-export { CodeToken };
+export { CodeToken, TOKEN_CLASSES };

package/dist/components/CodeSnippet/internal/FoldSummary.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import type { FoldRegion } from '../lib/foldUtils';
+export interface FoldSummaryProps {
+    fold: FoldRegion;
+    lineCount: number;
+    onToggle: () => void;
+    /** Default `data-testid`; `fold.summaryProps['data-testid']` still wins. */
+    testId?: string;
+}
+/** Collapsed-fold summary button. Shared by CodeSnippetCode and the CodeEditor fold widget. */
+export declare const FoldSummary: FC<FoldSummaryProps>;

package/dist/components/CodeSnippet/internal/FoldSummary.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { getFoldSummaryLabel } from "../lib/foldUtils.js";
+const FoldSummary = ({ fold, lineCount, onToggle, testId })=>{
+    const label = getFoldSummaryLabel(fold, lineCount);
+    const { className, onClick, ...summaryProps } = fold.summaryProps ?? {};
+    const handleClick = (event)=>{
+        onToggle();
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn('inline-flex items-center cursor-pointer select-none', className),
+        "aria-expanded": false,
+        "aria-label": `Collapsed region: ${label}, ${lineCount} lines`,
+        "data-slot": "code-snippet-fold-summary",
+        "data-testid": testId,
+        ...summaryProps,
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsx("span", {
+            className: "inline-flex items-center italic text-text-secondary hover:text-text-primary transition-colors",
+            children: label
+        })
+    });
+};
+FoldSummary.displayName = 'FoldSummary';
+export { FoldSummary };

package/dist/components/CodeSnippet/internal/FoldToggle.d.ts

@@ -4,4 +4,6 @@ export declare const FoldToggle: FC<{
     fold: FoldRegion;
     isCollapsed: boolean;
     onToggle: () => void;
+    /** Default `data-testid`; `fold.toggleProps['data-testid']` still wins. */
+    testId?: string;
 }>;

package/dist/components/CodeSnippet/internal/FoldToggle.js

@@ -3,7 +3,7 @@ import { ChevronDown } from "../../../icons/ChevronDown.js";
 import { ChevronRight } from "../../../icons/ChevronRight.js";
 import { cn } from "../../../utils/cn.js";
 import { getFoldSummaryLabel } from "../lib/foldUtils.js";
-const FoldToggle = ({ fold, isCollapsed, onToggle })=>{
+const FoldToggle = ({ fold, isCollapsed, onToggle, testId })=>{
     const lineCount = fold.endLine - fold.startLine + 1;
     const label = getFoldSummaryLabel(fold, lineCount);
     const ariaLabel = isCollapsed ? `Expand ${label}` : `Collapse ${label}`;
@@ -17,6 +17,7 @@ const FoldToggle = ({ fold, isCollapsed, onToggle })=>{
         className: cn('flex items-center justify-center w-16 h-16 rounded-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer', className),
         "aria-expanded": !isCollapsed,
         "aria-label": ariaLabel,
+        "data-testid": testId,
         ...toggleProps,
         onClick: handleClick,
         children: isCollapsed ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})

package/dist/components/CodeSnippet/internal/index.d.ts

@@ -2,5 +2,6 @@ export { CodeContent, type CodeContentProps } from './CodeContent';
 export { CodeLine, type CodeLineProps } from './CodeLine';
 export { CodeToken, type CodeTokenProps } from './CodeToken';
 export { ColorStickColumn } from './ColorStickColumn';
+export { FoldSummary, type FoldSummaryProps } from './FoldSummary';
 export { PrefixColumn } from './PrefixColumn';
 export { TokenizedCodeLine, type TokenizedCodeLineProps } from './TokenizedCodeLine';

package/dist/components/CodeSnippet/internal/index.js

@@ -2,5 +2,6 @@ export { CodeContent } from "./CodeContent.js";
 export { CodeLine } from "./CodeLine.js";
 export { CodeToken } from "./CodeToken.js";
 export { ColorStickColumn } from "./ColorStickColumn.js";
+export { FoldSummary } from "./FoldSummary.js";
 export { PrefixColumn } from "./PrefixColumn.js";
 export { TokenizedCodeLine } from "./TokenizedCodeLine.js";

package/dist/components/CodeSnippet/lib/foldUtils.d.ts

@@ -1,5 +1,8 @@
 import type { ButtonHTMLAttributes } from 'react';
-export type FoldButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
+export type FoldButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    /** Hyphenated `data-*` attributes (e.g. `data-analytics-id`) are not part of the DOM typings. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+};
 export type FoldRegion = {
     /** Unique identifier for this fold region */
     id: string;
@@ -26,9 +29,13 @@ export type DisplayItem = {
     lineCount: number;
 };
 export declare function getFoldSummaryLabel(fold: FoldRegion, lineCount: number): string;
+export type ValidateFoldsOptions = {
+    /** Log dev warnings for skipped folds. Default: true */
+    warn?: boolean;
+};
 /**
  * Validates fold regions and returns a clean, sorted list.
  * Dev: logs warnings for invalid folds. Prod: silently filters them out.
  */
-export declare function validateFolds(folds: FoldRegion[], totalLines: number, startingLineNumber?: number): FoldRegion[];
+export declare function validateFolds(folds: readonly FoldRegion[], totalLines: number, startingLineNumber?: number, options?: ValidateFoldsOptions): FoldRegion[];
 export declare function buildDisplayItems(totalLines: number, folds: FoldRegion[], collapsedFolds: Set<string>, startingLineNumber: number): DisplayItem[];

package/dist/components/CodeSnippet/lib/foldUtils.js

@@ -1,8 +1,8 @@
 function getFoldSummaryLabel(fold, lineCount) {
     return fold.label ?? `${lineCount} lines`;
 }
-function validateFolds(folds, totalLines, startingLineNumber = 1) {
-    const isDev = 'production' !== process.env.NODE_ENV;
+function validateFolds(folds, totalLines, startingLineNumber = 1, options) {
+    const isDev = options?.warn !== false && 'production' !== process.env.NODE_ENV;
     const valid = [];
     const seenIds = new Set();
     const lastLine = startingLineNumber + totalLines - 1;

package/dist/components/CodeSnippet/lib/showMore.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+/** True when a direct child is a `CodeSnippetShowMoreButton` (root then skips the auto-rendered one). */
+export declare const hasExplicitShowMoreButton: (children: ReactNode) => boolean;
+/** Rows beyond `maxLines`, independent of the expanded state. 0 when `maxLines <= 0`. */
+export declare const getHiddenLineCount: (totalRows: number, maxLines: number) => number;
+/** Whether content is currently clipped to `maxLines`. */
+export declare const isClamped: (hiddenLineCount: number, isExpanded: boolean) => boolean;

package/dist/components/CodeSnippet/lib/showMore.js

@@ -0,0 +1,7 @@
+import { Children, isValidElement } from "react";
+import { MIN_HIDDEN_LINES_THRESHOLD } from "../CodeSnippetContext.js";
+const SHOW_MORE_BUTTON_DISPLAY_NAME = 'CodeSnippetShowMoreButton';
+const hasExplicitShowMoreButton = (children)=>Children.toArray(children).some((child)=>isValidElement(child) && 'string' != typeof child.type && child.type.displayName === SHOW_MORE_BUTTON_DISPLAY_NAME);
+const getHiddenLineCount = (totalRows, maxLines)=>maxLines > 0 ? Math.max(0, totalRows - maxLines) : 0;
+const isClamped = (hiddenLineCount, isExpanded)=>hiddenLineCount >= MIN_HIDDEN_LINES_THRESHOLD && !isExpanded;
+export { getHiddenLineCount, hasExplicitShowMoreButton, isClamped };

package/dist/components/Copyable/Copyable.d.ts

@@ -1,7 +1,10 @@
 import { type FC, type ReactNode } from 'react';
 export interface CopyableProps {
-    /** The text to copy to the clipboard. */
-    text: string;
+    /**
+     * The text to copy to the clipboard. Pass a function to read the text
+     * lazily at click time (e.g. the live document of an editor).
+     */
+    text: string | (() => string);
     /**
      * Show a tooltip with copy feedback.
      *

package/dist/components/Copyable/Copyable.js

@@ -11,7 +11,7 @@ const Copyable = ({ text, tooltip, onCopied, resetDelay = 2000, children })=>{
     const keepOpenTimerRef = useRef(void 0);
     const tooltipOpen = hovering || keepOpen;
     const handleClick = useCallback((_event)=>{
-        copy(text);
+        copy('function' == typeof text ? text() : text);
         onCopied?.();
         if (tooltip) {
             setKeepOpen(true);