twd-js 1.7.1 → 1.7.3

package/dist/twd.d.ts

@@ -0,0 +1,291 @@
+import { Options, Rule } from './commands/mockBridge';
+import { AnyAssertion, ArgsFor, TWDElemAPI, WaitForOptions } from './twd-types';
+import { URLCommandAPI } from './commands/url';
+interface TWDAPI {
+    /**
+     * Finds an element by selector and returns the TWD API for it.
+     * @param selector CSS selector
+     * @returns {Promise<TWDElemAPI>} The TWD API for the element
+     *
+     * @example
+     * ```ts
+     * const btn = await twd.get("button");
+     *
+     * ```
+     *
+     */
+    get: (selector: string) => Promise<TWDElemAPI>;
+    /**
+     * Sets the value of an input element and dispatches an input event. We recommend using this only for range, color, time inputs.
+     * @param el The input element
+     * @param value The value to set
+     *
+     * @example
+     * ```ts
+     * const input = await twd.get("input[type='time']");
+     * twd.setInputValue(input.el, "13:30");
+     *
+     * ```
+     */
+    setInputValue: (el: Element, value: string) => void;
+    /**
+     * Finds multiple elements by selector and returns an array of TWD APIs for them.
+     * @param selector CSS selector
+     * @returns {Promise<TWDElemAPI[]>} Array of TWD APIs for the elements
+     *
+     * @example
+     * ```ts
+     * const items = await twd.getAll(".item");
+     * items.at(0).should("be.visible");
+     * items.at(1).should("contain.text", "Hello");
+     * expect(items).to.have.length(3);
+     * ```
+     */
+    getAll: (selector: string) => Promise<TWDElemAPI[]>;
+    /**
+     * Simulates visiting a URL (SPA navigation).
+     * @param url The URL to visit
+     * @param [reload] Whether to force a reload even if already on the URL (optional)
+     *
+     * @example
+     * ```ts
+     * twd.visit("/contact");
+     * // visit with reload
+     * twd.visit("/contact", true);
+     * ```
+     */
+    visit: (url: string, reload?: boolean) => Promise<void>;
+    /**
+     * Mock a network request.
+     *
+     * @param alias Identifier for the mock rule. Useful for `waitForRequest()`.
+     * @param options Options to configure the mock:
+     *  - `method`: HTTP method ("GET", "POST", …)
+     *  - `url`: URL string or RegExp to match
+     *  - `response`: Body of the mocked response
+     *  - `status`: (optional) HTTP status code (default: 200)
+     *  - `responseHeaders`: (optional) Response headers
+     *  - `delay`: (optional) Delay in ms before returning the response
+     *
+     * @example
+     * ```ts
+     * mockRequest("getUser", {
+     *   method: "GET",
+     *   url: /\/api\/user\/\d+/,
+     *   response: { id: 1, name: "Kevin" },
+     *   status: 200,
+     *   responseHeaders: { "x-mock": "true" }
+     * });
+     * ```
+     */
+    mockRequest: (alias: string, options: Options) => Promise<void>;
+    /**
+     * Wait for a mocked request to be made.
+     * @param alias The alias of the mock rule to wait for
+     * @param retries The number of retries to make
+     * @param retryDelay The delay between retries
+     * @return The matched rule (with body if applicable)
+     *
+     * @example
+     * ```ts
+     * const rule = await twd.waitForRequest("aliasId");
+     * console.log(rule.body);
+     * const rule = await twd.waitForRequest("aliasId", 5, 100);
+     * console.log(rule.body);
+     *
+     * ```
+     */
+    waitForRequest: (alias: string, retries?: number, retryDelay?: number) => Promise<Rule>;
+    /**
+     * wait for a list of mocked requests to be made.
+     * @param aliases The aliases of the mock rules to wait for
+     * @returns The matched rules (with body if applicable)
+     * @example
+     * ```ts
+     * const rules = await waitForRequests(["getUser", "postComment"]);
+     * ```
+     */
+    waitForRequests: (aliases: string[]) => Promise<Rule[]>;
+    /**
+     * URL-related assertions.
+     *
+     * @example
+     * ```ts
+     * twd.url().should("eq", "http://localhost:3000/contact");
+     * twd.url().should("contain.url", "/contact");
+     *
+     * ```
+     */
+    url: () => URLCommandAPI;
+    /**
+     * Initializes request mocking (registers the service worker).
+     * @param [path] service worker absolute path (optional)
+     *
+     * @example
+     * ```ts
+     * await twd.initRequestMocking();
+     * // init with custom service worker path
+     * await twd.initRequestMocking('/test-path/mock-sw.js');
+     * ```
+     */
+    initRequestMocking: (path?: string) => Promise<void>;
+    /**
+     * Clears all request mock rules.
+     *
+     * @example
+     * ```ts
+     * twd.clearRequestMockRules();
+     *
+     * ```
+     */
+    clearRequestMockRules: () => void;
+    /**
+     * Gets all current request mock rules.
+     *
+     * @example
+     * ```ts
+     * const rules = twd.getRequestMockRules();
+     * console.log(rules);
+     * ```
+     */
+    getRequestMockRules: () => Rule[];
+    /**
+     * Gets the number of times a specific mock rule was hit.
+     * @param alias The alias of the mock rule
+     * @returns The number of times the rule was matched
+     *
+     * @example
+     * ```ts
+     * const count = twd.getRequestCount("getUser");
+     * expect(count).to.equal(2);
+     * ```
+     */
+    getRequestCount: (alias: string) => number;
+    /**
+     * Gets a snapshot of all mock rule hit counts.
+     * @returns An object mapping rule aliases to their hit counts
+     *
+     * @example
+     * ```ts
+     * const counts = twd.getRequestCounts();
+     * expect(counts).to.deep.equal({ getUser: 2, listPosts: 1 });
+     * ```
+     */
+    getRequestCounts: () => Record<string, number>;
+    /**
+     * Waits for a specified time.
+     * @param time Time in milliseconds to wait
+     * @returns A promise that resolves after the specified time
+     * @example
+     * ```ts
+     * await twd.wait(500); // wait for 500ms
+     * ```
+     */
+    wait: (time: number) => Promise<void>;
+    /**
+     * Retries a callback until it stops throwing or the timeout expires.
+     * Use this instead of `twd.wait(ms)` to wait for conditions rather than fixed delays.
+     *
+     * @param callback Function to retry — can be sync or async. Should throw if the condition is not yet met.
+     * @param options Optional timeout, interval, and message settings
+     * @returns A promise that resolves with the callback's return value when it succeeds
+     *
+     * @example
+     * ```ts
+     * // Wait for an analytics event and return it
+     * const event = await twd.waitFor(() => {
+     *   const ev = findEvent("purchase");
+     *   expect(ev).to.exist;
+     *   return ev;
+     * }, { message: "purchase event to fire" });
+     *
+     * // Wait for an element (single expression)
+     * const heading = await twd.waitFor(() => screenDom.getByRole("heading", { name: /checkout/i }));
+     *
+     * // Fire-and-forget (void) — still works as before
+     * await twd.waitFor(() => {
+     *   expect(submitButton.disabled).to.be.false;
+     * });
+     * ```
+     */
+    waitFor: <T>(callback: () => T | Promise<T>, options?: WaitForOptions) => Promise<T>;
+    /**
+     * Asserts something about the element.
+     * @param el The element to assert on
+     * @param name The name of the assertion.
+     * @param args Arguments for the assertion.
+     * @returns The same API for chaining.
+     * @example
+     * ```ts
+     * const button = await twd.get("button");
+     * const text = screenDom.getByText("Hello");
+     * twd.should(button.el, "have.text", "Hello");
+     * twd.should(text, "be.empty");
+     * twd.should(button.el, "have.class", "active");
+     * ```
+     */
+    should: (el: Element, name: AnyAssertion, ...args: ArgsFor<AnyAssertion>) => void;
+    /**
+     * Mock a component.
+     * @param name The name of the component to mock
+     * @param component The component to mock
+     * @returns The mocked component
+     * @example
+     * ```ts
+     * twd.mockComponent("Button", Button);
+     * ```
+     */
+    mockComponent: (name: string, component: React.ComponentType<any>) => void;
+    /**
+     * Clears all component mocks.
+     *
+     * @example
+     * ```ts
+     * twd.clearComponentMocks();
+     * ```
+     */
+    clearComponentMocks: () => void;
+    /**
+     * Asserts that an element does not exist in the DOM.
+     * @param selector CSS selector of the element to check
+     * @returns A promise that resolves if the element does not exist, or rejects if it does
+     *
+     * @example
+     * ```ts
+     * await twd.notExists(".non-existent");
+     * ```
+     */
+    notExists: (selector: string) => Promise<void>;
+    /**
+     * Simulates a viewport size by constraining body dimensions, overriding
+     * `window.innerWidth`/`window.innerHeight` and `window.matchMedia()`, and
+     * rewriting CSS `@media` rules to match the simulated dimensions.
+     * Call with no arguments to reset to the original viewport.
+     *
+     * @param width Viewport width in pixels
+     * @param height Viewport height in pixels (optional — omit to leave height unconstrained)
+     *
+     * @example
+     * ```ts
+     * twd.viewport(375, 667); // mobile
+     * twd.viewport(768);      // tablet width, height unconstrained
+     * twd.viewport();          // reset
+     * ```
+     */
+    viewport: (width?: number, height?: number) => void;
+    /**
+     * Resets the viewport to its original size (undoes a previous `twd.viewport()` call).
+     *
+     * @example
+     * ```ts
+     * twd.resetViewport();
+     * ```
+     */
+    resetViewport: () => void;
+}
+/**
+ * Mini Cypress-style helpers for DOM testing.
+ * @namespace twd
+ */
+export declare const twd: TWDAPI;
+export {};

package/dist/ui/ClosedSidebar.d.ts

@@ -0,0 +1,6 @@
+interface ClosedSidebarProps {
+    setOpen: (open: boolean) => void;
+    position: 'left' | 'right';
+}
+export declare const ClosedSidebar: ({ setOpen, position }: ClosedSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Icons/BaseIcon.d.ts

@@ -0,0 +1,7 @@
+interface BaseIconProps {
+    className: string;
+    children: React.ReactNode;
+    dataTestId: string;
+}
+declare const BaseIcon: ({ className, children, dataTestId }: BaseIconProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseIcon;

package/dist/ui/Icons/ChevronDown.d.ts

@@ -0,0 +1,2 @@
+declare const ChevronDown: () => import("react/jsx-runtime").JSX.Element;
+export default ChevronDown;

package/dist/ui/Icons/ChevronRight.d.ts

@@ -0,0 +1,2 @@
+declare const ChevronRight: () => import("react/jsx-runtime").JSX.Element;
+export default ChevronRight;

package/dist/ui/Icons/Loader.d.ts

@@ -0,0 +1,2 @@
+declare const Loader: () => import("react/jsx-runtime").JSX.Element;
+export default Loader;

package/dist/ui/Icons/MockRequestIcon.d.ts

@@ -0,0 +1,2 @@
+declare const MockRequestIcon: () => import("react/jsx-runtime").JSX.Element;
+export default MockRequestIcon;

package/dist/ui/Icons/Play.d.ts

@@ -0,0 +1,2 @@
+declare const Play: () => import("react/jsx-runtime").JSX.Element;
+export default Play;

package/dist/ui/LogItem.d.ts

@@ -0,0 +1,6 @@
+interface LogItemProps {
+    log: string;
+    index: number;
+}
+export declare const LogItem: ({ log, index }: LogItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/MockRulesButton.d.ts

@@ -0,0 +1 @@
+export declare const MockRulesButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/ui/MockedComponent.d.ts

@@ -0,0 +1,6 @@
+interface MockedComponentProps<TProps = any> {
+    name: string;
+    children: React.ReactElement<TProps>;
+}
+export declare function MockedComponent<TProps extends Record<string, any>>({ name, children, }: MockedComponentProps<TProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/SearchInput.d.ts

@@ -0,0 +1,6 @@
+interface SearchInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: ({ value, onChange }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/SkipOnlyName.d.ts

@@ -0,0 +1,8 @@
+interface SkipOnlyNameProps {
+    id: string;
+    name: string;
+    skip?: boolean;
+    only?: boolean;
+}
+declare const SkipOnlyName: ({ id, name, skip, only }: SkipOnlyNameProps) => import("react/jsx-runtime").JSX.Element;
+export default SkipOnlyName;

package/dist/ui/TWDSidebar.d.ts

@@ -0,0 +1,20 @@
+interface TWDSidebarProps {
+    /**
+     * Whether the sidebar is open by default
+     */
+    open: boolean;
+    /**
+     * Sidebar position
+     * - left: Sidebar on the left side (default)
+     * - right: Sidebar on the right side
+     *
+     * @default "left"
+     */
+    position?: 'left' | 'right';
+    /**
+     * Whether to show the search/filter input
+     */
+    search?: boolean;
+}
+export declare const TWDSidebar: ({ open, position, search }: TWDSidebarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/TestList.d.ts

@@ -0,0 +1,8 @@
+import { Node } from './utils/buildTreeFromHandlers';
+interface TestListProps {
+    roots: Node[];
+    runTest: (id: string) => Promise<void>;
+    searchQuery?: string;
+}
+export declare const TestList: ({ roots, runTest, searchQuery }: TestListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/TestListItem.d.ts

@@ -0,0 +1,19 @@
+interface Test {
+    name: string;
+    depth: number;
+    status?: 'idle' | 'pass' | 'fail' | 'skip' | 'running';
+    logs?: string[];
+    id: string;
+    parent?: string;
+    type: 'test' | 'suite';
+    only?: boolean;
+    skip?: boolean;
+}
+interface TestListItemProps {
+    node: Test;
+    depth: number;
+    id: string;
+    runTest: (i: string) => void;
+}
+export declare const TestListItem: ({ node, depth, id, runTest }: TestListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/componentMocks.d.ts

@@ -0,0 +1,3 @@
+export declare const mockComponent: <TProps extends Record<string, any>>(id: string, component: React.ComponentType<TProps>) => void;
+export declare function clearComponentMocks(): void;
+export declare const getMockForComponent: <TProps = any>(id: string) => React.ComponentType<TProps> | undefined;

package/dist/ui/hooks/useLayout.d.ts

@@ -0,0 +1,6 @@
+interface UseLayoutProps {
+    isOpen: boolean;
+    position: 'left' | 'right';
+}
+export declare const useLayout: ({ isOpen, position }: UseLayoutProps) => void;
+export {};

package/dist/ui/index.d.ts

@@ -0,0 +1 @@
+export { MockedComponent } from './MockedComponent';

package/dist/ui/utils/buildTreeFromHandlers.d.ts

@@ -0,0 +1,16 @@
+interface Test {
+    name: string;
+    depth: number;
+    status?: 'idle' | 'pass' | 'fail' | 'skip' | 'running';
+    logs?: string[];
+    id: string;
+    parent?: string;
+    type: 'test' | 'suite';
+    only?: boolean;
+    skip?: boolean;
+}
+export type Node = Test & {
+    childrenNodes?: Node[];
+};
+export declare const buildTreeFromHandlers: (handlers: Test[]) => Node[];
+export {};

package/dist/ui/utils/chaiErrorFormat.d.ts

@@ -0,0 +1,22 @@
+interface ChaiAssertionError extends Error {
+    actual?: unknown;
+    expected?: unknown;
+    operator?: string;
+    showDiff?: boolean;
+}
+declare const isChaiAssertionError: (error: unknown) => error is ChaiAssertionError;
+declare const formatChaiError: (error: ChaiAssertionError) => {
+    type: string;
+    actual: {} | null;
+    expected: {} | null;
+    operator: string | undefined;
+    message?: undefined;
+} | {
+    type: string;
+    message: string;
+    actual?: undefined;
+    expected?: undefined;
+    operator?: undefined;
+};
+declare const printChaiError: (error: ChaiAssertionError) => void;
+export { isChaiAssertionError, formatChaiError, printChaiError };

package/dist/ui/utils/filterTree.d.ts

@@ -0,0 +1,2 @@
+import { Node } from './buildTreeFromHandlers';
+export declare const filterTree: (roots: Node[], query: string) => Node[];

package/dist/ui/utils/formatLogs.d.ts

@@ -0,0 +1,30 @@
+export declare enum LogType {
+    CHAI_DIFF = "chai-diff",
+    CHAI_MESSAGE = "chai-message",
+    ERROR = "error"
+}
+interface ChaiDiffLog {
+    type: LogType.CHAI_DIFF;
+    expected: unknown;
+    actual: unknown;
+}
+interface ChaiMessageLog {
+    type: LogType.CHAI_MESSAGE;
+    message: string;
+}
+interface ErrorLog {
+    type: LogType.ERROR;
+    message: string;
+}
+export type ParsedLog = ChaiDiffLog | ChaiMessageLog | ErrorLog;
+export declare const parseLogEntry: (log: string) => ParsedLog | null;
+export declare const formatValue: (value: unknown) => string;
+export declare const assertStyles: (text: string) => {
+    color: string;
+    fontWeight: string;
+} | {
+    color?: undefined;
+    fontWeight?: undefined;
+};
+export declare const getDisplayText: (log: string, parsedLog: ParsedLog | null) => string;
+export {};

package/dist/ui/utils/screenReaderMessages.d.ts

@@ -0,0 +1,9 @@
+import { Handler } from '../../runner';
+/**
+ * Generate screen reader message for a specific test result
+ */
+export declare const displaySRMessageSpecificTest: (test: Handler) => string;
+/**
+ * Generate screen reader message for all tests result
+ */
+export declare const displaySRMessageAllTests: (tests: Handler[]) => string;

package/dist/ui/utils/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const CSS_STYLES = "\n/* ========================\n   Animation keyframes\n   ======================== */\n@keyframes twd-spin {\n  0%   { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* ========================\n   Buttons \u2014 shared base\n   ======================== */\n.twd-btn {\n  cursor: pointer;\n  border-radius: var(--twd-border-radius);\n  transition: all var(--twd-animation-duration) ease;\n}\n.twd-btn:hover { filter: brightness(1.15); }\n.twd-btn:active { filter: brightness(0.9); }\n.twd-btn:focus-visible {\n  outline: 2px solid var(--twd-primary);\n  outline-offset: 2px;\n}\n.twd-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.twd-btn:disabled:hover { filter: none; }\n\n/* ========================\n   Button variants\n   ======================== */\n.twd-btn-primary {\n  background: var(--twd-button-primary);\n  color: var(--twd-button-primary-text);\n  padding: var(--twd-spacing-xs) var(--twd-spacing-md);\n  border: none;\n}\n.twd-btn-secondary {\n  background: var(--twd-button-secondary);\n  color: var(--twd-button-secondary-text);\n  padding: var(--twd-spacing-xs) var(--twd-spacing-md);\n  border: 1px solid var(--twd-button-border);\n}\n.twd-btn-icon {\n  background: transparent;\n  border: 1px solid var(--twd-border-light);\n  padding: 0;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  font-size: var(--twd-font-size-sm);\n}\n.twd-btn-mock-rules {\n  background: var(--twd-button-secondary);\n  border: 1px solid var(--twd-button-border);\n  border-radius: var(--twd-border-radius-lg);\n  padding: var(--twd-spacing-md) var(--twd-spacing-lg);\n  font-size: var(--twd-font-size-sm);\n  color: var(--twd-button-secondary-text);\n  display: flex;\n  align-items: center;\n  gap: var(--twd-spacing-md);\n  margin-bottom: 10px;\n  width: 100%;\n  text-align: left;\n  transition: all var(--twd-animation-duration) ease;\n  box-shadow: var(--twd-shadow-sm);\n}\n\n/* ========================\n   Sidebar layout\n   ======================== */\n.twd-sidebar {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: var(--twd-sidebar-width);\n  background: var(--twd-background);\n  font-size: var(--twd-font-size-md);\n  overflow-y: auto;\n  box-shadow: var(--twd-shadow);\n  text-align: left;\n  z-index: var(--twd-z-index-sidebar);\n  pointer-events: all;\n  isolation: isolate;\n}\n.twd-sidebar-header {\n  padding: var(--twd-spacing-md);\n  background: var(--twd-background);\n  position: sticky;\n  top: 0;\n  z-index: var(--twd-z-index-sticky);\n  border-bottom: 1px solid var(--twd-border);\n}\n.twd-sidebar-header-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: var(--twd-spacing-xl);\n}\n.twd-sidebar-header-buttons {\n  display: flex;\n  gap: var(--twd-spacing-xs);\n}\n.twd-sidebar-stats {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: var(--twd-font-size-md);\n  color: var(--twd-text-secondary);\n  margin-bottom: 10px;\n}\n.twd-sidebar-stats-counts {\n  display: flex;\n  gap: var(--twd-spacing-xs);\n}\n.twd-sidebar-content {\n  padding: var(--twd-spacing-md);\n}\n.twd-sidebar-closed {\n  position: fixed;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: var(--twd-z-index-sidebar);\n  background: var(--twd-button-primary);\n  color: var(--twd-button-primary-text);\n  padding: var(--twd-spacing-sm) 10px;\n  font-size: var(--twd-font-size-sm);\n}\n.twd-sidebar-version {\n  color: var(--twd-text-secondary);\n  font-size: var(--twd-font-size-sm);\n  align-self: center;\n}\n\n/* ========================\n   Test list\n   ======================== */\n.twd-test-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.twd-test-group {\n  background: var(--twd-describe-bg);\n  border-left: 3px solid var(--twd-describe-border);\n  border-radius: var(--twd-border-radius);\n  padding: var(--twd-spacing-xs) var(--twd-spacing-sm);\n  margin-bottom: var(--twd-spacing-sm);\n}\n.twd-test-group-toggle {\n  font-weight: var(--twd-font-weight-medium);\n  font-size: var(--twd-font-size-sm);\n  cursor: pointer;\n  color: var(--twd-describe-text);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--twd-spacing-sm);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.twd-test-item {\n  display: flex;\n  align-items: left;\n  justify-content: space-between;\n  padding: var(--twd-spacing-sm) var(--twd-spacing-sm);\n  border-radius: var(--twd-border-radius);\n}\n.twd-test-item-name {\n  font-weight: var(--twd-font-weight-medium);\n  font-size: var(--twd-font-size-md);\n  color: var(--twd-text);\n  max-width: 220px;\n}\n.twd-test-item-logs {\n  border-radius: var(--twd-border-radius);\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 0;\n  background: var(--twd-background-secondary);\n  list-style: none;\n  margin-top: var(--twd-spacing-xs);\n  text-align: left;\n}\n\n/* ========================\n   Status variants\n   ======================== */\n.twd-status-pass  { background: var(--twd-success-bg); }\n.twd-status-fail  { background: var(--twd-error-bg); }\n.twd-status-skip  { background: var(--twd-skip-bg); }\n.twd-status-running { background: var(--twd-warning-bg); }\n\n/* ========================\n   Search\n   ======================== */\n.twd-search-wrapper {\n  position: relative;\n  margin-bottom: var(--twd-spacing-md);\n}\n.twd-search-input {\n  width: 100%;\n  padding: var(--twd-spacing-md);\n  background: var(--twd-background);\n  color: var(--twd-text);\n  border: 1px solid var(--twd-border);\n  border-radius: var(--twd-border-radius);\n  font-size: var(--twd-font-size-md);\n  box-sizing: border-box;\n}\n.twd-search-input:focus-visible {\n  outline: 2px solid var(--twd-primary);\n  outline-offset: 2px;\n}\n\n/* ========================\n   Loader\n   ======================== */\n.twd-loader {\n  animation: twd-spin 1s linear infinite;\n}\n";
+/**
+ * Injects all sidebar CSS classes into the document.
+ * Guards against double-injection (same pattern as injectTheme).
+ * Called once from initSidebar.tsx after injectTheme().
+ */
+export declare function injectStyles(): void;

package/dist/ui/utils/theme.d.ts

@@ -0,0 +1,74 @@
+/**
+ * TWD Theme Configuration
+ *
+ * This file defines CSS variables that can be customized by users
+ * to personalize their TWD UI experience.
+ *
+ * Users can override these variables by setting them in their CSS:
+ *
+ * ```css
+ * :root {
+ *   --twd-primary: #2563eb;
+ *   --twd-background: #1e293b;
+ *    ... other variables
+ * }
+ *
+ */
+export interface TWDTheme {
+    primary: string;
+    background: string;
+    backgroundSecondary: string;
+    border: string;
+    borderLight: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    describeBg: string;
+    describeText: string;
+    describeBorder: string;
+    success: string;
+    successBg: string;
+    error: string;
+    errorBg: string;
+    warning: string;
+    warningBg: string;
+    skip: string;
+    skipBg: string;
+    buttonPrimary: string;
+    buttonPrimaryText: string;
+    buttonSecondary: string;
+    buttonSecondaryText: string;
+    buttonBorder: string;
+    spacingXs: string;
+    spacingSm: string;
+    spacingMd: string;
+    spacingLg: string;
+    spacingXl: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontWeightNormal: string;
+    fontWeightMedium: string;
+    fontWeightBold: string;
+    sidebarWidth: string;
+    borderRadius: string;
+    borderRadiusLg: string;
+    shadow: string;
+    shadowSm: string;
+    zIndexSidebar: string;
+    zIndexSticky: string;
+    animationDuration: string;
+    iconColor: string;
+    iconColorSecondary: string;
+}
+export declare const defaultTheme: TWDTheme;
+/**
+ * Converts theme object to CSS variables string
+ */
+export declare function themeToCSSVariables(theme?: Partial<TWDTheme>): string;
+/**
+ * Injects theme CSS variables into the document
+ * This should be called once when the sidebar is initialized
+ */
+export declare function injectTheme(theme?: Partial<TWDTheme>): void;

package/dist/ui.d.ts

@@ -1,10 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-export declare function MockedComponent<TProps extends Record<string, any>>({ name, children, }: MockedComponentProps<TProps>): JSX.Element;
-
-declare interface MockedComponentProps<TProps = any> {
-    name: string;
-    children: React.ReactElement<TProps>;
-}
-
-export { }
+export * from './ui/index'
+export {}

package/dist/utils/assertionMessage.d.ts

@@ -0,0 +1 @@
+export declare const assertionMessage: (valid: boolean, isNegated: boolean, correctMessage: string, errorMessage: string) => string;

package/dist/utils/log.d.ts

@@ -0,0 +1 @@
+export declare const log: (msg: string) => void;

package/dist/utils/wait.d.ts

@@ -0,0 +1,3 @@
+export declare const waitForElement: (selector: string, fn: () => HTMLElement | null, timeout?: number, interval?: number) => Promise<HTMLElement>;
+export declare const waitForElements: (selector: string, fn: () => NodeListOf<Element> | null, timeout?: number, interval?: number) => Promise<Element[]>;
+export declare const wait: (time: number) => Promise<void>;

package/dist/utils/waitFor.d.ts

@@ -0,0 +1,2 @@
+import { WaitForOptions } from '../twd-types';
+export declare const waitFor: <T>(callback: () => T | Promise<T>, options?: WaitForOptions) => Promise<T>;