@react-x11/components 0.1.0 → 0.2.0

package/dist/timeline/index.js

@@ -0,0 +1,383 @@
+// <Timeline> — a vertical run of events: an indicator per step, a line
+// between them, and content beside them.
+//
+// The API is [Chakra UI's Timeline](https://chakra-ui.com/docs/components/timeline)
+// with its parts spelled flat — `Timeline.Root` is `<Timeline>`,
+// `Timeline.Item` is `<TimelineItem>` — because that is how the rest of this
+// package names a composition (see `/charts`), and because a namespace object
+// is a module-scope mutation the tree-shaking guard would have to reason
+// about. Everything else is Chakra's: the eight parts, `size`, `variant`, and
+// the last item's line being off by default.
+//
+// It is pure composition of `<box>` and `<text>`, so there is no
+// `registerElement` here and nothing for the reconciler to learn. The one
+// piece that looks like it wants a custom drawing element — the line running
+// down the gutter — is a 1px `<box>` positioned absolutely over the item's
+// full height, which is exactly how the web does it and costs a rectangle
+// instead of a paint callback.
+import React from 'react';
+import { useTheme } from 'react-x11';
+import { interpolate, readableInk } from 'react-x11/style';
+import { hx } from './hx.js';
+const h = React.createElement;
+// --- geometry ---------------------------------------------------------------
+//
+// Chakra's numbers, tightened for the desktop: a web timeline is read at arm's
+// length down a column that owns the page, and a panel in an application
+// window is not. Everything a caller is likely to want to move — the width of
+// the whole thing, the space around it — is `style` on the root, so these stay
+// constants rather than props.
+/** The line. One pixel, at every size, the way every timeline draws it. */
+const THICKNESS = 1;
+/** Between the connector column and the content beside it. */
+const ITEM_GAP = 12;
+/** Between the rows inside one item's content. */
+const CONTENT_GAP = 4;
+/** Under one item's content: the run of line between two indicators. */
+const STEP_GAP = 18;
+/** Inside a title, between the label and whatever is set beside it. */
+const TITLE_GAP = 6;
+/**
+ * How far an indicator clears the line it sits on.
+ *
+ * Drawn as an `outline`, which is painted outside the border box and never
+ * seen by yoga — so the clearance cannot move the circle it surrounds, and a
+ * variant that turns it off cannot change the layout either.
+ */
+const RING = 2;
+// The indicator sizes are Chakra's (16/20/24/32). The type sizes are not:
+// they step off the theme's own `fontSize` rather than a fixed scale, so a
+// theme that sets 16 gets a timeline in 16 instead of one that ignores it.
+const SIZES = {
+    sm: { indicator: 16, font: 10, titleStep: -2, titleTop: 0 },
+    md: { indicator: 20, font: 12, titleStep: 0, titleTop: 0 },
+    lg: { indicator: 24, font: 12, titleStep: 0, titleTop: 2 },
+    xl: { indicator: 32, font: 14, titleStep: 0, titleTop: 6 },
+};
+const LookContext = React.createContext(null);
+/** Whether the item being rendered is the last one. */
+const LastContext = React.createContext(false);
+function useLook(part) {
+    const look = React.useContext(LookContext);
+    if (!look) {
+        throw new Error(`@react-x11/components: <${part}> has to be inside a <Timeline>. ` +
+            'It reads the size, the variant and the accent from it.');
+    }
+    return look;
+}
+/**
+ * A colour prop, resolved against the palette.
+ *
+ * `$token` is normally the renderer's job — it resolves one against the
+ * nearest `theme` prop while painting — but `tint()` and `readableInk()` are
+ * arithmetic over real colours and run here, before any of that. So the two
+ * colours this component computes *from* are looked up eagerly, and every
+ * other colour it uses stays a `$token` in the style.
+ */
+function resolveColor(value, theme, fallback) {
+    if (!value)
+        return fallback;
+    if (!value.startsWith('$'))
+        return value;
+    const named = theme[value.slice(1)];
+    return typeof named === 'string' ? named : fallback;
+}
+/**
+ * `accent` laid over `ground`, opaquely — a weak wash of the accent at
+ * `amount`, a strong one near 1.
+ *
+ * The obvious spelling of a `subtle` chip is `tint(accent, 0.22)`, and it is
+ * the wrong one here: the line runs *behind* every indicator, so a
+ * translucent chip has it showing through the middle of the mark. Mixing
+ * against the ground gives the same colour and stops the light — and it is
+ * still one expression for both palettes, because the ground is what
+ * differs between them.
+ *
+ * `interpolate` is the renderer's own colour lerp, the one that drives every
+ * `transition`; it answers null for anything it cannot parse, which is the
+ * same "keep going with what you were given" the rest of the style layer
+ * does.
+ */
+function over(ground, accent, amount) {
+    const mixed = interpolate(ground, accent, amount);
+    return typeof mixed === 'string' ? mixed : accent;
+}
+/**
+ * Strings and numbers are only legal inside `<text>`, and every part here
+ * takes prose — `<TimelineTitle>Product shipped</TimelineTitle>` is the
+ * shortest thing that works and has to keep working. So a primitive child is
+ * wrapped, and an element child is left exactly as it was written.
+ *
+ * The wrapper carries no style of its own: `color`, `fontSize`, `fontFamily`
+ * and `fontWeight` inherit down the tree, so the box above it has already
+ * said everything there is to say — and an app's own `<text>` child inherits
+ * the same thing, which is what keeps the two forms looking alike.
+ */
+function withText(children) {
+    let wrapped = false;
+    const mapped = React.Children.map(children, (child) => {
+        if (typeof child !== 'string' && typeof child !== 'number')
+            return child;
+        wrapped = true;
+        return hx('text', null, child);
+    });
+    return wrapped ? mapped : children;
+}
+/**
+ * The part's own style, then the caller's — later entries win, which is how
+ * every `style` prop in this renderer resolves precedence.
+ */
+function styled(base, extra) {
+    if (!extra)
+        return [base];
+    return Array.isArray(extra) ? [base, ...extra] : [base, extra];
+}
+/**
+ * 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 function Timeline(props) {
+    // `Theme` is an interface, so it has no implicit index signature — the same
+    // widening `hx.ts` documents for the `theme` prop.
+    const theme = useTheme();
+    const size = props.size ?? 'md';
+    const variant = props.variant ?? 'solid';
+    const accent = resolveColor(props.accent, theme, String(theme.accent));
+    const ground = resolveColor(props.ground, theme, String(theme.background));
+    const showLastSeparator = props.showLastSeparator ?? false;
+    const body = typeof theme.fontSize === 'number' ? theme.fontSize : 14;
+    const look = React.useMemo(() => {
+        const spec = SIZES[size] ?? SIZES.md;
+        return {
+            variant,
+            accent,
+            ground,
+            indicator: spec.indicator,
+            indicatorFont: spec.font,
+            titleFont: body + spec.titleStep,
+            titleTop: spec.titleTop,
+            // One size for every timeline, as in Chakra: a caption is a caption,
+            // and a description that grew with the indicator would make the
+            // biggest timeline the one whose dates are hardest to skim.
+            descriptionFont: body - 2,
+            showLastSeparator,
+        };
+    }, [size, variant, accent, ground, showLastSeparator, body]);
+    // Which item is last is a `:last-of-type` selector on the web and a walk
+    // here. `Children.toArray` drops the nulls a `{cond && <TimelineItem/>}`
+    // leaves behind, so "last" means the last one actually rendered.
+    const items = React.Children.toArray(props.children);
+    const end = items.length - 1;
+    return h(LookContext.Provider, { value: look }, hx('box', {
+        // A run of steps is a list, and saying so is what gets a screen
+        // reader to announce "list, 4 items" before reading the first one.
+        role: 'list',
+        style: styled({ flexDirection: 'column' }, props.style),
+        'data-testname': props['data-testname'],
+    }, items.map((child, i) => h(LastContext.Provider, {
+        key: (React.isValidElement(child) && child.key) || i,
+        value: i === end,
+    }, child))));
+}
+/**
+ * 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 function TimelineItem(props) {
+    useLook('TimelineItem');
+    return hx('box', {
+        // `listitem` takes its accessible name from its contents, so the title
+        // and the date below are what an assistive technology reads out.
+        role: 'listitem',
+        style: styled({
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            flexShrink: 0,
+            gap: ITEM_GAP,
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, props.children);
+}
+/**
+ * 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 function TimelineConnector(props) {
+    useLook('TimelineConnector');
+    return hx('box', {
+        style: styled({ alignSelf: 'stretch', alignItems: 'center', flexShrink: 0 }, props.style),
+        'data-testname': props['data-testname'],
+    }, props.children);
+}
+/**
+ * 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 function TimelineSeparator(props) {
+    const look = useLook('TimelineSeparator');
+    const last = React.useContext(LastContext);
+    if (last && !look.showLastSeparator)
+        return null;
+    return hx('box', {
+        style: styled({
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: THICKNESS,
+            // `start` rather than `left`, so an RTL timeline puts its gutter on
+            // the other side without anything here knowing which way it reads.
+            start: Math.round((look.indicator - THICKNESS) / 2),
+            backgroundColor: '$border',
+            zIndex: -1,
+        }, props.style),
+        'data-testname': props['data-testname'],
+    });
+}
+/**
+ * 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 function TimelineIndicator(props) {
+    const look = useLook('TimelineIndicator');
+    const theme = useTheme();
+    const variant = props.variant ?? look.variant;
+    const accent = props.accent === undefined
+        ? look.accent
+        : resolveColor(props.accent, theme, look.accent);
+    // The ink on a filled indicator. The palette has already answered this for
+    // its own accent (`accentText`, itself derived), so ask it rather than
+    // deriving a second answer that could disagree; a colour the app brought is
+    // measured the same way core measures one.
+    const onAccent = accent === theme.accent
+        ? String(theme.accentText)
+        : readableInk(accent, [String(theme.text), String(theme.background)]);
+    const paint = variant === 'solid'
+        ? { backgroundColor: accent, color: props.color ?? onAccent }
+        : variant === 'subtle'
+            ? {
+                backgroundColor: over(look.ground, accent, 0.22),
+                color: props.color ?? '$text',
+            }
+            : variant === 'outline'
+                ? {
+                    backgroundColor: look.ground,
+                    borderWidth: 1,
+                    borderColor: over(look.ground, accent, 0.55),
+                    color: props.color ?? '$text',
+                }
+                : // plain: no chip, but still opaque. The line runs *behind* every
+                    // indicator, and a transparent one would have it struck through
+                    // whatever is inside — which is the one thing a tick in a
+                    // timeline must not look like.
+                    { backgroundColor: look.ground, color: props.color ?? '$text' };
+    return hx('box', {
+        style: styled({
+            width: look.indicator,
+            height: look.indicator,
+            borderRadius: look.indicator / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            fontSize: look.indicatorFont,
+            fontWeight: 'bold',
+            // The clearance around the mark. An explicit `outlineWidth` draws
+            // the ring whether or not anything is focused, which is what makes
+            // it usable as something other than a focus ring.
+            outlineWidth: RING,
+            outlineColor: look.ground,
+            outlineOffset: 0,
+            ...paint,
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, withText(props.children));
+}
+/**
+ * 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 function TimelineContent(props) {
+    useLook('TimelineContent');
+    const last = React.useContext(LastContext);
+    return hx('box', {
+        style: styled({
+            flexDirection: 'column',
+            flexGrow: 1,
+            flexShrink: 1,
+            gap: CONTENT_GAP,
+            paddingBottom: last ? 0 : STEP_GAP,
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, withText(props.children));
+}
+/**
+ * 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 function TimelineTitle(props) {
+    const look = useLook('TimelineTitle');
+    return hx('box', {
+        style: styled({
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: TITLE_GAP,
+            marginTop: look.titleTop,
+            fontSize: look.titleFont,
+            fontWeight: 'bold',
+            color: '$text',
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, withText(props.children));
+}
+/** The quiet line under the title: a date, a name, a status. */
+export function TimelineDescription(props) {
+    const look = useLook('TimelineDescription');
+    return hx('box', {
+        style: styled({
+            flexDirection: 'column',
+            fontSize: look.descriptionFont,
+            color: '$textMuted',
+        }, props.style),
+        'data-testname': props['data-testname'],
+    }, withText(props.children));
+}
+//# sourceMappingURL=index.js.map

package/dist/timeline/index.js.map

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

package/dist/tray-host/hx.d.ts

@@ -0,0 +1,24 @@
+import type { Key, ReactElement, ReactNode } from 'react';
+import type { ReactX11Elements, Theme } from 'react-x11';
+/** The host elements, by name. */
+export type Host = ReactX11Elements;
+/**
+ * What every element takes on top of its own props.
+ *
+ * `theme` is honoured by **every** node — `Node.theme` merges `props.theme`
+ * over the inherited palette, whatever the kind — but react-x11's element
+ * declarations only put it on `<window>`. A widget re-declares the theme it
+ * read from context onto its own root so that `$token` values still resolve
+ * inside a `<popup>`, which is a separate window and does not inherit the
+ * trigger's node tree. So the prop is real; only the declaration is narrow.
+ */
+interface CommonProps {
+    key?: Key;
+    /** `Theme` is listed alongside the record because it is an interface, and
+     *  an interface has no implicit index signature — so the palette `useTheme`
+     *  hands back is not assignable to the record react-x11 declares. */
+    theme?: Theme | Record<string, string | number>;
+}
+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/tray-host/hx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx.d.ts","sourceRoot":"","sources":["../../src/tray-host/hx.ts"],"names":[],"mappings":"AAcA,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;;;;;;;;;GASG;AACH,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;yEAEqE;IACrE,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,IAAI,EACrC,IAAI,EAAE,CAAC,EAIP,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,CAKd"}

package/dist/tray-host/hx.js

@@ -0,0 +1,25 @@
+// `React.createElement`, typed against react-x11's host elements.
+//
+// The library writes `h(...)` rather than JSX — a convention inherited from
+// core, and worth keeping so moving code between the two repos stays a
+// rename. But `React.createElement`'s own overloads are `@types/react`'s, and
+// they describe the DOM: a `<box onKeyDown>` handler is checked against
+// React's `KeyboardEvent`, not react-x11's, and the whole props object is
+// measured against `DOMAttributes`. Everything interesting fails.
+//
+// So the element name is looked up in react-x11's own element table instead.
+// `hx('box', …)` gets `<box>`'s real props — `ev.keysym` on a key handler,
+// `onDraw` on a `<canvas>` — and `hx('div', …)` is an error, which is the
+// same guarantee the JSX namespace gives `examples/` and `test/types/`.
+import React from 'react';
+export function hx(type, 
+// `theme` is dropped from the element's own props before the merge:
+// `<window>` and `<popup>` already declare it, narrower, and intersecting
+// the two would demand a value satisfying both.
+props, ...children) {
+    // The cast is the whole point of the wrapper: `createElement`'s string
+    // overload insists on DOM props, and the signature above has already
+    // checked these against the element that will actually receive them.
+    return React.createElement(type, props, ...children);
+}
+//# sourceMappingURL=hx.js.map

package/dist/tray-host/hx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx.js","sourceRoot":"","sources":["../../src/tray-host/hx.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,EAAE;AACF,4EAA4E;AAC5E,uEAAuE;AACvE,8EAA8E;AAC9E,wEAAwE;AACxE,0EAA0E;AAC1E,kEAAkE;AAClE,EAAE;AACF,6EAA6E;AAC7E,2EAA2E;AAC3E,0EAA0E;AAC1E,wEAAwE;AACxE,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,MAAM,UAAU,EAAE,CAChB,IAAO;AACP,oEAAoE;AACpE,0EAA0E;AAC1E,gDAAgD;AAChD,KAAqD,EACrD,GAAG,QAAqB;IAExB,uEAAuE;IACvE,qEAAqE;IACrE,qEAAqE;IACrE,OAAO,KAAK,CAAC,aAAa,CAAC,IAAc,EAAE,KAAc,EAAE,GAAG,QAAQ,CAAC,CAAC;AAC1E,CAAC"}

package/dist/tray-host/index.d.ts

@@ -0,0 +1,110 @@
+import type { ReactElement, ReactNode, Ref } from 'react';
+import type { Style } from 'react-x11/style';
+import type { TrayConflict, TrayStatus } from './manager.js';
+import type { TrayIcon, TrayMessage, TrayOrientation } from './protocol.js';
+export { BalloonAssembler, MANAGER_ATOM, MESSAGE_DATA_ATOM, OPCODE_ATOM, ORIENTATION_ATOM, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, SYSTEM_TRAY_BEGIN_MESSAGE, SYSTEM_TRAY_CANCEL_MESSAGE, SYSTEM_TRAY_REQUEST_DOCK, VISUAL_ATOM, argbVisualOf, decodeUtf8, orientationValue, selectionNameFor, } from './protocol.js';
+export type { TrayIcon, TrayMessage, TrayOrientation } from './protocol.js';
+export { TrayManager } from './manager.js';
+export type { TrayApp, TrayConflict, TrayManagerHandlers, TrayManagerStartOptions, TrayStatus, } from './manager.js';
+export { BalloonNotifier } from './notify.js';
+/** What a `ref` on `<TrayHost>` gets. */
+export interface TrayHostHandle {
+    readonly status: TrayStatus;
+    /** Who owns the selection, when this host does not. */
+    readonly conflict: TrayConflict | null;
+    /** The docked icons, in the order they are rendered. */
+    readonly icons: readonly TrayIcon[];
+    /** The manager selection window — the address clients send opcodes to. */
+    readonly windowId: number | null;
+}
+export interface TrayHostProps {
+    /**
+     * Which way the icons run, and what `_NET_SYSTEM_TRAY_ORIENTATION` says so
+     * an icon can draw itself to match. Default `'horizontal'`.
+     */
+    orientation?: TrayOrientation;
+    /** The square each icon is laid out in, in pixels. Default 22. */
+    iconSize?: number;
+    /** Between icons. Default 2. */
+    spacing?: number;
+    /** Which screen's selection to own. Default 0. */
+    screen?: number;
+    /**
+     * Render order. Icons are otherwise in the order they docked.
+     *
+     * A comparator rather than a sorted list because **node identity has to
+     * stay with the icon**: each `<foreign>` is keyed on the window id and its
+     * `windowId` never changes, so reordering moves the node instead of
+     * releasing a client from one node and re-embedding it in another. That
+     * hand-off is a documented race — the client is parked at the root long
+     * enough for a window manager to frame it, and the second node then
+     * reports `onClientGone` for a live window.
+     */
+    sort?: (a: TrayIcon, b: TrayIcon) => number;
+    /** An application asked to be in the tray, and now is. */
+    onDock?: (icon: TrayIcon) => void;
+    /** Its window went away — the ordinary end of a tray icon's life, not an
+     *  error. Also fires for every icon when the selection is lost. */
+    onUndock?: (icon: TrayIcon) => void;
+    /**
+     * Another tray already owns this screen's selection, so this one embeds
+     * nothing. A second panel on one display is a configuration mistake rather
+     * than an exception, which is why it arrives here instead of throwing.
+     */
+    onConflict?: (info: TrayConflict) => void;
+    onStatusChange?: (status: TrayStatus) => void;
+    /**
+     * A balloon message. **Providing this turns off the default**, which is to
+     * forward the text to the desktop's notification service — a panel that
+     * draws its own bubble should not also raise a notification.
+     */
+    onMessage?: (message: TrayMessage) => void;
+    /** A message was withdrawn before it finished arriving. */
+    onCancelMessage?: (info: {
+        windowId: number;
+        id: number;
+    }) => void;
+    /** Failures on the wire, and a notification that could not be delivered.
+     *  Without a handler none of it is reported anywhere. */
+    onError?: (err: Error) => void;
+    /** False stops balloon messages being forwarded to the notification
+     *  service. Ignored when `onMessage` is given, which already replaces it. */
+    notify?: boolean;
+    /** Who a forwarded balloon message is attributed to. Default
+     *  `'System Tray'`. */
+    appName?: string;
+    /** Rendered instead of the tray when another host owns the selection. */
+    fallback?: ReactNode;
+    style?: Style | Style[];
+    ref?: Ref<TrayHostHandle>;
+    'data-testname'?: string;
+}
+/**
+ * The system tray: applications dock their icons into it, and it lays them
+ * out like any other row of elements.
+ *
+ * ```jsx
+ * <TrayHost
+ *   orientation="horizontal"
+ *   iconSize={22}
+ *   onDock={(icon) => log(`docked ${icon.id}`)}
+ *   onUndock={(icon) => log(`gone ${icon.id}`)}
+ * />
+ * ```
+ *
+ * **One per display.** Mounting takes `_NET_SYSTEM_TRAY_S<screen>` and
+ * announces it to the root, which is what makes applications that were
+ * waiting start docking; unmounting gives the selection back and hands every
+ * client back to the root untouched.
+ *
+ * **An icon that never maps is normal.** Clients set `XEMBED_MAPPED` when
+ * they are ready, and some take a while about it. The square is laid out
+ * either way, because a tray that only reserved space for icons it could see
+ * would reflow every time one woke up.
+ *
+ * **Icons are not tab stops.** A tray icon is a click target, and Tab
+ * walking through eleven of them — several of which are invisible — is the
+ * worst version of this, so every `<foreign>` here is `focusable={false}`.
+ */
+export declare function TrayHost(props: TrayHostProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/tray-host/index.d.ts.map

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