@inkra/react 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Inkra
 
-Inkra is a pencil-styled React component library. It includes action, form, overlay, navigation, content and feedback components, plus Calendar, DayAgenda, JourneyMap and deterministic drawing primitives. Version `0.1.0` is published; the component expansion described below is available only in the current, unpublished source candidate.
+Inkra is a pencil-styled React component library. It includes action, form, overlay, navigation, content and feedback components, plus Calendar, DayAgenda, JourneyMap and deterministic drawing primitives. This document describes the APIs shipped with this package; see the repository changelog and npm registry for release status.
 
 Source and maintenance: [inkrajs/inkra](https://github.com/inkrajs/inkra).
 
@@ -80,6 +80,18 @@ All standard `button` props, including `disabled`, `name`, `value`, `form`, `ari
 
 `InputNumber` places decrease and increase buttons on either side of a centered numeric input, with no clear button. Keyboard deletion produces `null`; decimal stepping and out-of-range validation remain native. `Slider` supports single/range values, horizontal/vertical layout and `standard` or `inset` appearance.
 
+`InputNumber` supports Shift-click and Shift-arrow increments of 10 by default.
+Use `stepModifiers={[{ shiftKey: true, step: 10 }, { altKey: true, step: 0.1 }]}`
+to configure exact modifier chords with absolute increments, or `[]` to disable
+overrides. The first valid matching rule wins; unspecified modifiers must be
+released. Values remain bounded by `min`/`max`; `step="any"` disables stepping.
+`pressAndHold` defaults to true, with `repeatDelay={400}` and
+`repeatInterval={80}` in milliseconds. Release, cancellation, blur, backgrounding,
+disabling and value boundaries stop repetition. Delay/interval are bounded to
+150-60000/32-60000 ms. Numeric values use pencil lettering at rest and during
+button stepping. Direct text entry deliberately stays native until blur, keeping
+browser-owned incomplete drafts such as `-`, `1.` and `1e` readable.
+
 `Select.Root` uses string values for single selection and string arrays with `multiple`. Multi-select remains open while toggling items and submits repeated values under the same field name. `Select.Clear` is a separate button; never nest it inside the trigger.
 
 `Select.Trigger` supports `startIcon`, `endIcon`, `hideValue`, `hideIndicator`, `iconOnly`, `fullWidth` and `textAlign`. The existing `icon` prop replaces the dropdown indicator. Icon-only mode keeps a square hit target of at least 44px and retains selected text as an accessible description. Provide a Field/ARIA name and Tooltip for icon-only triggers. Decorative slots must not contain interactive controls.
@@ -195,10 +207,9 @@ Content layout options preserve existing defaults:
 - `Avatar.Root.radius` clamps to 0-8px, including pencil and image corners; `bordered={false}` removes the outline. `Avatar.Image.fit` accepts `cover | contain` (default cover).
 - `Table.Root.striped`, `hoverable` and `stickyHeader` default to false. Constrain `Table.Container` with `style={{ maxHeight: 240 }}` for sticky scrolling. `captionSide` accepts `top | bottom`. `Head.align` and `Cell.align` accept logical `start | center | end`, retaining native alignment values for compatibility. Hover feedback does not imply row actions.
 
-## Component Expansion (Unreleased)
+## Additional Components
 
-These exports are not present in the published 0.1.0 archive. Build, pack and
-install the local candidate to use them. The documentation playground includes
+These exports extend the original core component set. The documentation playground includes
 working examples, live property tabs and per-component API/accessibility notes.
 
 | Component | Contract |
@@ -239,6 +250,77 @@ motion and SSR show deterministic final values. Intermediate frames are visual;
 the polite announcement updates only at the final value. Use `getValueLabel`
 when units or custom rendering need a complete accessible phrase.
 
+Set `compact` to follow `locale` (Chinese units for `zh`, English units otherwise),
+or use `compact="en"` / `compact="zh"` to select a unit table explicitly.
+English uses this library's short-scale suffix convention: K, M, B, T, Qa, Qi,
+Sx, Sp, Oc, No, Dc (10^3 through 10^33, increasing by 10^3).
+Chinese uses 千 (10^3), then 万, 亿, 兆, 京, 垓, 秭, 穰, 沟, 涧, 正, 载, 极,
+恒河沙, 阿僧祇, 那由他, 不可思议, 无量大数 (10^4 through 10^68, increasing by 10^4).
+`numberTickerUnits` exports both tables. A space separates numbers and units by default.
+The default is `false`, preserving existing `formatOptions` behavior. Compact mode
+uses at most one fractional digit by default; customize precision with
+`formatOptions`. Explicit scientific/engineering notation takes priority over compact.
+Currency/percent affixes are preserved. By default rounding can promote the unit
+(999,950 becomes 1 M). Deltas use the same unit
+system with their own precision; announcements and `getValueLabel` receive the
+unabbreviated formatted value. `renderValue` receives the abbreviated value in
+`details.formattedValue`. NumberTicker never changes the supplied numeric value.
+
+`compactOptions` supports:
+
+- `minUnit` / `maxUnit`: allowed unit labels; equal bounds fix the unit. An empty
+  label denotes the unitless base. For example `maxUnit: '万'` keeps 10^8 as `10,000 万`.
+- `separator`: defaults to one space; `''` removes it.
+- `promotionThreshold`: positive multiplier on each unit's factor (default 1).
+  Set 10 to wait until 10,000 before entering K. `promoteAfterRounding: false`
+  compares raw magnitudes instead of rounded current-unit values.
+- `units`: replace the table with `{ factor, label, threshold? }` entries.
+  `threshold` overrides the multiplier with an absolute display-magnitude trigger;
+  e.g. `{ factor: 10000, label: '万', threshold: 100000 }`. Binary factors work too.
+  Entries are sorted without mutation; labels/factors must be unique, factors > 1,
+  and thresholds positive, finite and strictly increasing. Invalid configurations
+  and unknown/reversed bounds throw RangeError. The unitless base is implicit.
+- `overflow`: `unit` keeps the largest permitted unit; `scientific` switches at
+  the next unit's threshold (or extrapolates the last step at the table end).
+  Explicit `maxUnit` defaults to `unit`; otherwise the default is `scientific`.
+
+Use `formatOptions.notation: 'scientific' | 'engineering'` for exponent notation.
+`maximumFractionDigits` controls decimals, `minimumFractionDigits` pads zeros,
+and `roundingMode: 'trunc'` truncates instead of rounding (`halfExpand` is default).
+Other Intl rounding modes are supported when provided by the runtime; unsupported
+nondefault rounding modes throw rather than silently round differently.
+`value`, unit `factor` / `threshold`, and `promotionThreshold` accept
+`number | bigint | string`. Use bigint for exact integers and decimal strings for
+exact fractions or exponents beyond JavaScript's numeric range. Already-rounded
+`number` inputs cannot regain lost digits. Decimal arithmetic uses an isolated
+`decimal.js` context without modifying the application's Decimal settings.
+
+```tsx
+<NumberTicker value={9007199254740993n} showDelta />
+<NumberTicker value="12345678901234567890.123456" formatOptions={{ maximumFractionDigits: 6 }} />
+<NumberTicker value="1.23456789e1000" formatOptions={{ notation: 'scientific' }} />
+```
+
+Strings accept signs, decimal points, e/E exponents and outer whitespace, but
+not grouping separators, hex, empty strings or non-finite spellings. Inputs are
+bounded to 10,000 coefficient digits and written/normalized exponents within
+-10,000..10,000; invalid or oversized exact inputs throw `RangeError`. Decimal
+fractions require exact Intl decimal-string support in the runtime; unsupported
+engines throw rather than silently lose precision. Native number NaN/Infinity
+formatting is unchanged.
+
+`renderValue` and `getValueLabel` retain the input type; prefer the supplied
+formatted text when custom rendering. Deltas between bigints are bigint, between
+numbers are number, and mixed/string deltas are exact decimal strings. Bigint
+animation frames stay integral. Input-type changes or exact arithmetic spanning
+more than 512 digits settle immediately, as do reduced-motion updates.
+`createNumberFormatter` remains a native Intl formatter; use
+`formatTickerValue(formatter, value)` for precise numeric-string formatting.
+
+`prefix` and `suffix` accept icons, text or fragments. Pass `PencilIcon` to keep
+the library material, and `getValueLabel` to describe icon meanings to assistive
+technology; decorative affixes are not announced twice.
+
 `Log` renders caller-ordered records with stable ids, optional level filters and
 pause/follow controls. It follows only append updates while the viewport remains
 near the bottom. The named scroll region supports Home/End and intentionally is

package/dist/alert-dialog/index.d.ts

@@ -11,7 +11,7 @@ export declare function AlertDialogRoot({ defaultOpen, onOpenChange, open, pendi
 export type AlertDialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type AlertDialogPortalProps = DialogPrimitive.DialogPortalProps;
-export declare function AlertDialogPortal({ children, ...props }: AlertDialogPortalProps): import("react").JSX.Element;
+export declare function AlertDialogPortal({ children, ...props }: AlertDialogPortalProps): ReactNode;
 export type AlertDialogBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface AlertDialogContentProps extends DialogPrimitive.DialogContentProps {

package/dist/alert-dialog/index.js

@@ -5,7 +5,7 @@ import { Button } from '../Button.js';
 import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from '../overlay/themeBridge.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 function assignRef(ref, value) {
     if (typeof ref === 'function')
@@ -32,15 +32,17 @@ export const AlertDialogTrigger = forwardRef(function AlertDialogTrigger(props,
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: usePortalTriggerRef(forwardedRef) });
 });
 export function AlertDialogPortal({ children, ...props }) {
-    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-alert-dialog__backdrop', className), ref: ref }));
 });
 export const AlertDialogContent = forwardRef(function AlertDialogContent({ children, className, onEscapeKeyDown, onInteractOutside, onOpenAutoFocus, onPointerDownOutside, seed, ...props }, forwardedRef) {
     const context = useContext(AlertDialogContext);
     const contentRef = useRef(null);
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Content, { ...props, role: "alertdialog", "aria-busy": context?.pending || undefined, className: classes('inkra-alert-dialog__content', className), "data-pending": context?.pending || undefined, ref: node => {
             contentRef.current = node;
             assignRef(forwardedRef, node);

package/dist/command/index.d.ts

@@ -1,6 +1,9 @@
 import { Command as Primitive } from 'cmdk';
 import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
-export type CommandRootProps = Omit<ComponentPropsWithoutRef<typeof Primitive>, 'asChild'>;
+export type CommandRootProps = Omit<ComponentPropsWithoutRef<typeof Primitive>, 'asChild'> & {
+    /** Disable when a parent dialog already supplies the paper and outline. */
+    surface?: boolean;
+};
 export type CommandInputProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Input>, 'asChild'>;
 export type CommandListProps = Omit<ComponentPropsWithoutRef<typeof Primitive.List>, 'asChild'>;
 export interface CommandItemProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.Item>, 'asChild'> {
@@ -12,7 +15,26 @@ export type CommandEmptyProps = Omit<ComponentPropsWithoutRef<typeof Primitive.E
 export type CommandSeparatorProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Separator>, 'asChild' | 'children'>;
 export type CommandShortcutProps = HTMLAttributes<HTMLElement>;
 export declare const Command: {
-    Root: import("react").ForwardRefExoticComponent<CommandRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+        label?: string;
+        shouldFilter?: boolean;
+        filter?: (value: string, search: string, keywords?: string[]) => number;
+        defaultValue?: string;
+        value?: string;
+        onValueChange?: (value: string) => void;
+        loop?: boolean;
+        disablePointerSelection?: boolean;
+        vimBindings?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+        /** Disable when a parent dialog already supplies the paper and outline. */
+        surface?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Input: import("react").ForwardRefExoticComponent<CommandInputProps & import("react").RefAttributes<HTMLInputElement>>;
     List: import("react").ForwardRefExoticComponent<CommandListProps & import("react").RefAttributes<HTMLDivElement>>;
     Group: import("react").ForwardRefExoticComponent<CommandGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/command/index.js

@@ -6,14 +6,14 @@ import { PencilText } from '../PencilText.js';
 import { PencilLine } from '../PencilLine.js';
 function classes(base, extra) { return [base, extra].filter(Boolean).join(' '); }
 function copy(value) { return typeof value === 'string' ? _jsx(PencilText, { children: value }) : value; }
-const Root = forwardRef(function Root({ className, children, loop = true, onKeyDown, onCompositionStartCapture, onCompositionEndCapture, ...props }, ref) {
+const Root = forwardRef(function Root({ className, children, loop = true, surface = true, onKeyDown, onCompositionStartCapture, onCompositionEndCapture, ...props }, ref) {
     const composing = useRef(false);
     return _jsx(Primitive, { ...props, ref: ref, loop: loop, className: classes('inkra-command', className), onCompositionStartCapture: event => { composing.current = true; onCompositionStartCapture?.(event); }, onCompositionEndCapture: event => { composing.current = false; onCompositionEndCapture?.(event); }, onKeyDown: event => {
             // Capture composition state as well as native flags before cmdk handles Enter.
             if (event.key === 'Enter' && (composing.current || event.nativeEvent.isComposing || event.keyCode === 229))
                 event.preventDefault();
             onKeyDown?.(event);
-        }, children: _jsx(PencilSurface, { variant: "paper", radius: 8, className: "inkra-command__paper", children: children }) });
+        }, children: surface ? _jsx(PencilSurface, { variant: "paper", radius: 8, className: "inkra-command__paper", children: children }) : children });
 });
 const Input = forwardRef(function Input({ className, ...props }, ref) {
     return _jsxs("div", { className: "inkra-command__input-wrap", children: [_jsx(Primitive.Input, { ...props, ref: ref, className: classes('inkra-command__input', className) }), _jsx(PencilLine, { className: "inkra-command__input-line" })] });

package/dist/context-menu/index.d.ts

@@ -31,7 +31,7 @@ export interface ContextMenuTriggerProps extends Omit<HTMLAttributes<HTMLElement
 }
 export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;
 export type ContextMenuPortalProps = ComponentPropsWithoutRef<typeof DropdownMenu.Portal>;
-export declare const ContextMenuPortal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => import("react").JSX.Element;
+export declare const ContextMenuPortal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => ReactNode;
 export type ContextMenuContentProps = DropdownMenuContentProps;
 export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export type ContextMenuItemProps = ComponentPropsWithoutRef<typeof DropdownMenu.Item>;
@@ -61,7 +61,7 @@ export declare const ContextMenuSubContent: import("react").ForwardRefExoticComp
 export declare const ContextMenu: Readonly<{
     Root: typeof ContextMenuRoot;
     Trigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;
-    Portal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => import("react").JSX.Element;
+    Portal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => ReactNode;
     Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
     CheckboxItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/context-menu/index.js

@@ -5,7 +5,7 @@ import { DropdownMenu } from '../dropdown-menu/index.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+import { usePortalThemeProps, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
 const DEFAULT_EXCLUDE = '[data-context-menu-native]';
 const DEFAULT_LONG_PRESS_DELAY = 600;
 const DEFAULT_LONG_PRESS_TOLERANCE = 10;
@@ -220,7 +220,8 @@ export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger({
 });
 export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent({ children, className, collisionPadding = 8, seed, sideOffset = 4, ...props }, ref) {
     const id = useId();
-    return (_jsx(Primitive.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Primitive.SubContent, { ...props, className: classes('inkra-menu', 'inkra-context-menu__sub-content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: "inkra-menu__paper", radius: 8, seed: seed ?? `context-submenu-${id}`, variant: "paper", children: children }) }) }) }));
+    props = usePortalThemeProps(props);
+    return (_jsx(Primitive.Portal, { children: _jsx(Primitive.SubContent, { ...props, className: classes('inkra-menu', 'inkra-context-menu__sub-content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: "inkra-menu__paper", radius: 8, seed: seed ?? `context-submenu-${id}`, variant: "paper", children: children }) }) }));
 });
 export const ContextMenu = Object.freeze({
     Root: ContextMenuRoot,

package/dist/drawer/index.d.ts

@@ -8,7 +8,7 @@ export declare function DrawerRoot(props: DrawerRootProps): import("react").JSX.
 export type DrawerTriggerProps = DialogPrimitive.DialogTriggerProps;
 export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type DrawerPortalProps = DialogPrimitive.DialogPortalProps;
-export declare function DrawerPortal({ children, ...props }: DrawerPortalProps): import("react").JSX.Element;
+export declare function DrawerPortal({ children, ...props }: DrawerPortalProps): ReactNode;
 export type DrawerBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const DrawerBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DrawerContentProps extends DialogPrimitive.DialogContentProps {

package/dist/drawer/index.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 '../overlay/themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from '../overlay/themeBridge.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
 function drawerSize(size) {
@@ -29,16 +29,18 @@ export const DrawerTrigger = forwardRef(function DrawerTrigger(props, forwardedR
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: usePortalTriggerRef(forwardedRef) });
 });
 export function DrawerPortal({ children, ...props }) {
-    return _jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) });
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const DrawerBackdrop = forwardRef(function DrawerBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     return _jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-drawer__backdrop', className), ref: ref });
 });
 export const DrawerContent = forwardRef(function DrawerContent({ children, className, direction = 'right', seed, size = 'md', style, ...props }, ref) {
     const id = useId();
-    const mergedStyle = { ...style, '--inkra-drawer-size': drawerSize(size) };
+    const themedProps = usePortalThemeProps({ ...props, style });
+    const mergedStyle = { ...themedProps.style, '--inkra-drawer-size': drawerSize(size) };
     const edgeOrientation = direction === 'left' || direction === 'right' ? 'vertical' : 'horizontal';
-    return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] }) }));
+    return (_jsx(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] }) }));
 });
 export const DrawerTitle = forwardRef(function DrawerTitle({ children, className, seed, ...props }, ref) {
     const id = useId();

package/dist/dropdown-menu/index.d.ts

@@ -4,7 +4,7 @@ export type DropdownMenuProps = Primitive.DropdownMenuProps;
 declare function Root(props: DropdownMenuProps): import("react").JSX.Element;
 export type DropdownMenuTriggerProps = Primitive.DropdownMenuTriggerProps;
 export type DropdownMenuPortalProps = Primitive.DropdownMenuPortalProps;
-declare function Portal({ children, ...props }: DropdownMenuPortalProps): import("react").JSX.Element;
+declare function Portal({ children, ...props }: DropdownMenuPortalProps): ReactNode;
 export interface DropdownMenuContentProps extends Omit<Primitive.DropdownMenuContentProps, 'asChild'> {
     seed?: string | number;
 }

package/dist/dropdown-menu/index.js

@@ -5,16 +5,17 @@ import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilLine } from '../PencilLine.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef } from '../overlay/themeBridge.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
 function Root(props) { return _jsx(PortalThemeProvider, { children: _jsx(Primitive.Root, { ...props }) }); }
 const Trigger = forwardRef(function Trigger(props, ref) {
     return _jsx(Primitive.Trigger, { ...props, ref: usePortalTriggerRef(ref) });
 });
-function Portal({ children, ...props }) { return _jsx(Primitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }); }
+function Portal({ children, ...props }) { return mapPortalChildren(children, child => _jsx(Primitive.Portal, { ...props, children: child })); }
 const Content = forwardRef(function Content({ className, children, seed, sideOffset = 6, collisionPadding = 8, ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return _jsx(Primitive.Content, { ...props, ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, className: classes('inkra-menu', className), children: _jsx(PencilSurface, { variant: "paper", radius: 8, seed: seed ?? `menu-${id}`, className: "inkra-menu__paper", children: children }) });
 });
 function ItemBody({ children, icon }) {

package/dist/form/EditablePencilText.js

@@ -213,6 +213,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         let glyphs = new BoundedCache(128, 4 * 1024 * 1024);
         let disposed = false;
         let lastAppearance = '';
+        const numericControl = control instanceof HTMLInputElement && control.type === 'number';
+        let nativeNumberEditing = false;
         const appearanceKey = () => {
             const style = getComputedStyle(control);
             return JSON.stringify([
@@ -230,6 +232,12 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         const paint = () => {
             if (disposed)
                 return;
+            // Number inputs expose a sanitized value, not incomplete drafts such as "-" or "1.".
+            if (numericControl && (nativeNumberEditing || control.validity.badInput || composingRef.current)) {
+                root?.removeAttribute('data-pencil-editable-ready');
+                lastAppearance = '';
+                return;
+            }
             const key = appearanceKey();
             if (key === lastAppearance && root?.hasAttribute('data-pencil-editable-ready'))
                 return;
@@ -249,7 +257,25 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             }
         };
         scheduleRef.current = paint;
+        const beforeInput = (event) => {
+            if (!numericControl || event.defaultPrevented)
+                return;
+            nativeNumberEditing = true;
+            root?.setAttribute('data-pencil-number-editing', 'true');
+            paint();
+        };
+        const finishNumberEditing = () => {
+            if (!numericControl)
+                return;
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
+            paint();
+        };
         const startComposition = () => {
+            if (numericControl) {
+                nativeNumberEditing = true;
+                root?.setAttribute('data-pencil-number-editing', 'true');
+            }
             composingRef.current = {
                 value: control.value,
                 start: control.selectionStart ?? control.value.length,
@@ -273,6 +299,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
                 return;
             composingRef.current = null;
             root?.removeAttribute('data-composing');
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
             refreshFonts();
         });
         const form = control.form;
@@ -284,6 +312,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         }
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
         colorScheme.addEventListener('change', paint);
+        control.addEventListener('beforeinput', beforeInput);
+        control.addEventListener('blur', finishNumberEditing);
         control.addEventListener('input', paint);
         control.addEventListener('scroll', paint, { passive: true });
         control.addEventListener('compositionstart', startComposition);
@@ -301,6 +331,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             resize?.disconnect();
             appearance.disconnect();
             colorScheme.removeEventListener('change', paint);
+            control.removeEventListener('beforeinput', beforeInput);
+            control.removeEventListener('blur', finishNumberEditing);
             control.removeEventListener('input', paint);
             control.removeEventListener('scroll', paint);
             control.removeEventListener('compositionstart', startComposition);
@@ -310,9 +342,11 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             document.fonts?.removeEventListener('loadingerror', refreshFonts);
             root?.removeAttribute('data-pencil-editable-ready');
             root?.removeAttribute('data-composing');
+            root?.removeAttribute('data-pencil-number-editing');
             composingRef.current = null;
             glyphs = new BoundedCache(0, 0);
             buffer.width = buffer.height = 0;
+            canvas.width = canvas.height = 0;
             scheduleRef.current = () => { };
         };
     }, [controlRef, multiline, seed]);

package/dist/form/Input.js

@@ -7,7 +7,7 @@ import { PencilText } from '../PencilText.js';
 import { InputAction } from './InputAction.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
-const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel']);
+const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'number']);
 const clearableInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
 // Lucide X / LoaderCircle ISC geometry, rendered by the shared pencil engine.
 const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];

package/dist/input-number/index.d.ts

@@ -1,4 +1,6 @@
 import type { InputProps } from '../form/Input.js';
+import { type InputNumberStepModifier } from './model.js';
+export type { InputNumberStepModifier } from './model.js';
 export interface InputNumberValueChangeDetails {
     reason: 'input' | 'increment' | 'decrement';
 }
@@ -9,6 +11,10 @@ export interface InputNumberProps extends Omit<InputProps, 'type' | 'value' | 'd
     min?: number;
     max?: number;
     step?: number | 'any';
+    stepModifiers?: readonly InputNumberStepModifier[];
+    pressAndHold?: boolean;
+    repeatDelay?: number;
+    repeatInterval?: number;
     controls?: boolean;
     incrementButtonLabel?: string;
     decrementButtonLabel?: string;