@inkra/react 0.2.0 → 0.3.0

package/dist/number-ticker/precision.js

@@ -0,0 +1,134 @@
+import { Decimal } from 'decimal.js';
+// Isolated arithmetic context; never change the application's Decimal defaults.
+// Covers the full span of the bounded input exponents and significant digits.
+export const ExactDecimal = Decimal.clone({ precision: 30050, toExpNeg: -7, toExpPos: 21 });
+const decimalPattern = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
+const maxDigits = 10000;
+export function tickerDecimal(value) {
+    const source = typeof value === 'number' && Object.is(value, -0) ? '-0' : String(value).trim();
+    if (typeof value !== 'number') {
+        const [coefficient, exponent = '0'] = source.split(/[eE]/);
+        if (!decimalPattern.test(source) || coefficient.replace(/\D/g, '').length > maxDigits
+            || exponent.length > 7 || Math.abs(Number(exponent)) > maxDigits) {
+            throw new RangeError('NumberTicker requires a decimal value with at most 10000 digits and an exponent between -10000 and 10000');
+        }
+    }
+    const decimal = new ExactDecimal(source);
+    if (decimal.isFinite() && Math.abs(decimal.e) > maxDigits) {
+        throw new RangeError('NumberTicker decimal magnitude exceeds the supported exponent range');
+    }
+    return decimal;
+}
+export function tickerValueKey(value) {
+    return JSON.stringify(value, (_key, item) => typeof item === 'bigint' ? { $bigint: String(item) } : item);
+}
+const roundingModes = {
+    ceil: Decimal.ROUND_CEIL, floor: Decimal.ROUND_FLOOR,
+    expand: Decimal.ROUND_UP, trunc: Decimal.ROUND_DOWN,
+    halfCeil: Decimal.ROUND_HALF_CEIL, halfFloor: Decimal.ROUND_HALF_FLOOR,
+    halfExpand: Decimal.ROUND_HALF_UP, halfTrunc: Decimal.ROUND_HALF_DOWN,
+    halfEven: Decimal.ROUND_HALF_EVEN,
+};
+function roundedDecimal(value, options) {
+    const extra = options;
+    const mode = roundingModes[extra.roundingMode ?? 'halfExpand'];
+    const maxFraction = options.maximumFractionDigits ?? 0;
+    const increment = new ExactDecimal(extra.roundingIncrement ?? 1).times(new ExactDecimal(10).pow(-maxFraction));
+    const fraction = value.div(increment).toDecimalPlaces(0, mode).times(increment);
+    const significant = options.maximumSignificantDigits === undefined ? null : value.toSignificantDigits(options.maximumSignificantDigits, mode);
+    const significantPlace = value.e - (options.maximumSignificantDigits ?? 1) + 1;
+    const useSignificant = significant !== null && (extra.roundingPriority === 'morePrecision'
+        ? significantPlace < -maxFraction : extra.roundingPriority === 'lessPrecision'
+        ? significantPlace >= -maxFraction : true);
+    const rounded = useSignificant ? significant : fraction;
+    const decimals = extra.trailingZeroDisplay === 'stripIfInteger' && rounded.isInteger() ? 0
+        : useSignificant ? Math.max(0, (options.minimumSignificantDigits ?? 1) - rounded.e - 1)
+            : options.minimumFractionDigits ?? 0;
+    return { value: rounded, decimals };
+}
+// Intl accepts exact decimal strings in modern engines, but some engines still
+// turn strings beyond Number.MAX_VALUE into Infinity. BigInt bypasses that path.
+export function formatExactParts(formatter, value) {
+    if (typeof value === 'number')
+        return formatter.formatToParts(value);
+    const decimal = Decimal.isDecimal(value) ? value : tickerDecimal(value);
+    if (!decimal.isFinite())
+        return formatter.formatToParts(decimal.toNumber());
+    if (decimal.isZero())
+        return formatter.formatToParts(decimal.isNegative() ? -0 : 0);
+    if (decimal.isInteger())
+        return formatter.formatToParts(BigInt(decimal.toFixed(0)));
+    if (decimal.e < 308) {
+        const exactFormat = formatter.formatToParts;
+        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
+        if (probe.format('9007199254740993') !== '9007199254740993') {
+            throw new RangeError('NumberTicker decimal strings require exact Intl.NumberFormat string support');
+        }
+        return exactFormat.call(formatter, decimal.toString());
+    }
+    const options = formatter.resolvedOptions();
+    // Directed rounding still observes tiny tails at huge magnitudes. Round the
+    // mantissa before converting to BigInt, then let Intl supply locale notation.
+    if (options.notation === 'scientific' || options.notation === 'engineering') {
+        const display = options.style === 'percent' ? decimal.times(100) : decimal;
+        const exponent = options.notation === 'engineering' ? Math.floor(display.e / 3) * 3 : display.e;
+        const factor = new ExactDecimal(10).pow(exponent);
+        const rounded = roundedDecimal(display.div(factor), options).value.times(factor);
+        const originalScale = options.style === 'percent' ? rounded.div(100) : rounded;
+        return formatter.formatToParts(BigInt(originalScale.toFixed(0)));
+    }
+    let scaled = options.style === 'percent' ? decimal.times(100) : decimal;
+    if (options.notation === 'compact') {
+        const probe = new Intl.NumberFormat(options.locale, { ...options, style: 'decimal', useGrouping: false });
+        const digits = probe.formatToParts(BigInt(new ExactDecimal(10).pow(scaled.e).toFixed(0)))
+            .filter(part => part.type === 'integer').map(part => Array.from(part.value).length).reduce((sum, length) => sum + length, 0);
+        scaled = scaled.div(new ExactDecimal(10).pow(scaled.e - digits + 1));
+    }
+    const rounded = roundedDecimal(scaled, options);
+    const [integer, fraction = ''] = rounded.value.abs().toFixed().split('.');
+    const fractionalDigits = fraction.padEnd(rounded.decimals, '0');
+    const plain = new Intl.NumberFormat(options.locale, {
+        numberingSystem: options.numberingSystem, minimumIntegerDigits: options.minimumIntegerDigits,
+        useGrouping: options.useGrouping, maximumFractionDigits: 0,
+    });
+    const numericParts = plain.formatToParts(BigInt(integer));
+    if (fractionalDigits) {
+        const digits = new Intl.NumberFormat(options.locale, { numberingSystem: options.numberingSystem, useGrouping: false });
+        const symbols = Array.from({ length: 10 }, (_, digit) => digits.format(digit));
+        numericParts.push({ type: 'decimal', value: digits.formatToParts(1.1).find(part => part.type === 'decimal').value }, { type: 'fraction', value: fractionalDigits.replace(/\d/g, digit => symbols[Number(digit)]) });
+    }
+    const pattern = formatter.formatToParts(BigInt(decimal.trunc().toFixed(0)));
+    // Long unit/currency names depend on the displayed fraction as well as the
+    // integer ending. Preserve plural operands without passing an overflowing
+    // decimal string to Intl (CLDR cardinal rules inspect at most six end digits).
+    const pluralParts = options.style === 'unit' || (options.style === 'currency' && options.currencyDisplay === 'name')
+        ? formatExactParts(new Intl.NumberFormat(options.locale, {
+            numberingSystem: options.numberingSystem, style: options.style,
+            unit: options.unit, unitDisplay: options.unitDisplay,
+            currency: options.currency, currencyDisplay: options.currencyDisplay,
+            minimumFractionDigits: fractionalDigits.length, maximumFractionDigits: fractionalDigits.length,
+        }), `${BigInt(integer) > 1000000n ? 1000000n + BigInt(integer) % 1000000n : BigInt(integer)}${fractionalDigits ? `.${fractionalDigits}` : ''}`)
+        : undefined;
+    let inserted = false;
+    return pattern.flatMap(part => {
+        if (part.type === 'unit' || part.type === 'currency') {
+            return [pluralParts?.find(candidate => candidate.type === part.type) ?? part];
+        }
+        if (!['integer', 'group', 'decimal', 'fraction'].includes(part.type))
+            return [part];
+        if (inserted)
+            return [];
+        inserted = true;
+        return numericParts;
+    });
+}
+export function subtractTickerValues(next, previous) {
+    const to = tickerDecimal(next);
+    const from = tickerDecimal(previous);
+    if (!to.isFinite() || !from.isFinite())
+        return null;
+    if (typeof next === 'number' && typeof previous === 'number')
+        return next - previous;
+    const difference = to.minus(from);
+    return typeof next === 'bigint' && typeof previous === 'bigint' ? BigInt(difference.toFixed(0)) : difference.toString();
+}

package/dist/overlay/Overlay.d.ts

@@ -7,7 +7,7 @@ export declare function OverlayRoot(props: OverlayRootProps): import("react").JS
 export type OverlayTriggerProps = DialogPrimitive.DialogTriggerProps;
 export declare const OverlayTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type OverlayPortalProps = DialogPrimitive.DialogPortalProps;
-export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): import("react").JSX.Element;
+export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): ReactNode;
 export type OverlayBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const OverlayBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface OverlayContentProps extends DialogPrimitive.DialogContentProps {

package/dist/overlay/Overlay.js

@@ -8,7 +8,7 @@ import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -20,13 +20,15 @@ export const OverlayTrigger = forwardRef(function OverlayTrigger(props, forwarde
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: ref });
 });
 export function OverlayPortal({ children, ...props }) {
-    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const OverlayBackdrop = forwardRef(function OverlayBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-overlay__backdrop', className), ref: ref }));
 });
 export const OverlayContent = forwardRef(function OverlayContent({ children, className, layout = 'plain', seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-overlay__content', className), "data-layout": layout, ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-overlay__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-overlay-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-overlay__content-body", children: children }) }) }));
 });
 export const OverlayTitle = forwardRef(function OverlayTitle({ children, className, seed, ...props }, ref) {

package/dist/overlay/Popover.d.ts

@@ -8,7 +8,7 @@ export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Po
 export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopoverPortalProps = PopoverPrimitive.PopoverPortalProps;
-export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").JSX.Element;
+export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").ReactNode;
 export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
     arrowProps?: PopoverArrowProps;
     seed?: string | number;

package/dist/overlay/Popover.js

@@ -3,7 +3,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { forwardRef, useId } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -16,10 +16,11 @@ export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwarde
     return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref });
 });
 export function PopoverPortal({ children, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(PopoverPrimitive.Portal, { ...props, children: child }));
 }
 export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
 });
 export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {

package/dist/overlay/themeBridge.d.ts

@@ -1,8 +1,19 @@
-import type { ForwardedRef, ReactNode } from 'react';
+import type { CSSProperties, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+type InkraStyle = CSSProperties & Record<`--inkra-${string}`, string>;
 export declare function PortalThemeProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function usePortalTriggerRef<Element extends HTMLElement>(forwardedRef: ForwardedRef<Element>): (node: Element | null) => void;
+export declare function mapPortalChildren(children: ReactNode, render: (child: ReactNode) => ReactNode): ReactNode;
+export declare function usePortalThemeProps<Props extends HTMLAttributes<HTMLElement>>(props: Props): {
+    'data-inkra-theme': string | undefined;
+    'data-theme': string | undefined;
+    dir: "ltr" | "rtl";
+    lang: string | undefined;
+} & Props & {
+    style: InkraStyle;
+};
 export declare const PortalThemeBridge: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/overlay/themeBridge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { Children, Fragment, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 const emptySnapshot = {
     direction: 'ltr',
     style: {},
@@ -86,6 +86,32 @@ export function usePortalTriggerRef(forwardedRef) {
         captureTrigger?.(node);
     }, [captureTrigger, forwardedRef]);
 }
+// Presence must receive each animated DOM node, not a display:contents wrapper.
+export function mapPortalChildren(children, render) {
+    return Children.map(children, child => {
+        if (isValidElement(child) && child.type === Fragment) {
+            return mapPortalChildren(child.props.children, render);
+        }
+        return child == null ? null : render(child);
+    });
+}
+export function usePortalThemeProps(props) {
+    const context = useContext(PortalThemeContext);
+    const depth = context?.depth ?? 0;
+    const snapshot = context?.snapshot ?? emptySnapshot;
+    return {
+        'data-inkra-theme': snapshot.inkraTheme,
+        'data-theme': snapshot.theme,
+        dir: snapshot.direction,
+        lang: snapshot.language,
+        ...props,
+        style: {
+            ...snapshot.style,
+            '--inkra-floating-layer-offset': `${depth * 20}`,
+            ...props.style,
+        },
+    };
+}
 export const PortalThemeBridge = forwardRef(function PortalThemeBridge({ children }, ref) {
     const context = useContext(PortalThemeContext);
     const depth = context?.depth ?? 0;

package/dist/radar/index.d.ts

@@ -42,6 +42,8 @@ export interface RadarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     showValues?: boolean;
     showTable?: boolean;
     legendLabel?: ReactNode;
+    tableCaption?: ReactNode;
+    seriesLabel?: ReactNode;
     missingLabel?: string;
     emptyMessage?: ReactNode;
     selectedSeries?: RadarKey | null;

package/dist/radar/index.js

@@ -169,7 +169,7 @@ function domainForAxis(axis, values) {
 function paintStyle(color) {
     return { '--inkra-accent': color, '--inkra-accent-soft': color, '--inkra-accent-strong': color };
 }
-export const Radar = forwardRef(function Radar({ axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = 'Series', missingLabel = 'Missing', emptyMessage = 'No radar data', selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props }, forwardedRef) {
+export const Radar = forwardRef(function Radar({ axes, series, label, description, size = 'min(100%, 34rem)', maxRadius, levels = 4, showAxes = true, showLabels = true, showLegend = true, showValues = true, showTable = true, legendLabel = 'Series', tableCaption = 'Radar data', seriesLabel = 'Series', missingLabel = 'Missing', emptyMessage = 'No radar data', selectedSeries, defaultSelectedSeries = null, onSelectedSeriesChange, renderAxisLabel, renderValueLabel, getValueLabel, className, style, ...props }, forwardedRef) {
     const id = useId();
     const labelId = `inkra-radar-${id}-label`;
     const descriptionId = description == null ? undefined : `inkra-radar-${id}-description`;
@@ -216,5 +216,5 @@ export const Radar = forwardRef(function Radar({ axes, series, label, descriptio
                                             const context = { axis: point.axis, series: item, point: point.point, value: point.value, missing: point.value == null };
                                             return _jsxs("span", { className: "inkra-radar__value", "data-missing": context.missing || undefined, children: [_jsx("strong", { children: textNode(point.axis.label, `${id}-value-axis-${String(point.axis.id)}`) }), " ", textNode(renderValue(context), `${id}-value-${String(item.id)}-${String(point.axis.id)}`)] }, pointIndex);
                                         }) })] }, keyPart(item.id));
-                        }) }), showLegend ? _jsxs("div", { "aria-label": typeof legendLabel === 'string' ? legendLabel : undefined, className: "inkra-radar__legend", role: "group", children: [_jsx("span", { className: "inkra-radar__legend-title", children: textNode(legendLabel, `${id}-legend-title`) }), visibleSeries.map((item, index) => _jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-legend-${keyPart(item.id)}`, style: paintStyle(item.color ?? palette[index % palette.length]), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-legend-${String(item.id)}`)] }, keyPart(item.id)))] }) : null, showTable ? _jsx(Table.Container, { "aria-label": typeof label === 'string' ? label : undefined, "aria-describedby": descriptionId, children: _jsxs(Table.Root, { className: "inkra-radar__table", children: [_jsx(Table.Caption, { children: textNode('Radar data', `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode('Series', `${id}-table-series`) }), axes.map(axis => _jsx(Table.Head, { children: textNode(axis.label, `${id}-table-axis-${String(axis.id)}`) }, keyPart(axis.id)))] }) }), _jsx(Table.Body, { children: visibleSeries.map(item => _jsxs(Table.Row, { children: [_jsx(Table.Head, { scope: "row", children: textNode(item.label, `${id}-table-series-${String(item.id)}`) }), axes.map(axis => { const point = item.data.find(candidate => candidate.axisId === axis.id); const missing = !finite(point?.value); return _jsx(Table.Cell, { "data-missing": missing || undefined, children: textNode(missing ? missingLabel : formatNumber(point?.value, axis, getValueLabel), `${id}-table-value-${String(item.id)}-${String(axis.id)}`) }, keyPart(axis.id)); })] }, keyPart(item.id))) })] }) }) : null] })] });
+                        }) }), showLegend ? _jsxs("div", { "aria-label": typeof legendLabel === 'string' ? legendLabel : undefined, className: "inkra-radar__legend", role: "group", children: [_jsx("span", { className: "inkra-radar__legend-title", children: textNode(legendLabel, `${id}-legend-title`) }), visibleSeries.map((item, index) => _jsxs(Button, { "aria-pressed": sameKey(selected, item.id), className: "inkra-radar__legend-button", onClick: () => selectSeries(item), size: "sm", variant: "ghost", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radar__legend-mark", radius: 4, seed: `radar-legend-${keyPart(item.id)}`, style: paintStyle(item.color ?? palette[index % palette.length]), variant: sameKey(selected, item.id) ? 'selection' : 'quiet' }), textNode(item.label, `${id}-legend-${String(item.id)}`)] }, keyPart(item.id)))] }) : null, showTable ? _jsx(Table.Container, { "aria-label": typeof label === 'string' ? label : undefined, "aria-describedby": descriptionId, children: _jsxs(Table.Root, { className: "inkra-radar__table", children: [_jsx(Table.Caption, { children: textNode(tableCaption, `${id}-table-caption`) }), _jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Head, { children: textNode(seriesLabel, `${id}-table-series`) }), axes.map(axis => _jsx(Table.Head, { children: textNode(axis.label, `${id}-table-axis-${String(axis.id)}`) }, keyPart(axis.id)))] }) }), _jsx(Table.Body, { children: visibleSeries.map(item => _jsxs(Table.Row, { children: [_jsx(Table.Head, { scope: "row", children: textNode(item.label, `${id}-table-series-${String(item.id)}`) }), axes.map(axis => { const point = item.data.find(candidate => candidate.axisId === axis.id); const missing = !finite(point?.value); return _jsx(Table.Cell, { "data-missing": missing || undefined, children: textNode(missing ? missingLabel : formatNumber(point?.value, axis, getValueLabel), `${id}-table-value-${String(item.id)}-${String(axis.id)}`) }, keyPart(axis.id)); })] }, keyPart(item.id))) })] }) }) : null] })] });
 });

package/dist/sortable/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __iconData as gripIconData } from 'lucide-react/dist/esm/icons/grip-vertical.mjs';
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -8,9 +9,13 @@ import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { cloneSortableContainers, findSortableLocation, projectSortableMove, sortableContainersEqual, } from './model.js';
-const gripIcon = [
-    { d: 'M 8 7 L 8.01 7 M 16 7 L 16.01 7 M 8 12 L 8.01 12 M 16 12 L 16.01 12 M 8 17 L 8.01 17 M 16 17 L 16.01 17' },
-];
+const gripIcon = gripIconData.node.map(([, attributes]) => {
+    const { cx, cy, r } = attributes;
+    const x = Number(cx);
+    const y = Number(cy);
+    const radius = Number(r);
+    return { d: `M ${x - radius} ${y} A ${radius} ${radius} 0 1 0 ${x + radius} ${y} A ${radius} ${radius} 0 1 0 ${x - radius} ${y}` };
+});
 function engineItemId(id) {
     return `inkra-sortable-item:${typeof id}:${String(id)}`;
 }
@@ -128,7 +133,7 @@ function SortableItem({ activeId, container, disabled, handle, handleLabel, id,
         if (!hasHandle)
             setActivatorNodeRef(element);
     };
-    return _jsxs("div", { ...(!hasHandle ? itemActivatorProps : {}), "aria-disabled": disabled || undefined, className: ['inkra-sortable__item', itemClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-dragging": isDragging || undefined, "data-sortable-id": String(id), ref: setItemRef, style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__item-surface", seed: `sortable-item-${String(id)}`, variant: "paper" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__focus", seed: `sortable-focus-${String(id)}`, variant: "outline" }), activeId === id && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__placeholder", seed: `sortable-placeholder-${String(id)}`, variant: "selection" }), _jsx("div", { className: "inkra-sortable__item-content", children: renderItem(state) }), hasHandle && _jsx("div", { className: "inkra-sortable__handle-slot", children: typeof handle === 'function'
+    return _jsxs("div", { ...(!hasHandle ? itemActivatorProps : {}), "aria-disabled": disabled || undefined, "aria-label": !hasHandle ? handleLabel : undefined, className: ['inkra-sortable__item', itemClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-dragging": isDragging || undefined, "data-handle": hasHandle || undefined, "data-sortable-id": String(id), ref: setItemRef, style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__item-surface", seed: `sortable-item-${String(id)}`, variant: "paper" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__focus", seed: `sortable-focus-${String(id)}`, variant: "outline" }), activeId === id && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__placeholder", seed: `sortable-placeholder-${String(id)}`, variant: "selection" }), _jsx("div", { className: "inkra-sortable__item-content", children: renderItem(state) }), hasHandle && _jsx("div", { className: "inkra-sortable__handle-slot", children: typeof handle === 'function'
                     ? handle({ ...state, props: { ...activatorProps, 'aria-label': handleLabel, disabled, ref: setActivatorNodeRef } })
                     : _jsx("button", { ...activatorProps, "aria-label": handleLabel, className: "inkra-sortable__handle", "data-sortable-handle": "", disabled: disabled, ref: setActivatorNodeRef, type: "button", children: _jsx(PencilIcon, { "aria-hidden": "true", paths: gripIcon, size: 24, sourceSize: 24 }) }) })] });
 }