@tai42/studio-sdk 0.2.0

package/dist/components/reveal-input.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `RevealInput` — a controlled text input whose value is MASKED by default with a
+ * reveal-on-click eye toggle. The masking is native (`type="password"` when
+ * hidden, `type="text"` when revealed) so editing never corrupts the value; it is
+ * purely visual — the real value always lives in the input's `value`. When
+ * `onChange` is omitted or `readOnly` is set the field is read-only but still
+ * revealable. The value is never logged.
+ *
+ * The field is a `tai-input` and the toggle a `tai-icon-btn` whose accessible name
+ * ("Show value" / "Hide value") states the action; the eye mark itself is
+ * decorative.
+ */
+import { useState } from 'react';
+import { Field } from './field';
+import { EyeIcon, EyeOffIcon } from './icons';
+import { TextInput } from './inputs';
+export function RevealInput({ value, onChange, readOnly, disabled, idPrefix = 'reveal-input', label, placeholder, 'aria-label': ariaLabel, }) {
+    const [revealed, setRevealed] = useState(false);
+    const isReadOnly = readOnly === true || onChange === undefined;
+    const toggleLabel = revealed ? 'Hide value' : 'Show value';
+    const control = (_jsxs("div", { className: "tai-row", children: [_jsx("div", { style: { flex: 1 }, children: _jsx(TextInput, { type: revealed ? 'text' : 'password', "aria-label": ariaLabel, value: value, onChange: isReadOnly
+                        ? undefined
+                        : (event) => {
+                            onChange(event.target.value);
+                        }, readOnly: isReadOnly, disabled: disabled, placeholder: placeholder, autoComplete: "off", spellCheck: false }) }), _jsx("button", { type: "button", className: "tai-icon-btn", "aria-label": toggleLabel, "data-testid": `${idPrefix}-toggle`, disabled: disabled, onClick: () => {
+                    setRevealed((prev) => !prev);
+                }, children: revealed ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) })] }));
+    return (_jsx("div", { "data-testid": idPrefix, children: label !== undefined ? _jsx(Field, { label: label, children: control }) : control }));
+}
+//# sourceMappingURL=reveal-input.js.map

package/dist/components/reveal-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-input.js","sourceRoot":"","sources":["../../src/components/reveal-input.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAcrC,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,cAAc,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EAAE,SAAS,GACN;IACjB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,CAAC;IAC/D,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;IAE3D,MAAM,OAAO,GAAG,CACd,eAAK,SAAS,EAAC,SAAS,aAEtB,cAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,SAAS,IACR,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,gBACxB,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,QAAQ,EACN,UAAU;wBACR,CAAC,CAAC,SAAS;wBACX,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;4BACR,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC/B,CAAC,EAEP,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAC,KAAK,EAClB,UAAU,EAAE,KAAK,GACjB,GACE,EACN,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,gBACZ,WAAW,iBACV,GAAG,QAAQ,SAAS,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC,YAEA,QAAQ,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACjC,IACL,CACP,CAAC;IAEF,OAAO,CACL,6BAAkB,QAAQ,YACvB,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,YAAG,OAAO,GAAS,CAAC,CAAC,CAAC,OAAO,GACnE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/scroll-region.d.ts

@@ -0,0 +1,85 @@
+import type { CSSProperties, ReactNode, Ref, RefCallback } from 'react';
+export interface ScrollRegionProps {
+    /** The region's accessible name, applied only while it actually scrolls. */
+    readonly label: string;
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    /**
+     * The one arbitrary attribute this component forwards. The measured attributes
+     * — `tabindex`, `role` and `aria-label` — are the component's own and appear
+     * and disappear with the overflow, so a general attribute spread would let a
+     * caller set them statically and defeat the measurement. A test hook cannot,
+     * which is why it is the exception rather than the first of a set.
+     */
+    readonly 'data-testid'?: string;
+    /** A consumer ref for the scrolling `div` itself. */
+    readonly ref?: Ref<HTMLDivElement>;
+}
+/** The fallback name per instrumented surface, when no heading precedes it. */
+export interface ProseScrollLabels {
+    readonly table?: string;
+    readonly pre?: string;
+}
+/** The attribute set a scrolling box wears; every value is absent while it fits. */
+export interface OverflowRegionAttributes {
+    /** Attach to the scrolling element; it is what the measurement follows. */
+    readonly ref: RefCallback<HTMLElement>;
+    readonly tabIndex?: 0;
+    readonly role?: 'region';
+    readonly 'aria-label'?: string;
+}
+/**
+ * The conditional region attributes for a scrolling box, alongside the ref that
+ * names it. The ref must go on the scrolling box ITSELF — a `<pre>`, a JSON
+ * pane, or the `div` `ScrollRegion` renders. Use the hook when wrapping the
+ * content in a `ScrollRegion` would give the surface a second scroller.
+ *
+ * The box is measured as it is attached, whenever it or any child resizes, and
+ * whenever its content changes — replaced, appended, or edited in place. A
+ * replaced child is a NEW element, so the registration is re-pointed at the
+ * current children before each measurement, adding and dropping only the ones
+ * that actually changed; both sides of that are registrations on the shared
+ * observers, not observers of this mount's own. The only DOM change a
+ * measurement can cause is the region ATTRIBUTES this hook returns, and
+ * attributes are deliberately left unobserved — that, not an absence of
+ * mutation, is what stops the pair from re-triggering each other.
+ *
+ * @param ref - a consumer ref that wants the same element, or `undefined`.
+ * @param label - its accessible name, applied only while it actually scrolls.
+ */
+export declare function useOverflowRegion(ref: Ref<HTMLElement> | undefined, label: string): OverflowRegionAttributes;
+export declare function ScrollRegion({ label, children, className, style, 'data-testid': testId, ref, }: ScrollRegionProps): import("react").JSX.Element;
+/**
+ * Instruments the scrollable surfaces under the element the returned ref is
+ * attached to — every `<table>` and every `<pre>` — as scroll regions. React
+ * cannot wrap markup it did not create, so this walks the DOM instead. A table
+ * is moved into a `div.tai-scroll-region` (once — the pass is idempotent)
+ * because the table itself is not the scrolling box; a `<pre>` already IS its
+ * own scrolling box, so it is instrumented in place. Either way the scrolling
+ * element carries the same conditional `tabindex`/`role`/`aria-label` as
+ * `ScrollRegion`.
+ *
+ * The name is the nearest heading preceding the surface — read for all of them
+ * in one document-order pass — so a reader landing on the region hears which
+ * section it belongs to; `labels` covers a surface with no heading above it, and
+ * a name shared by several surfaces is numbered so no two regions answer to the
+ * same one.
+ *
+ * The pass runs from the ref callback rather than an effect, which puts it in
+ * the commit phase, BEFORE the browser paints: `.tai-prose table` is
+ * `width: 100%` with no overflow of its own — the scroller exists only on the
+ * wrapper this builds — so a pass that ran after paint would show one frame at
+ * 320/360 px with the table overflowing the document, then jolt sideways. A
+ * passive-effect probe measured exactly that: at first paint wrappers=0 and the
+ * table's parent was `.tai-prose`.
+ *
+ * Injected HTML is replaced wholesale when its source changes, so the pass is
+ * re-run from a `MutationObserver` on the subtree rather than on attachment
+ * alone.
+ *
+ * @param labels - the names for surfaces with no preceding heading.
+ * @returns the ref for the element whose subtree holds the injected markup.
+ */
+export declare function useProseScrollRegions(labels?: ProseScrollLabels): RefCallback<HTMLElement>;
+//# sourceMappingURL=scroll-region.d.ts.map

package/dist/components/scroll-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-region.d.ts","sourceRoot":"","sources":["../../src/components/scroll-region.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CACpC;AAeD,+EAA+E;AAC/E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACvB;AAoND,oFAAoF;AACpF,MAAM,WAAW,wBAAwB;IACvC,2EAA2E;IAC3E,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,SAAS,EACjC,KAAK,EAAE,MAAM,GACZ,wBAAwB,CA4D1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,iBAAiB,+BAenB;AAgKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,CAAC,EAAE,iBAAiB,GAAG,WAAW,CAAC,WAAW,CAAC,CA0H1F"}