@react-x11/components 0.1.0 → 0.2.0

package/dist/three/store.d.ts

@@ -0,0 +1,81 @@
+import type { Camera, Scene } from './objects.js';
+export interface ThreeSize {
+    width: number;
+    height: number;
+}
+/**
+ * The world-space rectangle the camera sees at its target's distance —
+ * r3f's `viewport`, which components use to size meshes against the window.
+ */
+export interface ThreeViewport {
+    width: number;
+    height: number;
+    aspect: number;
+    distance: number;
+    /** pixels per world unit */
+    factor: number;
+}
+export interface ThreeClock {
+    /** Seconds since the surface's first frame. */
+    elapsedTime: number;
+    /** Seconds since the previous frame, clamped as core's clock clamps. */
+    delta: number;
+}
+/** What `useFrame` callbacks and `useThree` selectors see. */
+export interface RootState {
+    /** The GL context — camelCase ES 2 on `'direct'`, PascalCase OpenGL 1.x
+     * on `'indirect'`. Null until the surface's context exists. */
+    gl: unknown;
+    backend: 'direct' | 'indirect' | null;
+    scene: Scene;
+    camera: Camera;
+    size: ThreeSize;
+    viewport: ThreeViewport;
+    clock: ThreeClock;
+    /** Whether `<shaderMaterial>`/`<effectComposer>` can exist here. */
+    supportsShaders: boolean;
+    frameloop: 'always' | 'demand' | 'never';
+    /** Ask for one more frame — the demand-mode animation valve. */
+    invalidate: () => void;
+    get: () => RootState;
+    set: (partial: Partial<RootState>) => void;
+}
+export type FrameCallback = (state: RootState, delta: number) => void;
+interface FrameSubscriber {
+    callback: FrameCallback;
+    priority: number;
+}
+export interface ThreeStore {
+    getState: () => RootState;
+    setState: (partial: Partial<RootState>) => void;
+    subscribe: (listener: () => void) => () => void;
+    /** @internal ordered `useFrame` subscribers */
+    frames: FrameSubscriber[];
+    /** @internal subscribe a frame callback; returns unsubscribe */
+    addFrame: (callback: FrameCallback, priority: number) => () => void;
+    /** @internal run the subscribers, in priority order */
+    runFrames: (state: RootState, delta: number) => boolean;
+    /** @internal the scene gained/lost pointer handlers since last checked */
+    eventsDirty: boolean;
+}
+export declare function createThreeStore(initial: Omit<RootState, 'get' | 'set'>): ThreeStore;
+export declare function computeViewport(camera: Camera, size: ThreeSize): ThreeViewport;
+export declare const ThreeContext: import("react").Context<ThreeStore | null>;
+/**
+ * The canvas state, r3f-shaped: `useThree()` for all of it, or
+ * `useThree((s) => s.camera)` to re-render only when the selection changes.
+ */
+export declare function useThree(): RootState;
+export declare function useThree<T>(selector: (state: RootState) => T): T;
+/**
+ * Run `callback(state, delta)` on every frame of the enclosing `<Canvas>`.
+ *
+ * This *is* r3f's escape from re-rendering: mutate what the ref holds —
+ * `ref.current.rotation.y += delta` — and the next frame draws it, with
+ * React uninvolved. Subscribing makes the surface animate (a demand-driven
+ * surface would otherwise tick once and stop); unmount and it goes quiet.
+ * `priority` orders callbacks, lowest first, as in r3f.
+ */
+export declare function useFrame(callback: FrameCallback, priority?: number): void;
+export {};
+//# sourceMappingURL=store.d.ts.map

package/dist/three/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/three/store.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,8DAA8D;AAC9D,MAAM,WAAW,SAAS;IACxB;mEAC+D;IAC/D,EAAE,EAAE,OAAO,CAAC;IACZ,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,oEAAoE;IACpE,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,gEAAgE;IAChE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,EAAE,MAAM,SAAS,CAAC;IACrB,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAEtE,UAAU,eAAe;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IAChD,+CAA+C;IAC/C,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;IACpE,uDAAuD;IACvD,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACxD,0EAA0E;IAC1E,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC,GACtC,UAAU,CA8CZ;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,SAAS,GACd,aAAa,CAoBf;AAED,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAanE;;;GAGG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAAC;AACtC,wBAAgB,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,GAAG,CAAC,CAAC;AAQlE;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,SAAI,GAAG,IAAI,CAWpE"}

package/dist/three/store.js

@@ -0,0 +1,110 @@
+// The per-canvas state react-three-fiber components read: `useThree` for the
+// camera, the sizes and `invalidate`; `useFrame` for the frame clock.
+//
+// A deliberately small store in zustand's shape — `getState`, `setState`,
+// `subscribe`, and a hook that selects — because that is the API surface
+// r3f components are written against, and matching it is this module's whole
+// job. The store lives outside React (mutated from the surface's frame
+// callback), and the hook reads it through `useSyncExternalStore`, so a
+// component that selects `size` re-renders on resize and nothing else does.
+import { createContext, useContext, useEffect, useRef, useSyncExternalStore, } from 'react';
+export function createThreeStore(initial) {
+    const listeners = new Set();
+    let state;
+    const setState = (partial) => {
+        // a new object per write, so useSyncExternalStore sees the change; the
+        // scene and camera stay identity-stable across writes
+        state = { ...state, ...partial };
+        for (const listener of [...listeners])
+            listener();
+    };
+    state = {
+        ...initial,
+        get: () => state,
+        set: setState,
+    };
+    const store = {
+        getState: () => state,
+        setState,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        frames: [],
+        addFrame(callback, priority) {
+            const entry = { callback, priority };
+            store.frames.push(entry);
+            store.frames.sort((a, b) => a.priority - b.priority);
+            // subscribing makes the surface animate; the canvas watches this count
+            setState({});
+            return () => {
+                const index = store.frames.indexOf(entry);
+                if (index !== -1)
+                    store.frames.splice(index, 1);
+                setState({});
+            };
+        },
+        runFrames(frameState, delta) {
+            if (store.frames.length === 0)
+                return false;
+            for (const { callback } of [...store.frames]) {
+                callback(frameState, delta);
+            }
+            return true;
+        },
+        eventsDirty: true,
+    };
+    return store;
+}
+export function computeViewport(camera, size) {
+    const aspect = size.width / Math.max(1, size.height);
+    const distance = camera.position.distanceTo(camera.target);
+    let height;
+    if (camera.isOrthographicCamera) {
+        height = 2 / camera.zoom;
+    }
+    else {
+        const fov = ((camera.fov ?? 50) / camera.zoom) *
+            (Math.PI / 180);
+        height = 2 * Math.tan(fov / 2) * distance;
+    }
+    const width = height * aspect;
+    return {
+        width,
+        height,
+        aspect,
+        distance,
+        factor: size.width / Math.max(1e-6, width),
+    };
+}
+export const ThreeContext = createContext(null);
+function useStore(hook) {
+    const store = useContext(ThreeContext);
+    if (!store) {
+        throw new Error(`@react-x11/components: ${hook}() must be called from a component ` +
+            'inside <Canvas> — its state belongs to one surface.');
+    }
+    return store;
+}
+export function useThree(selector) {
+    const store = useStore('useThree');
+    return useSyncExternalStore(store.subscribe, () => selector ? selector(store.getState()) : store.getState());
+}
+/**
+ * Run `callback(state, delta)` on every frame of the enclosing `<Canvas>`.
+ *
+ * This *is* r3f's escape from re-rendering: mutate what the ref holds —
+ * `ref.current.rotation.y += delta` — and the next frame draws it, with
+ * React uninvolved. Subscribing makes the surface animate (a demand-driven
+ * surface would otherwise tick once and stop); unmount and it goes quiet.
+ * `priority` orders callbacks, lowest first, as in r3f.
+ */
+export function useFrame(callback, priority = 0) {
+    const store = useStore('useFrame');
+    // stored in a ref, so the subscription is stable while the callback still
+    // sees current props — no memoizing needed to avoid resubscribing
+    const latest = useRef(callback);
+    latest.current = callback;
+    useEffect(() => store.addFrame((state, delta) => latest.current(state, delta), priority), [store, priority]);
+}
+//# sourceMappingURL=store.js.map

package/dist/three/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/three/store.ts"],"names":[],"mappings":"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"}

package/dist/timeline/hx.d.ts

@@ -0,0 +1,18 @@
+import type { Key, ReactElement, ReactNode } from 'react';
+import type { ReactX11Elements, Theme } from 'react-x11';
+/** The host elements, by name. */
+export type Host = ReactX11Elements;
+interface CommonProps {
+    key?: Key;
+    /** Honoured by every node at runtime; declared only on `<window>` — the
+     *  same narrow declaration the calendar works around. */
+    theme?: Theme | Record<string, string | number>;
+    /** The query hook every component forwards (docs/README.md,
+     *  "Conventions"). react-x11 passes `data-*` through; the declarations
+     *  just do not spell it, so it is added here rather than cast away at
+     *  every call site. */
+    'data-testname'?: string;
+}
+export declare function hx<K extends keyof Host>(type: K, props?: (Omit<Host[K], 'theme'> & CommonProps) | null, ...children: ReactNode[]): ReactElement;
+export {};
+//# sourceMappingURL=hx.d.ts.map

package/dist/timeline/hx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx.d.ts","sourceRoot":"","sources":["../../src/timeline/hx.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEzD,kCAAkC;AAClC,MAAM,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAEpC,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;6DACyD;IACzD,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAChD;;;2BAGuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,IAAI,EACrC,IAAI,EAAE,CAAC,EACP,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,GAAG,IAAI,EACrD,GAAG,QAAQ,EAAE,SAAS,EAAE,GACvB,YAAY,CAEd"}

package/dist/timeline/hx.js

@@ -0,0 +1,10 @@
+// `React.createElement`, typed against react-x11's host elements — a copy of
+// `src/calendar/hx.ts`, duplicated on purpose: components in this package do
+// not import each other (a lateral import welds two components into one
+// tree-shaking unit — see AGENTS.md), and fifty shared lines are cheaper than
+// that. See the calendar's copy for the full why of the shape.
+import React from 'react';
+export function hx(type, props, ...children) {
+    return React.createElement(type, props, ...children);
+}
+//# sourceMappingURL=hx.js.map

package/dist/timeline/hx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx.js","sourceRoot":"","sources":["../../src/timeline/hx.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,6EAA6E;AAC7E,wEAAwE;AACxE,8EAA8E;AAC9E,+DAA+D;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,UAAU,EAAE,CAChB,IAAO,EACP,KAAqD,EACrD,GAAG,QAAqB;IAExB,OAAO,KAAK,CAAC,aAAa,CAAC,IAAc,EAAE,KAAc,EAAE,GAAG,QAAQ,CAAC,CAAC;AAC1E,CAAC"}

package/dist/timeline/index.d.ts

@@ -0,0 +1,152 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { Style } from 'react-x11/style';
+/** What `style` props here accept, matching the rest of the package. */
+type StyleInput = Style | Style[];
+export type TimelineSize = 'sm' | 'md' | 'lg' | 'xl';
+export type TimelineVariant = 'subtle' | 'solid' | 'outline' | 'plain';
+export interface TimelineProps {
+    /** Indicator size, and the type that goes with it. Default `'md'`. */
+    size?: TimelineSize;
+    /** How an indicator is painted. Default `'solid'`. */
+    variant?: TimelineVariant;
+    /**
+     * The colour the indicators take — Chakra's `colorPalette`, as one colour.
+     * A `$token` is resolved against the palette. Default `$accent`.
+     */
+    accent?: string;
+    /**
+     * The colour behind the timeline, which is what the line is cleared with
+     * around each indicator. Default `$background`; a timeline on a card wants
+     * `'$surface'`.
+     */
+    ground?: string;
+    /**
+     * Keep the line running past the last indicator. Default false, as in
+     * Chakra: a line that stops at the last step reads as "this is the end of
+     * it", and one that carries on reads as "there is more below".
+     */
+    showLastSeparator?: boolean;
+    /** The root `<box>`'s style — width, padding, `flexGrow`. */
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * A timeline.
+ *
+ * ```jsx
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineConnector>
+ *       <TimelineSeparator />
+ *       <TimelineIndicator>1</TimelineIndicator>
+ *     </TimelineConnector>
+ *     <TimelineContent>
+ *       <TimelineTitle>Product shipped</TimelineTitle>
+ *       <TimelineDescription>13th May 2021</TimelineDescription>
+ *     </TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export declare function Timeline(props: TimelineProps): ReactElement;
+export interface TimelineItemProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * One step: a connector column and the content beside it, in whichever order
+ * they are written. Putting a `<TimelineContent>` *before* the connector is
+ * how the two-sided layout is built.
+ */
+export declare function TimelineItem(props: TimelineItemProps): ReactElement;
+export interface TimelineConnectorProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * The gutter: the indicator, and the line running past it.
+ *
+ * `alignSelf: 'stretch'` is what makes it as tall as the item however tall
+ * the content beside it turns out to be, which is what the separator measures
+ * itself against.
+ *
+ * Which *side* it lands on is nobody's decision here: `<TimelineItem>` is a
+ * plain flex row, so an RTL subtree mirrors it and the marks end up on the
+ * right, where an RTL reader starts. That is the reason there is no `side`
+ * prop — `direction` already says this, and a second way to say it is a
+ * second thing that can disagree with the first.
+ */
+export declare function TimelineConnector(props: TimelineConnectorProps): ReactElement;
+export interface TimelineSeparatorProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+}
+/**
+ * The line down the gutter.
+ *
+ * It spans the item's full height and the indicator is painted over it,
+ * rather than being two stubs above and below — that is the arrangement that
+ * needs no arithmetic about where the indicator ends, and it is why the
+ * indicator carries a `ground`-coloured ring: the ring is what cuts the line.
+ *
+ * `zIndex: -1` rather than an ordering rule: Chakra's snippets write the
+ * separator before the indicator, but a reader who writes it after should get
+ * the same picture, and paint order is otherwise document order.
+ */
+export declare function TimelineSeparator(props: TimelineSeparatorProps): ReactElement | null;
+export interface TimelineIndicatorProps {
+    /** Overrides the timeline's `variant` for this step alone. */
+    variant?: TimelineVariant;
+    /** Overrides the timeline's `accent` for this step alone — a green tick
+     *  for what is done, the danger colour for what failed. `$token` allowed. */
+    accent?: string;
+    /** The ink inside. Default: the readable one for the fill. */
+    color?: string;
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * The mark on the line: a filled circle by default, with a step number, a
+ * glyph or nothing inside it.
+ *
+ * An `<Icon>` in here needs no colour of its own — `color` inherits down the
+ * tree and a `mono` canvas resolves its ink the same way `<text>` does — but
+ * it does need a `size`, which does not inherit.
+ */
+export declare function TimelineIndicator(props: TimelineIndicatorProps): ReactElement;
+export interface TimelineContentProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * What the step says. Its bottom padding is the run of line between this
+ * indicator and the next, so the gutter's length is decided by the content
+ * beside it rather than by a height anyone has to name — and the last item
+ * has none, which is what stops a timeline ending in a gap.
+ */
+export declare function TimelineContent(props: TimelineContentProps): ReactElement;
+export interface TimelineTitleProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/**
+ * The step's heading. A row, so a badge or a timestamp can sit beside the
+ * label, dropped by whatever it takes to line its letters up with the middle
+ * of the indicator at this size.
+ */
+export declare function TimelineTitle(props: TimelineTitleProps): ReactElement;
+export interface TimelineDescriptionProps {
+    style?: StyleInput;
+    'data-testname'?: string;
+    children?: ReactNode;
+}
+/** The quiet line under the title: a date, a name, a status. */
+export declare function TimelineDescription(props: TimelineDescriptionProps): ReactElement;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/timeline/index.ts"],"names":[],"mappings":"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"}