@anweat/dsh-browser 0.2.1 → 0.2.2

package/lib/client/property-docs.js

@@ -0,0 +1,78 @@
+/**
+ * The comments printed in front of every key of the default-parameters text (the "Advanced: text mode" view), in the
+ * language of the card: what the setting is for, its allowed values or range, its default, and the risk when there is
+ * one. Comment lines start with `#`, which the parser ignores, so they are never data and a round trip keeps every key.
+ * Pure, with no DOM: `properties-form.ts` prints with these, the tests read them.
+ * @module dsh-browser/client/property-docs
+ */
+const EN = {
+    header: [
+        'Default parameters: what every new browser context starts from. An agent copies these for a task and changes only what the task needs.',
+        '`key = value` overrides the default. A line starting with # is a comment and is ignored when you save; the comment above each key explains it.',
+        'A commented `# key = value` line shows the value in force now. Delete or comment a line to go back to the default.',
+    ],
+    group: { runtime: 'Browser runtime', context: 'Page environment (window, language, egress)', files: 'Login state, files and limits' },
+    key: {
+        browserRuntime: 'Driver: playwright | patchright (Chromium only, better against bot checks). Default: playwright',
+        channel: 'Browser: chromium (Playwright Chromium; the installed Chrome / Edge is used when it is missing) | chrome | msedge (always that installed browser). Patchright works best with chrome. Default: chromium',
+        headless: 'true = no browser window | false = show it. Default: true',
+        autoInstall: 'true = download Playwright Chromium when it is missing (about 190 MB download; the system Chrome is then not used instead) | false. Keep false: an installed Chrome / Edge is used directly, else use the runtime.install action. Default: false',
+        executablePath: 'Absolute path of a custom browser; empty = Playwright Chromium, or the system Chrome / Edge when it is missing. Default: empty',
+        cdpPort: 'Local remote-debugging (CDP) port, 1-65535; empty = off. Risk: other programs on this machine can then control the browser. Default: empty',
+        maxSessions: 'Sessions that may hold a page at once, 1-64; past it the least recently used one is closed. Default: 8',
+        args: 'Extra Chromium launch arguments as one JSON array line, e.g. ["--disable-gpu"]. Add only arguments you understand. Default: [] (none)',
+        viewportMode: 'Viewport: window = browser default | 720p (1280x720) | 1080p (1920x1080) | custom (needs width and height). Default: window',
+        viewportWidth: 'Custom viewport width in pixels, 200-7680; used only with viewportMode = custom. Default: empty',
+        viewportHeight: 'Custom viewport height in pixels, 200-4320; used only with viewportMode = custom. Default: empty',
+        userAgent: 'User-Agent header, up to 512 characters. Risk: changes the browser fingerprint sites see. Empty = the browser\'s own. Default: empty',
+        locale: 'Language tag (BCP 47) such as en-US or zh-CN; empty = the browser\'s own. Default: empty',
+        timezoneId: 'IANA time zone such as Asia/Shanghai; empty = this machine\'s. Default: empty',
+        proxyServer: 'Proxy such as http://127.0.0.1:7890 or socks5://127.0.0.1:1080. No accounts or passwords: never put credentials here. Empty = direct. Default: empty',
+        proxyBypass: 'Hosts that skip the proxy, comma-separated, e.g. example.com,.internal.test; needs proxyServer. Default: empty',
+        storageStatePath: 'Global login-state file (legacy: applies to every site, no domain limit). Use login profiles instead. Default: empty',
+        defaultAuthProfile: 'Name of the login profile used when none is named; it must exist. crawl is always anonymous. Default: empty',
+        allowPrivateHosts: 'true = an agent policy action may allow localhost and LAN addresses in a login profile | false. Risk: widens what an agent can authorize. Default: false',
+        snapshotDir: 'Absolute directory for screenshots; empty = $DSH_HOME/data/browser/snapshots. Default: empty',
+        downloadDir: 'Absolute directory downloads are saved to; empty = $DSH_HOME/data/browser/downloads. Default: empty',
+        downloadMaxBytes: 'Largest single download in bytes, 1 to 10737418240 (10 GiB); a bigger one is stopped and removed. Default: 104857600 (100 MiB)',
+        verbose: 'true = print startup and diagnostic details | false. Default: false',
+    },
+};
+const ZH = {
+    header: [
+        '默认参数：每个新 browser context 的起点；agent 按任务复制它们，只改任务需要改的部分。',
+        '`key = value` 表示覆盖默认值；以 # 开头的行是注释，保存时忽略；每个键上面的注释说明它的用途。',
+        '被注释的 `# key = 值` 行显示当前生效的值；删掉或注释一行即恢复默认。',
+    ],
+    group: { runtime: '浏览器运行时', context: '页面环境（窗口、语言、出口）', files: '登录态、文件与限额' },
+    key: {
+        browserRuntime: '驱动：playwright | patchright（仅 Chromium，对反爬检测更友好）。默认 playwright',
+        channel: '浏览器：chromium（Playwright 的 Chromium，缺失时自动改用本机 Chrome / Edge）| chrome | msedge（固定用本机已装的那个）。Patchright 推荐 chrome。默认 chromium',
+        headless: 'true = 不显示浏览器窗口 | false = 显示。默认 true',
+        autoInstall: 'true = 缺失时自动下载 Playwright Chromium（下载约 190 MB，且不再改用系统 Chrome）| false。建议保持 false：装了 Chrome / Edge 就直接用，没有再用 runtime.install 动作。默认 false',
+        executablePath: '自定义浏览器的绝对路径；留空 = Playwright Chromium，缺失时用系统 Chrome / Edge。默认 空',
+        cdpPort: '本机远程调试（CDP）端口，1–65535；留空 = 关闭。风险：同机其它程序可借此控制浏览器。默认 空',
+        maxSessions: '同时持有页面的会话数，1–64；超出时关闭最久未使用的。默认 8',
+        args: '追加的 Chromium 启动参数，写成一行 JSON 数组，如 ["--disable-gpu"]；只加你理解的参数。默认 []（无）',
+        viewportMode: '视口：window = 浏览器默认 | 720p（1280x720）| 1080p（1920x1080）| custom（需同时填宽高）。默认 window',
+        viewportWidth: '自定义视口宽度（像素），200–7680；仅 viewportMode = custom 时生效。默认 空',
+        viewportHeight: '自定义视口高度（像素），200–4320；仅 viewportMode = custom 时生效。默认 空',
+        userAgent: 'User-Agent 头，至多 512 字符。风险：会改变站点看到的浏览器指纹；留空 = 浏览器自带。默认 空',
+        locale: '语言标签（BCP 47），如 en-US、zh-CN；留空 = 浏览器自带。默认 空',
+        timezoneId: 'IANA 时区，如 Asia/Shanghai；留空 = 本机时区。默认 空',
+        proxyServer: '代理，如 http://127.0.0.1:7890 或 socks5://127.0.0.1:1080。不支持账号密码，切勿把凭据写在这里；留空 = 直连。默认 空',
+        proxyBypass: '不走代理的主机，逗号分隔，如 example.com,.internal.test；需先设 proxyServer。默认 空',
+        storageStatePath: '全局登录态文件（旧版入口：对所有站点生效，没有域名限制）；请改用登录 profile。默认 空',
+        defaultAuthProfile: '未指定时使用的登录 profile 名，必须已存在；crawl 始终匿名。默认 空',
+        allowPrivateHosts: 'true = agent 的策略动作可把 localhost 与内网地址加入登录 profile | false。风险：扩大 agent 可授权的范围。默认 false',
+        snapshotDir: '截图目录的绝对路径；留空 = $DSH_HOME/data/browser/snapshots。默认 空',
+        downloadDir: '下载目录的绝对路径；留空 = $DSH_HOME/data/browser/downloads。默认 空',
+        downloadMaxBytes: '单个下载的字节上限，1 到 10737418240（10 GiB）；超出会中止并删除。默认 104857600（100 MiB）',
+        verbose: 'true = 输出启动与诊断信息 | false。默认 false',
+    },
+};
+/** The docs of a language; anything but `zh` is English. */
+export function propertyDocs(lang = 'en') {
+    return lang === 'zh' ? ZH : EN;
+}
+//# sourceMappingURL=property-docs.js.map

package/lib/client/property-docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-docs.js","sourceRoot":"","sources":["../../src/client/property-docs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAaH,MAAM,EAAE,GAAiB;IACvB,MAAM,EAAE;QACN,wIAAwI;QACxI,gJAAgJ;QAChJ,oHAAoH;KACrH;IACD,KAAK,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,6CAA6C,EAAE,KAAK,EAAE,+BAA+B,EAAE;IACrI,GAAG,EAAE;QACH,cAAc,EAAE,iGAAiG;QACjH,OAAO,EAAE,yMAAyM;QAClN,QAAQ,EAAE,2DAA2D;QACrE,WAAW,EAAE,kPAAkP;QAC/P,cAAc,EAAE,gIAAgI;QAChJ,OAAO,EAAE,4IAA4I;QACrJ,WAAW,EAAE,wGAAwG;QACrH,IAAI,EAAE,uIAAuI;QAC7I,YAAY,EAAE,6HAA6H;QAC3I,aAAa,EAAE,iGAAiG;QAChH,cAAc,EAAE,kGAAkG;QAClH,SAAS,EAAE,sIAAsI;QACjJ,MAAM,EAAE,0FAA0F;QAClG,UAAU,EAAE,+EAA+E;QAC3F,WAAW,EAAE,sJAAsJ;QACnK,WAAW,EAAE,gHAAgH;QAC7H,gBAAgB,EAAE,sHAAsH;QACxI,kBAAkB,EAAE,6GAA6G;QACjI,iBAAiB,EAAE,0JAA0J;QAC7K,WAAW,EAAE,8FAA8F;QAC3G,WAAW,EAAE,qGAAqG;QAClH,gBAAgB,EAAE,gIAAgI;QAClJ,OAAO,EAAE,qEAAqE;KAC/E;CACF,CAAA;AAED,MAAM,EAAE,GAAiB;IACvB,MAAM,EAAE;QACN,wDAAwD;QACxD,yDAAyD;QACzD,0CAA0C;KAC3C;IACD,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE;IAC3E,GAAG,EAAE;QACH,cAAc,EAAE,+DAA+D;QAC/E,OAAO,EAAE,2HAA2H;QACpI,QAAQ,EAAE,sCAAsC;QAChD,WAAW,EAAE,wIAAwI;QACrJ,cAAc,EAAE,gEAAgE;QAChF,OAAO,EAAE,sDAAsD;QAC/D,WAAW,EAAE,kCAAkC;QAC/C,IAAI,EAAE,sEAAsE;QAC5E,YAAY,EAAE,gFAAgF;QAC9F,aAAa,EAAE,uDAAuD;QACtE,cAAc,EAAE,uDAAuD;QACvE,SAAS,EAAE,yDAAyD;QACpE,MAAM,EAAE,4CAA4C;QACpD,UAAU,EAAE,wCAAwC;QACpD,WAAW,EAAE,qFAAqF;QAClG,WAAW,EAAE,gEAAgE;QAC7E,gBAAgB,EAAE,iDAAiD;QACnE,kBAAkB,EAAE,2CAA2C;QAC/D,iBAAiB,EAAE,sFAAsF;QACzG,WAAW,EAAE,sDAAsD;QACnE,WAAW,EAAE,sDAAsD;QACnE,gBAAgB,EAAE,kEAAkE;QACpF,OAAO,EAAE,mCAAmC;KAC7C;CACF,CAAA;AAED,4DAA4D;AAC5D,MAAM,UAAU,YAAY,CAAC,OAAyB,IAAI;IACxD,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;AAChC,CAAC"}

package/lib/client/size-units.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Byte counts as a number in a unit, for the download size control. The setting itself stays a plain byte count.
+ * @module dsh-browser/client/size-units
+ */
+export declare const SIZE_UNITS: readonly [readonly ["B", 1], readonly ["KiB", 1024], readonly ["MiB", number], readonly ["GiB", number]];
+export type SizeUnit = typeof SIZE_UNITS[number][0];
+/** The unit a byte count is shown in: the largest that divides it exactly (MiB when there is no count). */
+export declare function unitFor(bytes: number | undefined): SizeUnit;
+/** A byte count as the text of one unit, without a trailing ".0". */
+export declare function bytesToUnitText(bytes: number, unit: SizeUnit): string;
+/** The bytes a number typed in a unit stands for: '' for an empty text ("unset"), undefined when it is not a positive number. */
+export declare function unitTextToBytes(text: string, unit: SizeUnit): number | '' | undefined;

package/lib/client/size-units.js

@@ -0,0 +1,29 @@
+/**
+ * Byte counts as a number in a unit, for the download size control. The setting itself stays a plain byte count.
+ * @module dsh-browser/client/size-units
+ */
+export const SIZE_UNITS = [['B', 1], ['KiB', 1024], ['MiB', 1024 ** 2], ['GiB', 1024 ** 3]];
+const factor = (unit) => SIZE_UNITS.find(([name]) => name === unit)[1];
+/** The unit a byte count is shown in: the largest that divides it exactly (MiB when there is no count). */
+export function unitFor(bytes) {
+    if (bytes === undefined || !Number.isFinite(bytes) || bytes <= 0)
+        return 'MiB';
+    for (const [name, size] of [...SIZE_UNITS].reverse())
+        if (bytes % size === 0)
+            return name;
+    return 'B';
+}
+/** A byte count as the text of one unit, without a trailing ".0". */
+export function bytesToUnitText(bytes, unit) {
+    return String(bytes / factor(unit));
+}
+/** The bytes a number typed in a unit stands for: '' for an empty text ("unset"), undefined when it is not a positive number. */
+export function unitTextToBytes(text, unit) {
+    if (text.trim() === '')
+        return '';
+    const value = Number(text);
+    if (!Number.isFinite(value) || value <= 0)
+        return undefined;
+    return Math.round(value * factor(unit));
+}
+//# sourceMappingURL=size-units.js.map

package/lib/client/size-units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-units.js","sourceRoot":"","sources":["../../src/client/size-units.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,CAAC,CAAU,CAAA;AAGpG,MAAM,MAAM,GAAG,CAAC,IAAc,EAAU,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAE,CAAC,CAAC,CAAC,CAAA;AAEzF,2GAA2G;AAC3G,MAAM,UAAU,OAAO,CAAC,KAAyB;IAC/C,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,KAAK,CAAA;IAC9E,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,OAAO,EAAE;QAAE,IAAI,KAAK,GAAG,IAAI,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;IACzF,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,eAAe,CAAC,KAAa,EAAE,IAAc;IAC3D,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;AACrC,CAAC;AAED,iIAAiI;AACjI,MAAM,UAAU,eAAe,CAAC,IAAY,EAAE,IAAc;IAC1D,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;QAAE,OAAO,EAAE,CAAA;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,SAAS,CAAA;IAC3D,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;AACzC,CAAC"}

package/lib/client/styles.d.ts

@@ -1,48 +1,64 @@
 export declare const styles: {
-    readonly card: "dsb-card";
-    readonly open: "dsb-open";
-    readonly header: "dsb-header";
-    readonly head: "dsb-head";
-    readonly titleRow: "dsb-title-row";
-    readonly name: "dsb-name";
-    readonly description: "dsb-description";
-    readonly badge: "dsb-badge";
-    readonly chevron: "dsb-chevron";
-    readonly chevronOpen: "dsb-chevron-open";
-    readonly body: "dsb-body";
     readonly notice: "dsb-notice";
-    readonly section: "dsb-section";
-    readonly sectionHead: "dsb-section-head";
-    readonly grid: "dsb-grid";
     readonly field: "dsb-field";
-    readonly invalid: "dsb-invalid";
     readonly fieldHead: "dsb-field-head";
     readonly label: "dsb-label";
     readonly hint: "dsb-hint";
     readonly input: "dsb-input";
     readonly textarea: "dsb-textarea";
     readonly code: "dsb-code";
-    readonly reset: "dsb-reset";
-    readonly toggle: "dsb-toggle";
-    readonly toggleLabel: "dsb-toggle-label";
-    readonly check: "dsb-check";
-    readonly advanced: "dsb-advanced";
-    readonly footer: "dsb-footer";
-    readonly status: "dsb-status";
     readonly failed: "dsb-failed";
     readonly actions: "dsb-actions";
-    readonly primary: "dsb-primary";
-    readonly secondary: "dsb-secondary";
-    readonly assetGroup: "dsb-asset-group";
-    readonly assetRow: "dsb-asset-row";
+    readonly root: "dsb-root";
+    readonly summaryBar: "dsb-summary";
+    readonly chips: "dsb-chips";
+    readonly chip: "dsb-chip";
+    readonly chipRemove: "dsb-chip-remove";
+    readonly chipInput: "dsb-chip-input";
+    readonly group: "dsb-group";
+    readonly groupHead: "dsb-group-head";
+    readonly groupTitle: "dsb-group-title";
+    readonly groupSub: "dsb-group-sub";
+    readonly groupBadges: "dsb-group-badges";
+    readonly groupBody: "dsb-group-body";
+    readonly row: "dsb-row";
+    readonly rowText: "dsb-row-text";
+    readonly rowLabel: "dsb-row-label";
+    readonly rowControl: "dsb-row-control";
+    readonly rowHint: "dsb-row-hint";
+    readonly rowMeta: "dsb-row-meta";
+    readonly muted: "dsb-muted";
+    readonly select: "dsb-select";
+    readonly unitInput: "dsb-unit-input";
+    readonly unit: "dsb-unit";
+    readonly help: "dsb-help";
+    readonly link: "dsb-link";
+    readonly danger: "dsb-danger";
+    readonly list: "dsb-list";
+    readonly item: "dsb-item";
+    readonly itemMain: "dsb-item-main";
+    readonly itemTitle: "dsb-item-title";
+    readonly itemMeta: "dsb-item-meta";
+    readonly itemActions: "dsb-item-actions";
+    readonly empty: "dsb-empty";
+    readonly subHead: "dsb-sub-head";
+    readonly compare: "dsb-compare";
+    readonly compareCol: "dsb-compare-col";
+    readonly preview: "dsb-preview";
+    readonly savebar: "dsb-savebar";
+    readonly saveText: "dsb-save-text";
+    readonly dialogBody: "dsb-dialog-body";
+    readonly stack: "dsb-stack";
+    readonly fold: "dsb-fold";
+    readonly foldBody: "dsb-fold-body";
+    readonly foldHint: "dsb-fold-hint";
     readonly assetToolbar: "dsb-asset-toolbar";
-    readonly assetLayout: "dsb-asset-layout";
-    readonly assetList: "dsb-asset-list";
-    readonly assetItem: "dsb-asset-item";
-    readonly assetSelected: "dsb-asset-selected";
-    readonly assetTest: "dsb-asset-test";
     readonly assetTestForm: "dsb-asset-test-form";
     readonly assetEditor: "dsb-asset-editor";
     readonly invalidInput: "dsb-invalid-input";
 };
+/**
+ * Inject the card's stylesheet, or refresh it in place. A Host that hot-reloads the plugin keeps the page (and the
+ * `<style>` an older version injected), so an existing element gets the current CSS instead of being kept as is.
+ */
 export declare function ensureStyles(): void;

package/lib/client/styles.js

@@ -1,28 +1,67 @@
 export const styles = {
-    card: 'dsb-card', open: 'dsb-open', header: 'dsb-header', head: 'dsb-head', titleRow: 'dsb-title-row', name: 'dsb-name', description: 'dsb-description', badge: 'dsb-badge',
-    chevron: 'dsb-chevron', chevronOpen: 'dsb-chevron-open', body: 'dsb-body', notice: 'dsb-notice', section: 'dsb-section', sectionHead: 'dsb-section-head', grid: 'dsb-grid',
-    field: 'dsb-field', invalid: 'dsb-invalid', fieldHead: 'dsb-field-head', label: 'dsb-label', hint: 'dsb-hint', input: 'dsb-input', textarea: 'dsb-textarea', code: 'dsb-code', reset: 'dsb-reset',
-    toggle: 'dsb-toggle', toggleLabel: 'dsb-toggle-label', check: 'dsb-check', advanced: 'dsb-advanced', footer: 'dsb-footer', status: 'dsb-status', failed: 'dsb-failed', actions: 'dsb-actions', primary: 'dsb-primary', secondary: 'dsb-secondary',
-    assetGroup: 'dsb-asset-group', assetRow: 'dsb-asset-row', assetToolbar: 'dsb-asset-toolbar', assetLayout: 'dsb-asset-layout', assetList: 'dsb-asset-list', assetItem: 'dsb-asset-item', assetSelected: 'dsb-asset-selected', assetTest: 'dsb-asset-test', assetTestForm: 'dsb-asset-test-form', assetEditor: 'dsb-asset-editor', invalidInput: 'dsb-invalid-input',
+    notice: 'dsb-notice', field: 'dsb-field', fieldHead: 'dsb-field-head', label: 'dsb-label', hint: 'dsb-hint', input: 'dsb-input',
+    textarea: 'dsb-textarea', code: 'dsb-code', failed: 'dsb-failed', actions: 'dsb-actions', root: 'dsb-root', summaryBar: 'dsb-summary',
+    chips: 'dsb-chips', chip: 'dsb-chip', chipRemove: 'dsb-chip-remove', chipInput: 'dsb-chip-input', group: 'dsb-group', groupHead: 'dsb-group-head',
+    groupTitle: 'dsb-group-title', groupSub: 'dsb-group-sub', groupBadges: 'dsb-group-badges', groupBody: 'dsb-group-body', row: 'dsb-row', rowText: 'dsb-row-text',
+    rowLabel: 'dsb-row-label', rowControl: 'dsb-row-control', rowHint: 'dsb-row-hint', rowMeta: 'dsb-row-meta', muted: 'dsb-muted', select: 'dsb-select',
+    unitInput: 'dsb-unit-input', unit: 'dsb-unit', help: 'dsb-help', link: 'dsb-link', danger: 'dsb-danger', list: 'dsb-list',
+    item: 'dsb-item', itemMain: 'dsb-item-main', itemTitle: 'dsb-item-title', itemMeta: 'dsb-item-meta', itemActions: 'dsb-item-actions', empty: 'dsb-empty',
+    subHead: 'dsb-sub-head', compare: 'dsb-compare', compareCol: 'dsb-compare-col', preview: 'dsb-preview', savebar: 'dsb-savebar', saveText: 'dsb-save-text',
+    dialogBody: 'dsb-dialog-body', stack: 'dsb-stack', fold: 'dsb-fold', foldBody: 'dsb-fold-body', foldHint: 'dsb-fold-hint', assetToolbar: 'dsb-asset-toolbar',
+    assetTestForm: 'dsb-asset-test-form', assetEditor: 'dsb-asset-editor', invalidInput: 'dsb-invalid-input',
 };
+/**
+ * Inject the card's stylesheet, or refresh it in place. A Host that hot-reloads the plugin keeps the page (and the
+ * `<style>` an older version injected), so an existing element gets the current CSS instead of being kept as is.
+ */
 export function ensureStyles() {
-    if (document.getElementById('dsh-browser-settings-styles'))
-        return;
-    const style = document.createElement('style');
+    const existing = document.getElementById('dsh-browser-settings-styles');
+    const style = existing ?? document.createElement('style');
     style.id = 'dsh-browser-settings-styles';
-    style.textContent = `
-.dsb-card{list-style:none;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3);transition:border-color .16s,background .16s}.dsb-card:hover{border-color:var(--dsw-alias-label-dimmed)}.dsb-open{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.dsb-header{width:100%;appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px}.dsb-header:focus-visible,.dsb-input:focus-visible,.dsb-reset:focus-visible,.dsb-primary:focus-visible,.dsb-secondary:focus-visible,.dsb-check:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
-.dsb-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.dsb-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dsb-name{font-size:15px;font-weight:600;color:var(--dsw-alias-label-primary)}.dsb-description,.dsb-hint,.dsb-section-head p{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary);margin:0}.dsb-badge{font-size:11px;padding:2px 7px;border-radius:9px;color:var(--dsw-alias-brand-primary);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
-.dsb-chevron{flex:none;color:var(--dsw-alias-label-tertiary);transition:transform .16s}.dsb-chevron-open{transform:rotate(180deg)}.dsb-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding:4px 0 8px}.dsb-notice{margin:12px 0 0;padding:9px 11px;border-radius:8px;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-layer-3)}
-.dsb-section{padding:18px 0}.dsb-section+.dsb-section{border-top:1px solid var(--dsw-alias-border-l2)}.dsb-section-head{margin-bottom:14px}.dsb-section-head h3{margin:0;font-size:14px;color:var(--dsw-alias-label-primary)}.dsb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px}.dsb-field{display:flex;min-width:0;flex-direction:column;gap:6px}.dsb-field-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.dsb-label{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
-.dsb-input{box-sizing:border-box;width:100%;min-width:0;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);font:inherit;font-size:13px;color:var(--dsw-alias-label-primary)}.dsb-input:focus-visible{outline:none;border-color:var(--dsw-alias-brand-primary)}.dsb-input:disabled{opacity:.55}.dsb-invalid .dsb-input{border-color:var(--dsw-alias-label-error)}.dsb-textarea{height:auto;padding:9px 10px;resize:vertical;line-height:1.45}.dsb-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.dsb-reset{appearance:none;border:0;background:none;padding:0;color:var(--dsw-alias-brand-primary);font:inherit;font-size:11px;cursor:pointer}
-.dsb-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-top:2px}.dsb-toggle-label{display:flex;align-items:flex-start;gap:9px;cursor:pointer}.dsb-check{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--dsw-alias-brand-primary)}.dsb-advanced{padding:16px 0;border-top:1px solid var(--dsw-alias-border-l2)}.dsb-advanced>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}
-.dsb-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 4px;border-top:1px solid var(--dsw-alias-border-l2)}.dsb-status,.dsb-failed{margin:0;font-size:12px}.dsb-status{color:var(--dsw-alias-label-tertiary)}.dsb-failed{color:var(--dsw-alias-label-error)}.dsb-actions{display:flex;gap:8px}.dsb-primary,.dsb-secondary{appearance:none;border-radius:8px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}.dsb-primary{border:1px solid transparent;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}.dsb-secondary{border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary)}.dsb-primary:disabled,.dsb-secondary:disabled,.dsb-reset:disabled{opacity:.4;cursor:default}
-.dsb-asset-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.dsb-asset-group h4{margin:0;font-size:13px}.dsb-asset-row,.dsb-asset-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--dsw-alias-border-l2);border-radius:9px}.dsb-asset-row p,.dsb-asset-toolbar p{margin:3px 0 0;font-size:11px;color:var(--dsw-alias-label-tertiary)}.dsb-asset-toolbar{margin-bottom:10px;border:0;padding:0}.dsb-asset-layout{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:12px}.dsb-asset-list{display:flex;flex-direction:column;gap:6px;max-height:500px;overflow:auto}.dsb-asset-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);text-align:left;cursor:pointer}.dsb-asset-item span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}.dsb-asset-item small,.dsb-asset-test{font-size:10px;color:var(--dsw-alias-label-tertiary)}.dsb-asset-selected{border-color:var(--dsw-alias-brand-primary);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 8%,var(--dsw-alias-bg-layer-3))}.dsb-asset-editor{display:flex;min-width:0;flex-direction:column;gap:8px}.dsb-asset-editor .dsb-actions{justify-content:flex-end;flex-wrap:wrap}.dsb-invalid-input{border-color:var(--dsw-alias-label-error)}
+    const css = `
+.dsb-notice{margin:0;padding:9px 11px;border-radius:8px;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-bg-layer-3)}.dsb-hint{font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary);margin:0}
+.dsb-field{display:flex;min-width:0;flex-direction:column;gap:6px}.dsb-field-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.dsb-label{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.dsb-input{box-sizing:border-box;width:100%;min-width:0;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);font:inherit;font-size:13px;color:var(--dsw-alias-label-primary)}.dsb-input:focus-visible{outline:none;border-color:var(--dsw-alias-state-business-primary)}.dsb-input:disabled{opacity:.55}.dsb-textarea{height:auto;padding:9px 10px;resize:vertical;line-height:1.45}.dsb-code{font-family:var(--ds-font-family-code);font-size:12px}
+.dsb-failed{margin:0;font-size:12px;color:var(--dsw-alias-state-error-primary)}.dsb-actions{display:flex;flex-wrap:wrap;gap:8px}.dsb-invalid-input{border-color:var(--dsw-alias-state-error-primary)}
+.dsb-asset-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.dsb-asset-toolbar p{margin:3px 0 0;font-size:11px;color:var(--dsw-alias-label-tertiary)}.dsb-asset-editor{display:flex;min-width:0;flex-direction:column;gap:8px}.dsb-asset-editor .dsb-actions{justify-content:flex-end}
 .dsb-asset-test-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.dsb-asset-test-form .dsb-textarea{min-height:64px}
-@media(max-width:720px){.dsb-grid,.dsb-asset-layout{grid-template-columns:minmax(0,1fr)}.dsb-footer,.dsb-asset-row,.dsb-asset-toolbar{align-items:stretch;flex-direction:column}.dsb-actions{justify-content:flex-end}}@media(max-width:420px){.dsb-body{margin:0 12px}.dsb-actions{display:grid;grid-template-columns:1fr 1fr}.dsb-primary,.dsb-secondary{width:100%}}
+@media(max-width:560px){.dsb-asset-test-form{grid-template-columns:minmax(0,1fr)}.dsb-asset-toolbar{align-items:stretch;flex-direction:column}}
+.dsb-root{container-type:inline-size;display:flex;flex-direction:column;gap:12px;min-width:0}
+.dsb-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3)}.dsb-summary>strong{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary);margin-right:2px}
+.dsb-link{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;font-size:12px;color:var(--dsw-alias-state-business-primary);cursor:pointer;text-decoration:none}.dsb-link:hover{text-decoration:underline}.dsb-link:disabled{opacity:.4;cursor:default;text-decoration:none}.dsb-danger{color:var(--dsw-alias-state-error-primary)}
+.dsb-group{border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3);min-width:0}.dsb-group[open]{background:var(--dsw-alias-bg-layer-2)}
+.dsb-group-head{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-radius:12px;min-width:0}.dsb-group-head::-webkit-details-marker{display:none}.dsb-group-head::marker{content:''}
+.dsb-group-head::after{content:'';flex:none;width:7px;height:7px;margin:0 4px 2px 2px;border-right:1.5px solid var(--dsw-alias-label-tertiary);border-bottom:1.5px solid var(--dsw-alias-label-tertiary);transform:rotate(45deg);transition:transform .16s}.dsb-group[open]>.dsb-group-head::after{transform:rotate(-135deg);margin-bottom:-2px}
+.dsb-group-head:hover{background:var(--dsw-alias-interactive-bg-hover)}.dsb-group-head:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
+.dsb-group-title{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.dsb-group-title strong{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}.dsb-group-sub{font-size:12px;line-height:1.4;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsb-group-badges{display:flex;flex:none;align-items:center;gap:6px}.dsb-group-body{padding:2px 14px 14px;border-top:1px solid var(--dsw-alias-border-l2);display:flex;flex-direction:column}
+.dsb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:6px 16px;align-items:start;padding:12px 0}.dsb-row+.dsb-row,.dsb-row+.dsb-sub-head,.dsb-sub-head+.dsb-row{border-top:1px solid var(--dsw-alias-border-l1)}
+.dsb-row-text{display:flex;flex-direction:column;gap:3px;min-width:0}.dsb-row-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.dsb-row-label label,.dsb-row-label>span:first-child{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.dsb-row-hint{margin:0;font-size:12px;line-height:1.45;color:var(--dsw-alias-label-tertiary)}.dsb-row-hint.dsb-bad,.dsb-bad{color:var(--dsw-alias-state-error-primary)}.dsb-row-control{display:flex;flex-direction:column;gap:6px;min-width:0}.dsb-row-control.dsb-inline{flex-direction:row;align-items:center;justify-content:flex-end}.dsb-row-wide{grid-template-columns:minmax(0,1fr)}
+.dsb-row-meta{font-size:11px;color:var(--dsw-alias-label-tertiary);opacity:.85}.dsb-muted{color:var(--dsw-alias-label-tertiary)}.dsb-sub-head{margin:14px 0 2px;padding-top:2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dsw-alias-label-tertiary)}.dsb-sub-head:first-child{margin-top:8px}
+.dsb-select{box-sizing:border-box;width:100%;min-width:0;height:34px;padding:0 28px 0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background-color:var(--dsw-alias-bg-layer-3);font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dsw-alias-label-tertiary) 50%),linear-gradient(135deg,var(--dsw-alias-label-tertiary) 50%,transparent 50%);background-position:calc(100% - 15px) 14px,calc(100% - 10px) 14px;background-size:5px 5px;background-repeat:no-repeat}
+.dsb-select:focus-visible{outline:none;border-color:var(--dsw-alias-state-business-primary)}.dsb-select:disabled{opacity:.55;cursor:default}.dsb-select.dsb-muted,.dsb-input.dsb-muted{color:var(--dsw-alias-label-tertiary)}.dsb-select option{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
+.dsb-input:focus-visible{border-color:var(--dsw-alias-state-business-primary)}.dsb-unit-input{display:flex;align-items:center;gap:6px;min-width:0}.dsb-unit-input .dsb-input{flex:none;width:120px}.dsb-input.dsb-num{max-width:160px}.dsb-unit-input .dsb-select{flex:none;width:auto;min-width:72px}.dsb-unit{flex:none;font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.dsb-help{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:1px solid var(--dsw-alias-border-l3);border-radius:50%;background:transparent;font:inherit;font-size:10px;line-height:1;color:var(--dsw-alias-label-tertiary);cursor:pointer}.dsb-help:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-tertiary)}.dsb-help:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:1px}
+.dsb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);min-width:0}.dsb-chips:focus-within{border-color:var(--dsw-alias-state-business-primary)}
+.dsb-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 8px;border-radius:999px;background:var(--dsw-alias-interactive-bg-hover);font-size:12px;color:var(--dsw-alias-label-primary)}.dsb-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsb-chip-remove{appearance:none;border:0;background:none;padding:0 4px;font:inherit;font-size:13px;line-height:1;color:var(--dsw-alias-label-tertiary);cursor:pointer;border-radius:50%}.dsb-chip-remove:hover{color:var(--dsw-alias-state-error-primary)}.dsb-chip-remove:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary)}
+.dsb-chip-input{flex:1;min-width:120px;height:24px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary)}.dsb-chip-input:focus{outline:none}
+.dsb-list{display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;overflow:hidden;background:var(--dsw-alias-bg-layer-3)}.dsb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;min-width:0}.dsb-item+.dsb-item{border-top:1px solid var(--dsw-alias-border-l1)}
+.dsb-item-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.dsb-item-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--dsw-alias-label-primary)}.dsb-item-title code{font-family:var(--ds-font-family-code);font-size:12px}.dsb-item-meta{font-size:11px;line-height:1.4;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsb-item-actions{display:flex;flex:none;align-items:center;gap:6px}.dsb-empty{margin:0;padding:12px;font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.dsb-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.dsb-compare-col{display:flex;flex-direction:column;gap:6px;min-width:0}.dsb-compare-col>label,.dsb-compare-col>strong{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary)}
+.dsb-preview{margin:0;padding:9px 10px;max-height:280px;overflow:auto;border:1px dashed var(--dsw-alias-border-l3);border-radius:8px;background:var(--dsw-alias-bg-layer-1);font-family:var(--ds-font-family-code);font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary);white-space:pre-wrap;word-break:break-word}
+.dsb-dialog-body{display:flex;flex-direction:column;gap:14px;min-width:0}.dsb-dialog-body .dsb-row{padding:8px 0}.dsb-stack{display:flex;flex-direction:column;gap:8px}
+div.dsb-modal{width:min(560px,100%);max-height:100%}div.dsb-modal-wide{width:min(980px,100%)}.dsb-modal-content{min-height:0;overflow:auto}div.dsb-modal{gap:16px}
+.dsb-savebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l3);border-radius:12px;background:var(--dsw-alias-bg-layer-2)}.dsb-savebar[data-dsb-floating]{position:sticky;bottom:0;z-index:2;box-shadow:0 -6px 16px -8px rgba(0,0,0,.35)}.dsb-save-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;color:var(--dsw-alias-label-secondary)}.dsb-save-text .dsb-bad{margin:0}
+.dsb-fold{margin-top:6px;border-top:1px solid var(--dsw-alias-border-l1)}.dsb-fold>summary{list-style:none;display:flex;align-items:center;gap:6px;padding:10px 0;cursor:pointer;font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary)}.dsb-fold>summary::-webkit-details-marker{display:none}.dsb-fold>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s}.dsb-fold[open]>summary::before{transform:rotate(45deg)}.dsb-fold>summary:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.dsb-fold-body{display:flex;flex-direction:column}.dsb-fold-hint{font-weight:400;color:var(--dsw-alias-label-tertiary)}
+@container (max-width:560px){.dsb-row{grid-template-columns:minmax(0,1fr)}.dsb-row-control.dsb-inline{justify-content:flex-start}.dsb-compare{grid-template-columns:minmax(0,1fr)}.dsb-group-sub{white-space:normal}.dsb-item{flex-wrap:wrap}.dsb-savebar{flex-wrap:wrap}.dsb-savebar .dsb-actions{margin-left:auto}}
+@media(max-width:560px){.dsb-compare{grid-template-columns:minmax(0,1fr)}div.dsb-modal{width:100%}}
 `;
-    document.head.append(style);
+    if (style.textContent !== css)
+        style.textContent = css;
+    if (!existing)
+        document.head.append(style);
 }
 //# sourceMappingURL=styles.js.map

package/lib/client/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/client/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW;IAC3K,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,UAAU;IAC1K,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW;IACjM,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe;IACjP,UAAU,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,qBAAqB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,mBAAmB;CAC1V,CAAA;AAEV,MAAM,UAAU,YAAY;IAC1B,IAAI,QAAQ,CAAC,cAAc,CAAC,6BAA6B,CAAC;QAAE,OAAM;IAClE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,EAAE,GAAG,6BAA6B,CAAA;IACxC,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;CAYrB,CAAA;IACC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/client/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW;IAC/H,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa;IACrI,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB;IACjJ,UAAU,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc;IAC/J,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,iBAAiB,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY;IACpJ,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU;IACzH,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,KAAK,EAAE,WAAW;IACxJ,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe;IACzJ,UAAU,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB;IAC5J,aAAa,EAAE,qBAAqB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,mBAAmB;CAChG,CAAA;AAEV;;;GAGG;AACH,MAAM,UAAU,YAAY;IAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,6BAA6B,CAAC,CAAA;IACvE,MAAM,KAAK,GAAG,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACzD,KAAK,CAAC,EAAE,GAAG,6BAA6B,CAAA;IACxC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAA;IACC,IAAI,KAAK,CAAC,WAAW,KAAK,GAAG;QAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IACtD,IAAI,CAAC,QAAQ;QAAE,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC5C,CAAC"}

package/lib/client/ui-kit.d.ts

@@ -0,0 +1,173 @@
+/**
+ * The small set of controls the settings card is made of.
+ *
+ * Switches, buttons, badges, dialogs and the click-to-read help bubble are the Host's own
+ * (`@deepseek-ai/dsh-client-ui-primitives`). The Host ships no select, no chip input, no accordion and no
+ * list-row, so those four are built here from native elements (`<select>`, `<details>`, `<input>`) and the
+ * `--dsw-alias-*` tokens, which makes them follow the light and dark themes without a color of their own.
+ * Nothing in this file knows about a configuration field: callers pass text and callbacks.
+ * @module dsh-browser/client/ui-kit
+ */
+import { type ReactNode } from 'react';
+export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'outline';
+/** A read-only badge. */
+export declare function Badge(props: {
+    tone?: Tone;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The `?` button: its text opens on click, so a long explanation costs one glyph until someone asks. */
+export declare function Help(props: {
+    label: string;
+    text: string;
+}): import("react").JSX.Element;
+/** Labels every row shares, so a row does not need the dictionary itself. */
+export interface RowLabels {
+    overridden: string;
+    reset: string;
+    help: string;
+    invalid: string;
+}
+export interface RowProps {
+    /** The configuration field this row is the entry of (one per public field; the render test counts them). */
+    field?: string;
+    /** The id of the control, so the label is tied to it. */
+    id?: string;
+    label: string;
+    /** One short sentence. Anything longer belongs in `help`. */
+    hint?: string;
+    help?: string;
+    overridden?: boolean;
+    invalid?: boolean;
+    /** Replaces the hint while the value is invalid. */
+    problem?: string;
+    /** `field.key` of a policy key's row (usagePolicy.minDelayMs), for the render test and for tests that drive a row. */
+    policyKey?: string;
+    /** A small grey line under the hint: a range, a default. */
+    meta?: string;
+    /** A short warning badge beside the label, for a setting that widens what an agent may do. */
+    risk?: string;
+    disabled?: boolean;
+    labels: RowLabels;
+    onReset?: () => void;
+    /** Control placement: beside the text (default) or on its own line. */
+    wide?: boolean;
+    inline?: boolean;
+    children: ReactNode;
+}
+/** One setting: label, one-line hint, an optional `?`, the "overridden" badge with its reset, and the control. */
+export declare function Row(props: RowProps): import("react").JSX.Element;
+/** A closed-by-default fold inside a group, for the items few people need. */
+export declare function Fold(props: {
+    id: string;
+    title: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A small heading inside a group, for sets of rows that belong together. */
+export declare function SubHead(props: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One group of the card, an accordion item. `<details>` keeps every control in the document while the group is
+ * closed (so a server-rendered check still sees them) and gives keyboard and screen-reader behavior for free.
+ */
+export declare function Group(props: {
+    id: string;
+    title: string;
+    summary?: string;
+    badges?: ReactNode;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * A native select. A stored value that is not among the options (a channel the list does not know, an older
+ * enum value) is shown as its own entry instead of being silently replaced by the first option.
+ */
+export declare function Select(props: {
+    id?: string;
+    value: string;
+    options: readonly SelectOption[];
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    muted?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+/** A single-line text input; `muted` greys the value while it is only the inherited default. */
+export declare function TextInput(props: {
+    id?: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    muted?: boolean;
+    invalid?: boolean;
+    list?: string;
+    numeric?: boolean;
+    ariaLabel?: string;
+    code?: boolean;
+}): import("react").JSX.Element;
+/** A text input followed by a fixed unit. */
+export declare function UnitInput(props: {
+    id?: string;
+    value: string;
+    unit: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    muted?: boolean;
+    invalid?: boolean;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+/** The Host's switch, named by its row. */
+export declare function Toggle(props: {
+    label: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/** A list of short strings as removable chips with an add box (Enter or comma adds; Backspace on an empty box removes the last). */
+export declare function Chips(props: {
+    id?: string;
+    values: readonly string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Why a new entry is refused, or undefined. */
+    check?: (value: string, existing: readonly string[]) => string | undefined;
+    removeLabel: string;
+    addLabel: string;
+}): import("react").JSX.Element;
+/** A dialog on the Host's modal: a title, a scrolling body, and a footer of actions. */
+export declare function Dialog(props: {
+    open: boolean;
+    title: string;
+    closeLabel: string;
+    description?: string;
+    onClose: () => void;
+    footer?: ReactNode;
+    wide?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Primary and secondary buttons at the card's size. */
+export declare function Btn(props: {
+    children: ReactNode;
+    onClick?: () => void;
+    primary?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    title?: string;
+    data?: string;
+}): import("react").JSX.Element;
+/** A list row: a title with badges, a meta line, and actions on the right. */
+export declare function Item(props: {
+    title: ReactNode;
+    badges?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+    data?: string;
+}): import("react").JSX.Element;