@kanyun-ai-infra/band-plugin-react 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/{chunk-ULDBT77D.js → chunk-HX653UQN.js} +376 -1
  2. package/dist/components.d.ts +216 -2
  3. package/dist/components.js +50 -4
  4. package/dist/index.d.ts +65 -2
  5. package/dist/index.js +312 -22
  6. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /* band:inject-css */ /* @kanyun-ai-infra/band-plugin-react 的样式（scripts/tsup-inject-css.ts） */
2
2
  if (typeof document !== "undefined" && document.head) {
3
- const css = "/* src/ui.css */\n.band-plugin-react-error {\n font-size: var(--fs-ui);\n padding: 7px 10px;\n border-radius: 8px;\n background: var(--bad-soft);\n color: var(--bad);\n font-family: var(--mono);\n}\n.band-plugin-react-info {\n font-size: var(--fs-ui);\n padding: 7px 10px;\n border-radius: 8px;\n background: var(--panel);\n color: var(--muted);\n}\n.band-plugin-react-retry {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n}\n.band-plugin-react-failed {\n display: grid;\n gap: 6px;\n justify-items: start;\n margin: auto;\n padding: 8px 10px;\n border-radius: var(--r);\n background: var(--bad-soft);\n color: var(--bad);\n font-size: var(--fs-ui);\n}\n.band-plugin-react-failed p {\n margin: 0;\n}\n.band-plugin-react-failed-title {\n font-weight: 600;\n}\n.band-plugin-react-failed-reason {\n overflow-wrap: anywhere;\n}\n.band-plugin-react-pane-head {\n padding: 6px 14px 6px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n min-height: 36px;\n}\n.band-plugin-react-pane-title {\n margin: 0;\n font-size: var(--fs-dense);\n color: var(--muted);\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n.band-plugin-react-wsicon {\n flex: none;\n display: block;\n}\n.band-plugin-react-wstile {\n --band-wstile: 16px;\n width: var(--band-wstile);\n height: var(--band-wstile);\n display: inline-grid;\n place-items: center;\n flex: none;\n border-radius: calc(var(--band-wstile) * 0.26);\n background: var(--panel);\n box-shadow: var(--shadow-card);\n}\n.band-plugin-react-wstile > :where(.band-plugin-react-wsicon) {\n width: 82%;\n height: 82%;\n}\n.band-plugin-react-wstile:where(.is-large) {\n border-radius: var(--r-xl);\n}\n.band-plugin-react-wstile:where(.is-large) > :where(.band-plugin-react-wsicon) {\n width: 76%;\n height: 76%;\n}\n.band-plugin-react-instrument {\n width: 72%;\n height: 72%;\n background: currentColor;\n -webkit-mask: var(--band-instrument) center / contain no-repeat;\n mask: var(--band-instrument) center / contain no-repeat;\n}\n.band-plugin-react-model-hint {\n margin: 0;\n}\n.band-plugin-react-target-repo {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin: 0;\n font-size: var(--fs-meta);\n line-height: 1.5;\n color: var(--muted);\n}\n.band-plugin-react-target-repo code {\n font-family: var(--mono);\n color: var(--ink);\n}\n.band-plugin-react-target-repo a {\n color: var(--accent-text);\n}\n.band-plugin-react-target-repo-request {\n align-self: flex-start;\n}\n.band-plugin-react-target-repo-err {\n color: var(--bad);\n}\n.band-plugin-react-first-delivery {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex-basis: 100%;\n padding: 12px;\n border: 1px solid var(--rule);\n border-radius: var(--r-lg);\n background: var(--panel);\n margin: 0;\n min-width: 0;\n}\n.band-plugin-react-first-delivery-slot {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: var(--fs-meta);\n}\n.band-plugin-react-first-delivery-pick,\n.band-plugin-react-first-delivery-file {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n.band-plugin-react-first-delivery-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.band-plugin-react-first-delivery-name {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-first-delivery-size {\n color: var(--muted);\n}\n.band-plugin-react-first-delivery-missing {\n margin: 0;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-first-delivery .btn {\n align-self: flex-start;\n}\n.band-plugin-react-no-key {\n margin: 0;\n font-size: var(--fs-ui);\n color: var(--bad);\n}\n\n/* src/controls.css */\n.band-plugin-react-combo-field,\n.band-plugin-react-tags {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n align-items: center;\n padding: 5px 8px;\n border-radius: var(--r);\n background: var(--panel);\n box-shadow: inset 0 0 0 1px var(--control-edge);\n}\n.band-plugin-react-combo-field > :where(.field),\n.band-plugin-react-tags > :where(.field) {\n flex: 1 1 90px;\n min-width: 90px;\n width: auto;\n}\n.band-plugin-react-combo-picked {\n list-style: none;\n margin: 0 0 7px;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n.band-plugin-react-combo-chip,\n.band-plugin-react-filter-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 4px 0 8px;\n border-radius: 999px;\n background: var(--fill-2);\n color: var(--ink);\n font-size: var(--fs-meta);\n white-space: nowrap;\n}\n.band-plugin-react-filter-chip {\n background: var(--accent-soft);\n color: var(--accent-text);\n}\n.band-plugin-react-combo-chip > button,\n.band-plugin-react-filter-chip > button {\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n line-height: 1;\n padding: 0 3px;\n border-radius: 999px;\n opacity: 0.85;\n}\n.band-plugin-react-combo-chip > button:where(:focus-visible),\n.band-plugin-react-filter-chip > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n opacity: 1;\n}\n.band-plugin-react-combo-pop {\n position: absolute;\n left: 0;\n right: 0;\n top: calc(100% + 6px);\n z-index: var(--layer-pop);\n display: grid;\n gap: 1px;\n max-height: 236px;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 5px;\n border-radius: var(--r-lg);\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n}\n.band-plugin-react-combo-group {\n padding: 6px 8px 3px;\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-combo-opt {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 6px 8px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-row);\n text-align: left;\n}\n.band-plugin-react-combo-opt:where(.is-active) {\n background: var(--fill-2);\n}\n.band-plugin-react-combo-opt:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-combo-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-combo-label > mark {\n background: var(--accent-soft);\n color: var(--ink);\n border-radius: 2px;\n}\n.band-plugin-react-combo-meta {\n margin-left: auto;\n flex: none;\n font-family: var(--mono);\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-combo-plus {\n display: inline-grid;\n place-items: center;\n width: 20px;\n height: 20px;\n flex: none;\n border-radius: 50%;\n background: var(--fill-3);\n color: var(--muted);\n font-size: var(--fs-badge);\n}\n.band-plugin-react-combo-empty {\n padding: 8px;\n text-align: center;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 4px 0 8px;\n border-radius: 999px;\n background: var(--fill-2);\n color: var(--ink);\n font-size: var(--fs-meta);\n white-space: nowrap;\n}\n.band-plugin-react-tag:where([data-dup]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-tag > button {\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n line-height: 1;\n padding: 0 3px;\n border-radius: 999px;\n opacity: 0.85;\n}\n.band-plugin-react-tag > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n opacity: 1;\n}\n.band-plugin-react-tag-hint {\n margin: 5px 0 0;\n min-height: 16px;\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-tag-hint:where([data-err]) {\n color: var(--bad);\n}\n.band-plugin-react-filter {\n display: grid;\n gap: 2px;\n min-width: 0;\n}\n.band-plugin-react-filter-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n margin-bottom: 8px;\n}\n.band-plugin-react-filter-clear {\n margin-left: auto;\n border: 0;\n background: none;\n padding: 0 2px;\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-meta);\n text-decoration: underline;\n}\n.band-plugin-react-filter-clear:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n border-radius: 4px;\n}\n.band-plugin-react-filter-group {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 7px 8px 3px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-badge);\n text-align: left;\n}\n.band-plugin-react-filter-group:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-filter-group::before {\n content: \"\\25b8\";\n width: 11px;\n flex: none;\n font-size: var(--fs-meta);\n line-height: 1;\n}\n.band-plugin-react-filter-group[aria-expanded=true]::before {\n content: \"\\25be\";\n}\n.band-plugin-react-filter-group-count {\n margin-left: auto;\n font-family: var(--mono);\n}\n.band-plugin-react-filter-opt {\n padding: 4px 8px;\n border-radius: var(--r-sm);\n}\n.band-plugin-react-filter-opt:where(:hover) {\n background: var(--fill);\n}\n.band-plugin-react-filter-count {\n margin-left: auto;\n font-family: var(--mono);\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-filter-empty {\n padding: 8px;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n\n/* src/prompt/prompt.css */\n.band-plugin-react-prompt {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: 6px;\n min-width: 0;\n}\n.band-plugin-react-prompt-box {\n position: relative;\n min-width: 0;\n}\n.band-plugin-react-prompt-box.composer {\n grid-template-columns: minmax(0, 1fr);\n}\n.band-plugin-react-prompt-box:where([data-variant=comment] *, [data-variant=reply] *) {\n border-radius: var(--r-lg);\n}\n.band-plugin-react-prompt-box.composer textarea:where([data-variant=comment] *, [data-variant=reply] *) {\n font-size: var(--fs-body);\n padding: 10px 12px 2px;\n}\n.band-plugin-react-prompt-note {\n padding: 6px 12px 12px;\n font-size: var(--fs-ui);\n color: var(--muted);\n}\n.band-plugin-react-prompt-notice {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: var(--fs-dense);\n padding: 6px 6px 6px 10px;\n border-radius: var(--r);\n background: var(--fill);\n color: var(--muted);\n}\n.band-plugin-react-prompt-notice:where([role=alert]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-prompt-notice > span {\n flex: 1;\n min-width: 0;\n}\n.band-plugin-react-prompt-notice-lines {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-prompt-tray {\n list-style: none;\n margin: 0;\n padding: 12px 12px 0;\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: thin;\n}\n.band-plugin-react-prompt-card {\n position: relative;\n flex: none;\n display: flex;\n align-items: center;\n border-radius: var(--r-lg);\n background: var(--sunk);\n max-width: 220px;\n}\n.band-plugin-react-prompt-card:where([data-state=failed]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-prompt-open {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n padding: 6px 26px 6px 6px;\n border: 0;\n background: none;\n color: inherit;\n text-align: left;\n font: inherit;\n border-radius: inherit;\n}\n.band-plugin-react-prompt-open:where(:disabled) {\n cursor: default;\n}\n.band-plugin-react-prompt-open:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-prompt-open:where([data-kind=image] *) {\n padding: 0;\n}\n.band-plugin-react-prompt-thumb {\n width: auto;\n min-width: 40px;\n max-width: 140px;\n height: 56px;\n object-fit: cover;\n border-radius: var(--r-lg);\n display: block;\n}\n.band-plugin-react-prompt-icon {\n flex: none;\n width: 36px;\n height: 40px;\n border-radius: var(--r-sm);\n background: var(--panel);\n display: grid;\n place-items: center;\n font-family: var(--mono);\n font-size: 10.5px;\n color: var(--muted);\n box-shadow: 0 0 0 var(--hairline) var(--rule);\n}\n.band-plugin-react-prompt-meta {\n display: grid;\n min-width: 0;\n text-align: left;\n}\n.band-plugin-react-prompt-name {\n font-size: var(--fs-ui);\n color: var(--ink);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-prompt-file {\n text-autospace: no-autospace;\n}\n.band-plugin-react-prompt-d {\n font-size: var(--fs-meta);\n color: var(--muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-prompt-quote {\n display: -webkit-box;\n white-space: normal;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.band-plugin-react-prompt-d:where([data-state=failed] *) {\n color: var(--bad);\n}\n.band-plugin-react-prompt-progress {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n border-radius: inherit;\n background: color-mix(in srgb, var(--panel) 55%, transparent);\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-progress:where([data-kind=file] *) {\n inset: auto 30px auto auto;\n background: none;\n}\n.band-plugin-react-prompt-retry {\n border: 0;\n background: none;\n color: var(--bad);\n font: inherit;\n font-size: var(--fs-meta);\n padding: 2px 6px;\n margin: 0 22px 0 6px;\n border-radius: var(--r-sm);\n}\n.band-plugin-react-prompt-retry:where(:hover) {\n background: var(--fill-2);\n}\n.band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card > *) {\n position: absolute;\n top: 3px;\n right: 3px;\n}\n.band-plugin-react-prompt-x {\n width: 20px;\n height: 20px;\n display: inline-grid;\n place-items: center;\n border: 0;\n border-radius: 50%;\n background: none;\n color: var(--muted);\n font-size: var(--fs-body);\n line-height: 1;\n flex: none;\n transition: background var(--sixteenth) var(--ease), color var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-x:where(:hover, :focus-visible) {\n background: var(--fill-3);\n color: var(--ink);\n outline: none;\n}\n.band-plugin-react-prompt-x:where([data-kind=image] > *) {\n background: color-mix(in srgb, var(--panel) 85%, transparent);\n color: var(--ink);\n}\n.band-plugin-react-prompt-chips {\n list-style: none;\n margin: 0;\n padding: 4px 14px 0;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n.band-plugin-react-prompt-chip.chip {\n background: var(--fill-2);\n color: var(--ink);\n padding: 1px 2px 1px 8px;\n gap: 3px;\n}\n.band-plugin-react-prompt-chip:where([data-kind=cap]) {\n background: var(--accent-soft);\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-chip:where([data-kind=conn]) {\n padding-right: 8px;\n}\n.band-plugin-react-prompt-sigil {\n font-family: var(--mono);\n color: var(--muted);\n}\n.band-plugin-react-prompt-sigil:where([data-kind=cap] *) {\n color: inherit;\n}\n.band-plugin-react-prompt-cands.mention {\n position: absolute;\n z-index: 25;\n left: 10px;\n right: 10px;\n bottom: calc(100% + 6px);\n max-height: 280px;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.band-plugin-react-prompt-cands.mention:where([data-variant=comment] *, [data-variant=reply] *) {\n position: static;\n margin: 6px 8px;\n box-shadow: 0 0 0 var(--hairline) var(--rule);\n}\n.band-plugin-react-prompt-cands-h {\n font-size: var(--fs-caption);\n color: var(--muted);\n padding: 4px 8px 2px;\n}\n.band-plugin-react-prompt-empty {\n font-size: var(--fs-ui);\n color: var(--muted);\n padding: 6px 8px 8px;\n}\n.band-plugin-react-prompt-option:where([aria-selected=true]) {\n background: var(--sunk);\n}\n.band-plugin-react-prompt-bar {\n position: relative;\n min-width: 0;\n}\n.band-plugin-react-prompt-bar.composer-bar {\n flex-wrap: nowrap;\n}\n.band-plugin-react-prompt-anchor {\n position: relative;\n display: inline-flex;\n}\n.band-plugin-react-prompt-capbtn.btn {\n font-family: var(--mono);\n font-size: var(--fs-dense);\n}\n.band-plugin-react-prompt-hint {\n font-size: var(--fs-meta);\n color: var(--muted);\n padding: 0 8px;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n@media (max-width: 860px) {\n .band-plugin-react-prompt-hint:not([data-notice]) {\n display: none;\n }\n}\n.band-plugin-react-prompt-send:where([data-waiting]) {\n background: var(--fill-3);\n color: var(--ink);\n}\n.band-plugin-react-prompt-ring {\n display: block;\n}\n.band-plugin-react-prompt-menu {\n position: absolute;\n z-index: 26;\n left: 0;\n bottom: calc(100% + 6px);\n min-width: 248px;\n max-width: min(320px, calc(100vw - 32px));\n max-height: 360px;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 4px;\n border-radius: 10px;\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n display: grid;\n outline: none;\n}\n.band-plugin-react-prompt-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 8px;\n border: 0;\n border-radius: 7px;\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-ui);\n text-align: left;\n text-decoration: none;\n}\n.band-plugin-react-prompt-item:where(:hover, :focus-visible) {\n background: var(--sunk);\n outline: none;\n}\n.band-plugin-react-prompt-item:where(:disabled) {\n color: var(--muted);\n background: none;\n opacity: 0.42;\n}\n.band-plugin-react-prompt-meta:where(.band-plugin-react-prompt-item > *) {\n flex: 1;\n}\n.band-plugin-react-prompt-check {\n width: 14px;\n flex: none;\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-sep {\n border: 0;\n height: var(--hairline);\n background: var(--rule);\n margin: 4px 6px;\n}\n.band-plugin-react-prompt-group {\n font-size: var(--fs-caption);\n color: var(--muted);\n padding: 4px 8px 2px;\n}\n.band-plugin-react-prompt-switch {\n flex: none;\n width: 28px;\n height: 16px;\n border-radius: 999px;\n background: var(--fill-3);\n position: relative;\n transition: background var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--panel);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: transform var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-switch:where([data-on]) {\n background: var(--primary);\n}\n.band-plugin-react-prompt-switch:where([data-on])::after {\n transform: translateX(12px);\n}\n.band-plugin-react-prompt-source {\n margin: 6px 10px 0;\n padding: 8px;\n border-radius: var(--r-lg);\n background: var(--sunk);\n display: grid;\n gap: 6px;\n}\n.band-plugin-react-prompt-source-h {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--fs-ui);\n}\n:where(.band-plugin-react-prompt-source-h, .band-plugin-react-prompt-preview-h) > .grow {\n flex: 1;\n}\n.band-plugin-react-prompt-drop {\n position: absolute;\n inset: 0;\n z-index: 24;\n display: grid;\n place-items: center;\n padding: 12px;\n text-align: center;\n border-radius: inherit;\n background: color-mix(in srgb, var(--accent-soft) 92%, transparent);\n color: var(--accent-text);\n font-size: var(--fs-ui);\n box-shadow: inset 0 0 0 1.5px var(--accent);\n pointer-events: none;\n}\n.band-plugin-react-prompt-preview {\n border: 0;\n padding: 10px;\n border-radius: var(--r-xl);\n background: var(--panel);\n color: var(--ink);\n box-shadow: var(--shadow-pop);\n max-width: min(960px, calc(100vw - 32px));\n max-height: calc(100vh - 64px);\n}\n.band-plugin-react-prompt-preview::backdrop {\n background: rgba(10, 12, 16, 0.5);\n}\n.band-plugin-react-prompt-preview-h {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 0 8px 4px;\n}\n.band-plugin-react-prompt-big {\n display: block;\n max-width: 100%;\n max-height: calc(100vh - 140px);\n margin: 0 auto;\n border-radius: var(--r);\n}\n.band-plugin-react-prompt-pre {\n margin: 0;\n padding: 10px 12px;\n border-radius: var(--r);\n background: var(--sunk);\n font-family: var(--mono);\n font-size: var(--fs-meta);\n white-space: pre-wrap;\n overflow: auto;\n overscroll-behavior: contain;\n max-height: calc(100vh - 160px);\n min-width: min(560px, calc(100vw - 64px));\n}\n@media (hover: hover) {\n .band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card > *) {\n opacity: 0;\n }\n .band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card:hover > *, .band-plugin-react-prompt-card:focus-within > *) {\n opacity: 1;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .band-plugin-react-prompt-x,\n .band-plugin-react-prompt-switch,\n .band-plugin-react-prompt-switch::after {\n transition: none;\n }\n}\n.band-plugin-react-prompt-box.composer textarea[aria-invalid=true] {\n box-shadow: inset 0 -2px 0 var(--bad);\n}\n.band-plugin-react-prompt-box.composer textarea[aria-invalid=true]::placeholder {\n color: var(--bad);\n}\n.band-plugin-react-prompt-import {\n display: grid;\n gap: 8px;\n padding: 12px;\n}\n.band-plugin-react-prompt-import p {\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-ui);\n}\n.band-plugin-react-prompt-import-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n.band-plugin-react-prompt-card[data-compressed] {\n max-width: 320px;\n}\n.band-plugin-react-prompt-card[data-compressed] .band-plugin-react-prompt-open {\n padding: 6px 26px 6px 6px;\n}\n\n/* src/message/message.css */\n.band-plugin-react-msg {\n position: relative;\n display: grid;\n gap: 6px;\n min-width: 0;\n border-radius: var(--r);\n outline: none;\n}\n.band-plugin-react-msg:where(.fit) {\n justify-self: start;\n width: fit-content;\n max-width: 100%;\n}\n.band-plugin-react-msg:where(:focus-visible) {\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-msg-bar {\n justify-self: end;\n z-index: 2;\n display: flex;\n gap: 2px;\n padding: 3px;\n background: var(--panel);\n border-radius: var(--r);\n box-shadow: var(--shadow-pop);\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--sixteenth) var(--ease) var(--eighth), visibility 0s linear calc(var(--eighth) + var(--sixteenth));\n}\n:where(.band-plugin-react-msg:focus-within, .band-plugin-react-msg.open) > .band-plugin-react-msg-bar {\n opacity: 1;\n visibility: visible;\n transition: opacity var(--sixteenth) var(--ease);\n}\n@media (hover: hover) {\n :where(.band-plugin-react-msg:hover) > .band-plugin-react-msg-bar {\n opacity: 1;\n visibility: visible;\n transition: opacity var(--sixteenth) var(--ease);\n }\n}\n@media (hover: none) {\n .band-plugin-react-msg-bar {\n display: none;\n }\n}\n.band-plugin-react-msg-ib {\n width: 28px;\n height: 28px;\n display: inline-grid;\n place-items: center;\n border: 0;\n border-radius: 6px;\n background: none;\n color: var(--muted);\n padding: 0;\n transition: background var(--sixteenth) var(--ease);\n}\n.band-plugin-react-msg-ib:where(:hover, .on) {\n background: var(--fill-2);\n color: var(--ink);\n}\n.band-plugin-react-msg-ib:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n color: var(--ink);\n}\n.band-plugin-react-msg-ib:where(.done) {\n color: var(--ok);\n}\n:where(.band-plugin-react-msg-ib, .band-plugin-react-msg-mi, .band-plugin-react-msg-chip) svg {\n width: 16px;\n height: 16px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n.band-plugin-react-msg-menu {\n position: fixed;\n z-index: 1000;\n width: 248px;\n max-width: calc(100vw - 32px);\n display: grid;\n gap: 2px;\n padding: 8px;\n background: var(--panel);\n border-radius: var(--r-lg);\n box-shadow: var(--shadow-pop);\n animation: band-plugin-react-msg-in var(--sixteenth) var(--ease);\n}\n@keyframes band-plugin-react-msg-in {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n}\n.band-plugin-react-msg-emo {\n margin: 0;\n border: 0;\n min-width: 0;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 2px;\n padding: 2px 0 4px;\n}\n.band-plugin-react-msg-emo > button {\n height: 34px;\n display: grid;\n place-items: center;\n border: 0;\n border-radius: var(--r);\n background: none;\n font-size: 20px;\n line-height: 1;\n padding: 0;\n transition: background var(--sixteenth) var(--ease), transform var(--sixteenth) var(--ease);\n}\n.band-plugin-react-msg-emo > button:where(:hover) {\n background: var(--fill-2);\n transform: scale(1.08);\n}\n.band-plugin-react-msg-emo > button:where(.mine) {\n background: var(--accent-soft);\n box-shadow: inset 0 0 0 1px var(--accent);\n}\n.band-plugin-react-msg-emo > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-msg-sep {\n height: var(--hairline);\n margin: 2px 0 4px;\n background: var(--rule);\n}\n.band-plugin-react-msg-mi {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 6px 8px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-body);\n text-align: left;\n}\n.band-plugin-react-msg-mi svg {\n stroke: var(--muted);\n}\n.band-plugin-react-msg-mi:where(:hover, :focus-visible) {\n outline: none;\n background: var(--fill-2);\n}\n.band-plugin-react-msg-rx {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n.band-plugin-react-msg-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n height: 26px;\n padding: 0 9px;\n border: 0;\n border-radius: 999px;\n background: var(--fill);\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-ui);\n font-variant-numeric: tabular-nums;\n transition: background var(--sixteenth) var(--ease), opacity var(--sixteenth) var(--ease);\n}\nbutton.band-plugin-react-msg-chip:where(:hover) {\n background: var(--fill-2);\n}\n.band-plugin-react-msg-chip:where(.mine) {\n background: var(--accent-soft);\n color: var(--accent-text);\n box-shadow: inset 0 0 0 1px var(--accent);\n}\n.band-plugin-react-msg-chip:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-msg-chip:where(.pending) {\n opacity: 0.6;\n}\n.band-plugin-react-msg-chip:where(.add) {\n padding: 0 7px;\n color: var(--muted);\n opacity: 0;\n}\n:where(.band-plugin-react-msg:hover, .band-plugin-react-msg:focus-within, .band-plugin-react-msg.open) .band-plugin-react-msg-chip:where(.add) {\n opacity: 1;\n}\n@media (hover: none) {\n .band-plugin-react-msg-chip:where(.add) {\n opacity: 1;\n }\n}\n.band-plugin-react-msg-e {\n font-size: var(--fs-lead);\n line-height: 1;\n}\n.band-plugin-react-msg-tip {\n position: absolute;\n left: 0;\n bottom: calc(100% + 6px);\n z-index: 4;\n white-space: nowrap;\n padding: 4px 8px;\n border-radius: var(--r-sm);\n background: var(--ink);\n color: var(--panel);\n font-size: var(--fs-meta);\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--sixteenth) var(--ease);\n}\n:where(.band-plugin-react-msg-chip:hover, .band-plugin-react-msg-chip:focus-visible) > .band-plugin-react-msg-tip {\n opacity: 1;\n visibility: visible;\n}\n.band-plugin-react-msg-err {\n display: flex;\n gap: 6px;\n align-items: center;\n font-size: var(--fs-meta);\n color: var(--bad);\n}\n.band-plugin-react-msg-err > button {\n border: 0;\n padding: 0;\n background: none;\n color: var(--ink);\n font: inherit;\n text-decoration: underline;\n}\n.band-plugin-react-msg-sheetwrap {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 12px;\n}\n.band-plugin-react-msg-scrim {\n position: absolute;\n inset: 0;\n border: 0;\n padding: 0;\n background: color-mix(in srgb, black 36%, transparent);\n animation: band-plugin-react-msg-fade var(--eighth) var(--ease);\n}\n.band-plugin-react-msg-lifted {\n position: relative;\n margin: 0 16px;\n max-height: 36vh;\n overflow: hidden;\n padding: 12px;\n display: grid;\n gap: 6px;\n background: var(--panel);\n border-radius: var(--r-lg);\n box-shadow: var(--shadow-pop);\n pointer-events: none;\n}\n.band-plugin-react-msg-sheet {\n position: relative;\n display: grid;\n gap: 2px;\n padding: 8px 12px calc(20px + env(safe-area-inset-bottom));\n background: var(--panel);\n border-radius: var(--r-xl) var(--r-xl) 0 0;\n box-shadow: var(--shadow-pop);\n animation: band-plugin-react-msg-rise var(--eighth) var(--ease);\n}\n.band-plugin-react-msg-grab {\n width: 36px;\n height: 4px;\n margin: 0 auto 10px;\n border-radius: 2px;\n background: var(--fill-3);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo {\n gap: 8px;\n padding-bottom: 10px;\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo > button {\n height: 44px;\n font-size: 24px;\n background: var(--fill);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo > button:where(.mine) {\n background: var(--accent-soft);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-mi {\n padding: 12px 8px;\n font-size: var(--fs-lead);\n}\n@keyframes band-plugin-react-msg-fade {\n from {\n opacity: 0;\n }\n}\n@keyframes band-plugin-react-msg-rise {\n from {\n transform: translateY(24px);\n opacity: 0;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n :where(.band-plugin-react-msg-menu, .band-plugin-react-msg-sheet, .band-plugin-react-msg-scrim, .band-plugin-react-msg-bar, .band-plugin-react-msg-chip) {\n animation: none;\n transition: none;\n }\n}\n.band-plugin-react-atts {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin: 0;\n padding: 0;\n list-style: none;\n min-width: 0;\n}\n.band-plugin-react-atts-thumb {\n display: block;\n padding: 0;\n border: 0;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n overflow: hidden;\n cursor: zoom-in;\n}\n.band-plugin-react-atts-thumb:where(:hover) {\n box-shadow: 0 0 0 1px var(--rule-strong);\n}\n.band-plugin-react-atts-thumb:where(:hover) .band-plugin-react-atts-img {\n filter: brightness(0.94);\n}\n.band-plugin-react-atts-thumb:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-atts-pending {\n display: block;\n width: 96px;\n height: 72px;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n}\n.band-plugin-react-atts-pending[data-compact] {\n width: 40px;\n height: 30px;\n}\n.band-plugin-react-atts-img {\n display: block;\n max-width: 160px;\n max-height: 120px;\n min-width: 48px;\n min-height: 48px;\n object-fit: contain;\n}\n.band-plugin-react-atts-img:where([data-loading]) {\n width: 96px;\n height: 72px;\n background: var(--sunk);\n}\n.band-plugin-react-atts:where([data-compact]) {\n align-items: center;\n gap: 4px;\n}\n.band-plugin-react-atts:where([data-compact]) .band-plugin-react-atts-img {\n width: auto;\n height: 32px;\n min-width: 32px;\n max-width: 96px;\n min-height: 0;\n object-fit: cover;\n object-position: left top;\n border-radius: var(--r-sm);\n box-shadow: 0 0 0 1px var(--rule);\n}\n.band-plugin-react-atts-more {\n font-size: var(--fs-dense);\n color: var(--muted);\n}\n.band-plugin-react-atts-file {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr) auto auto;\n align-items: center;\n gap: 8px;\n max-width: 320px;\n padding: 6px 10px 6px 6px;\n border: 0;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-dense);\n text-align: left;\n cursor: pointer;\n}\n.band-plugin-react-atts-file:where(:hover):not([data-deleted]) {\n background: var(--panel);\n}\n.band-plugin-react-atts-file[data-deleted] {\n color: var(--muted);\n cursor: default;\n}\n.band-plugin-react-atts-file:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-atts-ext {\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n border-radius: var(--r-sm);\n background: var(--panel);\n color: var(--muted);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.02em;\n}\n.band-plugin-react-atts-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-autospace: no-autospace;\n}\n.band-plugin-react-atts-size,\n.band-plugin-react-atts-act,\n.band-plugin-react-atts-count {\n color: var(--muted);\n white-space: nowrap;\n}\n.band-plugin-react-atts-act {\n color: var(--accent-text);\n}\n.band-plugin-react-atts-wait {\n display: block;\n margin: 24px;\n color: var(--muted);\n}\n.band-plugin-react-atts-wait:where(div) {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* src/memory/memory.css */\n.band-plugin-react-memo {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n width: fit-content;\n max-width: 100%;\n box-sizing: border-box;\n margin-top: 2px;\n border: 0;\n border-radius: 7px;\n padding: 5px 8px;\n background: var(--fill);\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-dense);\n line-height: 1.5;\n text-align: left;\n cursor: pointer;\n transition: background var(--sixteenth) var(--ease), color var(--sixteenth) var(--ease);\n}\n.band-plugin-react-memo:where(:hover) {\n background: var(--fill-2);\n color: var(--ink);\n}\n.band-plugin-react-memo:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-memo > svg {\n flex: none;\n width: 14px;\n height: 14px;\n margin-top: 2px;\n fill: none;\n stroke: var(--muted);\n stroke-width: 1.4;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.band-plugin-react-memo > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-memo-rejected {\n display: block;\n color: var(--warn);\n}\n\n/* src/toast/toast.css */\n.band-plugin-react-toast-stack {\n position: fixed;\n right: 20px;\n bottom: calc(60px + env(safe-area-inset-bottom, 0px));\n z-index: var(--layer-pop);\n width: min(340px, calc(100vw - 40px));\n display: grid;\n gap: 8px;\n}\n.band-plugin-react-toast {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr) auto;\n gap: 10px;\n align-items: center;\n padding: 10px 12px;\n border-radius: var(--r-lg);\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n font-size: var(--fs-row);\n color: var(--ink);\n animation: band-plugin-react-toast-in var(--eighth) var(--ease);\n}\n@keyframes band-plugin-react-toast-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.band-plugin-react-toast-again {\n animation: none;\n}\n.band-plugin-react-toast-icon {\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n font-size: 10px;\n color: var(--panel);\n}\n.band-plugin-react-toast-icon:where(.ok) {\n background: var(--ok);\n}\n.band-plugin-react-toast-icon:where(.bad) {\n background: var(--bad);\n}\n.band-plugin-react-toast-icon:where(.busy) {\n border: 1.6px solid var(--accent);\n border-top-color: transparent;\n color: transparent;\n background: none;\n animation: band-plugin-react-toast-spin 900ms linear infinite;\n}\n@keyframes band-plugin-react-toast-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.band-plugin-react-toast-text {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-toast-detail {\n display: block;\n color: var(--muted);\n font-size: var(--fs-meta);\n overflow-wrap: anywhere;\n}\n.band-plugin-react-toast-act {\n font-size: var(--fs-meta);\n color: var(--ink);\n background: none;\n border: 0;\n font-family: inherit;\n text-decoration: underline;\n padding: 2px 4px;\n border-radius: 4px;\n}\n.band-plugin-react-toast-act:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n@media (prefers-reduced-motion: reduce) {\n .band-plugin-react-toast,\n .band-plugin-react-toast-icon:where(.busy) {\n animation: none;\n }\n}\n\n/* src/status/status.css */\n.band-plugin-react-status {\n display: grid;\n gap: 2px;\n min-width: 0;\n padding: 0 2px 0 4px;\n font-size: var(--fs-dense);\n color: var(--muted);\n}\n.band-plugin-react-status-head {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n color: var(--accent-text);\n}\n.band-plugin-react-status-who {\n font-weight: 600;\n}\n.band-plugin-react-status-context {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-status .band-plugin-react-status-glyph.glyph {\n --c: var(--accent);\n margin-left: 2px;\n}\n.band-plugin-react-status-spacer {\n flex: 1;\n}\n.band-plugin-react-status-elapsed {\n flex: none;\n color: var(--muted);\n font-variant-numeric: tabular-nums;\n}\n.band-plugin-react-status-note {\n padding-left: 22px;\n color: var(--ink);\n overflow-wrap: anywhere;\n}\n.band-plugin-react-status-action {\n padding-left: 22px;\n font-family: var(--mono);\n color: var(--muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-status-stall {\n padding-left: 22px;\n color: var(--warn);\n}\n.band-plugin-react-status-steps {\n display: grid;\n gap: 2px;\n margin: 0;\n padding: 0 0 0 22px;\n list-style: none;\n font-family: var(--mono);\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-status-steps > :where([data-state=done]) {\n color: var(--muted);\n}\n.band-plugin-react-status-steps > :where([data-state=now]) {\n color: var(--ink);\n}\n.band-plugin-react-status-stop {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n padding-left: 26px;\n font-size: var(--fs-dense);\n}\n.band-plugin-react-status-stop-note {\n color: var(--muted);\n}\n.band-plugin-react-stopped {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n min-width: 0;\n padding: 0 2px 0 4px;\n font-size: var(--fs-row);\n color: var(--muted);\n}\n.band-plugin-react-stopped-text b {\n font-weight: 600;\n color: var(--ink);\n}\n.band-plugin-react-stopped-took {\n font-size: var(--fs-meta);\n font-variant-numeric: tabular-nums;\n}\n\n/* src/version-reference.css */\n.band-plugin-react-version-ref {\n display: inline-block;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: bottom;\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n text-align: left;\n}\n.band-plugin-react-version-ref:where(button) {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.band-plugin-react-version-ref:where(:focus-visible) {\n outline: none;\n border-radius: var(--r-sm);\n box-shadow: 0 0 0 2px var(--accent);\n}\n";
3
+ const css = "/* src/ui.css */\n.band-plugin-react-error {\n font-size: var(--fs-ui);\n padding: 7px 10px;\n border-radius: 8px;\n background: var(--bad-soft);\n color: var(--bad);\n font-family: var(--mono);\n}\n.band-plugin-react-info {\n font-size: var(--fs-ui);\n padding: 7px 10px;\n border-radius: 8px;\n background: var(--panel);\n color: var(--muted);\n}\n.band-plugin-react-retry {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n}\n.band-plugin-react-failed {\n display: grid;\n gap: 6px;\n justify-items: start;\n margin: auto;\n padding: 8px 10px;\n border-radius: var(--r);\n background: var(--bad-soft);\n color: var(--bad);\n font-size: var(--fs-ui);\n}\n.band-plugin-react-failed p {\n margin: 0;\n}\n.band-plugin-react-failed-title {\n font-weight: 600;\n}\n.band-plugin-react-failed-reason {\n overflow-wrap: anywhere;\n}\n.band-plugin-react-pane-head {\n padding: 6px 14px 6px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n min-height: 36px;\n}\n.band-plugin-react-pane-title {\n margin: 0;\n font-size: var(--fs-dense);\n color: var(--muted);\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n.band-plugin-react-wsicon {\n flex: none;\n display: block;\n}\n.band-plugin-react-wstile {\n --band-wstile: 16px;\n width: var(--band-wstile);\n height: var(--band-wstile);\n display: inline-grid;\n place-items: center;\n flex: none;\n border-radius: calc(var(--band-wstile) * 0.26);\n background: var(--panel);\n box-shadow: var(--shadow-card);\n}\n.band-plugin-react-wstile > :where(.band-plugin-react-wsicon) {\n width: 82%;\n height: 82%;\n}\n.band-plugin-react-wstile:where(.is-large) {\n border-radius: var(--r-xl);\n}\n.band-plugin-react-wstile:where(.is-large) > :where(.band-plugin-react-wsicon) {\n width: 76%;\n height: 76%;\n}\n.band-plugin-react-instrument {\n width: 72%;\n height: 72%;\n background: currentColor;\n -webkit-mask: var(--band-instrument) center / contain no-repeat;\n mask: var(--band-instrument) center / contain no-repeat;\n}\n.band-plugin-react-model-hint {\n margin: 0;\n}\n.band-plugin-react-target-repo {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin: 0;\n font-size: var(--fs-meta);\n line-height: 1.5;\n color: var(--muted);\n}\n.band-plugin-react-target-repo code {\n font-family: var(--mono);\n color: var(--ink);\n}\n.band-plugin-react-target-repo a {\n color: var(--accent-text);\n}\n.band-plugin-react-target-repo-request {\n align-self: flex-start;\n}\n.band-plugin-react-target-repo-err {\n color: var(--bad);\n}\n.band-plugin-react-first-delivery {\n display: flex;\n flex-direction: column;\n gap: 8px;\n flex-basis: 100%;\n padding: 12px;\n border: 1px solid var(--rule);\n border-radius: var(--r-lg);\n background: var(--panel);\n margin: 0;\n min-width: 0;\n}\n.band-plugin-react-first-delivery-slot {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: var(--fs-meta);\n}\n.band-plugin-react-first-delivery-pick,\n.band-plugin-react-first-delivery-file {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n.band-plugin-react-first-delivery-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.band-plugin-react-first-delivery-name {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-first-delivery-size {\n color: var(--muted);\n}\n.band-plugin-react-first-delivery-missing {\n margin: 0;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-first-delivery .btn {\n align-self: flex-start;\n}\n.band-plugin-react-no-key {\n margin: 0;\n font-size: var(--fs-ui);\n color: var(--bad);\n}\n\n/* src/controls.css */\n.band-plugin-react-combo-field,\n.band-plugin-react-tags {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n align-items: center;\n padding: 5px 8px;\n border-radius: var(--r);\n background: var(--panel);\n box-shadow: inset 0 0 0 1px var(--control-edge);\n}\n.band-plugin-react-combo-field > :where(.field),\n.band-plugin-react-tags > :where(.field) {\n flex: 1 1 90px;\n min-width: 90px;\n width: auto;\n}\n.band-plugin-react-combo-picked {\n list-style: none;\n margin: 0 0 7px;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n.band-plugin-react-combo-chip,\n.band-plugin-react-filter-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 4px 0 8px;\n border-radius: 999px;\n background: var(--fill-2);\n color: var(--ink);\n font-size: var(--fs-meta);\n white-space: nowrap;\n}\n.band-plugin-react-filter-chip {\n background: var(--accent-soft);\n color: var(--accent-text);\n}\n.band-plugin-react-combo-chip > button,\n.band-plugin-react-filter-chip > button {\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n line-height: 1;\n padding: 0 3px;\n border-radius: 999px;\n opacity: 0.85;\n}\n.band-plugin-react-combo-chip > button:where(:focus-visible),\n.band-plugin-react-filter-chip > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n opacity: 1;\n}\n.band-plugin-react-combo-pop {\n position: absolute;\n left: 0;\n right: 0;\n top: calc(100% + 6px);\n z-index: var(--layer-pop);\n display: grid;\n gap: 1px;\n max-height: 236px;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 5px;\n border-radius: var(--r-lg);\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n}\n.band-plugin-react-combo-group {\n padding: 6px 8px 3px;\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-combo-opt {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 6px 8px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-row);\n text-align: left;\n}\n.band-plugin-react-combo-opt:where(.is-active) {\n background: var(--fill-2);\n}\n.band-plugin-react-combo-opt:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-combo-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-combo-label > mark {\n background: var(--accent-soft);\n color: var(--ink);\n border-radius: 2px;\n}\n.band-plugin-react-combo-meta {\n margin-left: auto;\n flex: none;\n font-family: var(--mono);\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-combo-plus {\n display: inline-grid;\n place-items: center;\n width: 20px;\n height: 20px;\n flex: none;\n border-radius: 50%;\n background: var(--fill-3);\n color: var(--muted);\n font-size: var(--fs-badge);\n}\n.band-plugin-react-combo-empty {\n padding: 8px;\n text-align: center;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 4px 0 8px;\n border-radius: 999px;\n background: var(--fill-2);\n color: var(--ink);\n font-size: var(--fs-meta);\n white-space: nowrap;\n}\n.band-plugin-react-tag:where([data-dup]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-tag > button {\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n line-height: 1;\n padding: 0 3px;\n border-radius: 999px;\n opacity: 0.85;\n}\n.band-plugin-react-tag > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n opacity: 1;\n}\n.band-plugin-react-tag-hint {\n margin: 5px 0 0;\n min-height: 16px;\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-tag-hint:where([data-err]) {\n color: var(--bad);\n}\n.band-plugin-react-filter {\n display: grid;\n gap: 2px;\n min-width: 0;\n}\n.band-plugin-react-filter-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n margin-bottom: 8px;\n}\n.band-plugin-react-filter-clear {\n margin-left: auto;\n border: 0;\n background: none;\n padding: 0 2px;\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-meta);\n text-decoration: underline;\n}\n.band-plugin-react-filter-clear:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n border-radius: 4px;\n}\n.band-plugin-react-filter-group {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 7px 8px 3px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-badge);\n text-align: left;\n}\n.band-plugin-react-filter-group:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-filter-group::before {\n content: \"\\25b8\";\n width: 11px;\n flex: none;\n font-size: var(--fs-meta);\n line-height: 1;\n}\n.band-plugin-react-filter-group[aria-expanded=true]::before {\n content: \"\\25be\";\n}\n.band-plugin-react-filter-group-count {\n margin-left: auto;\n font-family: var(--mono);\n}\n.band-plugin-react-filter-opt {\n padding: 4px 8px;\n border-radius: var(--r-sm);\n}\n.band-plugin-react-filter-opt:where(:hover) {\n background: var(--fill);\n}\n.band-plugin-react-filter-count {\n margin-left: auto;\n font-family: var(--mono);\n font-size: var(--fs-badge);\n color: var(--muted);\n}\n.band-plugin-react-filter-empty {\n padding: 8px;\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n\n/* src/prompt/prompt.css */\n.band-plugin-react-prompt {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: 6px;\n min-width: 0;\n}\n.band-plugin-react-prompt-box {\n position: relative;\n min-width: 0;\n}\n.band-plugin-react-prompt-box.composer {\n grid-template-columns: minmax(0, 1fr);\n}\n.band-plugin-react-prompt-box:where([data-variant=comment] *, [data-variant=reply] *) {\n border-radius: var(--r-lg);\n}\n.band-plugin-react-prompt-box.composer textarea:where([data-variant=comment] *, [data-variant=reply] *) {\n font-size: var(--fs-body);\n padding: 10px 12px 2px;\n}\n.band-plugin-react-prompt-note {\n padding: 6px 12px 12px;\n font-size: var(--fs-ui);\n color: var(--muted);\n}\n.band-plugin-react-prompt-notice {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: var(--fs-dense);\n padding: 6px 6px 6px 10px;\n border-radius: var(--r);\n background: var(--fill);\n color: var(--muted);\n}\n.band-plugin-react-prompt-notice:where([role=alert]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-prompt-notice > span {\n flex: 1;\n min-width: 0;\n}\n.band-plugin-react-prompt-notice-lines {\n display: flex;\n flex-direction: column;\n gap: 2px;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-prompt-tray {\n list-style: none;\n margin: 0;\n padding: 12px 12px 0;\n display: flex;\n gap: 8px;\n overflow-x: auto;\n scrollbar-width: thin;\n}\n.band-plugin-react-prompt-card {\n position: relative;\n flex: none;\n display: flex;\n align-items: center;\n border-radius: var(--r-lg);\n background: var(--sunk);\n max-width: 220px;\n}\n.band-plugin-react-prompt-card:where([data-state=failed]) {\n background: var(--bad-soft);\n color: var(--bad);\n}\n.band-plugin-react-prompt-open {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n padding: 6px 26px 6px 6px;\n border: 0;\n background: none;\n color: inherit;\n text-align: left;\n font: inherit;\n border-radius: inherit;\n}\n.band-plugin-react-prompt-open:where(:disabled) {\n cursor: default;\n}\n.band-plugin-react-prompt-open:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-prompt-open:where([data-kind=image] *) {\n padding: 0;\n}\n.band-plugin-react-prompt-thumb {\n width: auto;\n min-width: 40px;\n max-width: 140px;\n height: 56px;\n object-fit: cover;\n border-radius: var(--r-lg);\n display: block;\n}\n.band-plugin-react-prompt-icon {\n flex: none;\n width: 36px;\n height: 40px;\n border-radius: var(--r-sm);\n background: var(--panel);\n display: grid;\n place-items: center;\n font-family: var(--mono);\n font-size: 10.5px;\n color: var(--muted);\n box-shadow: 0 0 0 var(--hairline) var(--rule);\n}\n.band-plugin-react-prompt-meta {\n display: grid;\n min-width: 0;\n text-align: left;\n}\n.band-plugin-react-prompt-name {\n font-size: var(--fs-ui);\n color: var(--ink);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-prompt-file {\n text-autospace: no-autospace;\n}\n.band-plugin-react-prompt-d {\n font-size: var(--fs-meta);\n color: var(--muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-prompt-quote {\n display: -webkit-box;\n white-space: normal;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.band-plugin-react-prompt-d:where([data-state=failed] *) {\n color: var(--bad);\n}\n.band-plugin-react-prompt-progress {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n border-radius: inherit;\n background: color-mix(in srgb, var(--panel) 55%, transparent);\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-progress:where([data-kind=file] *) {\n inset: auto 30px auto auto;\n background: none;\n}\n.band-plugin-react-prompt-retry {\n border: 0;\n background: none;\n color: var(--bad);\n font: inherit;\n font-size: var(--fs-meta);\n padding: 2px 6px;\n margin: 0 22px 0 6px;\n border-radius: var(--r-sm);\n}\n.band-plugin-react-prompt-retry:where(:hover) {\n background: var(--fill-2);\n}\n.band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card > *) {\n position: absolute;\n top: 3px;\n right: 3px;\n}\n.band-plugin-react-prompt-x {\n width: 20px;\n height: 20px;\n display: inline-grid;\n place-items: center;\n border: 0;\n border-radius: 50%;\n background: none;\n color: var(--muted);\n font-size: var(--fs-body);\n line-height: 1;\n flex: none;\n transition: background var(--sixteenth) var(--ease), color var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-x:where(:hover, :focus-visible) {\n background: var(--fill-3);\n color: var(--ink);\n outline: none;\n}\n.band-plugin-react-prompt-x:where([data-kind=image] > *) {\n background: color-mix(in srgb, var(--panel) 85%, transparent);\n color: var(--ink);\n}\n.band-plugin-react-prompt-chips {\n list-style: none;\n margin: 0;\n padding: 4px 14px 0;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n.band-plugin-react-prompt-chip.chip {\n background: var(--fill-2);\n color: var(--ink);\n padding: 1px 2px 1px 8px;\n gap: 3px;\n}\n.band-plugin-react-prompt-chip:where([data-kind=cap]) {\n background: var(--accent-soft);\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-chip:where([data-kind=conn]) {\n padding-right: 8px;\n}\n.band-plugin-react-prompt-sigil {\n font-family: var(--mono);\n color: var(--muted);\n}\n.band-plugin-react-prompt-sigil:where([data-kind=cap] *) {\n color: inherit;\n}\n.band-plugin-react-prompt-cands.mention {\n position: absolute;\n z-index: 25;\n left: 10px;\n right: 10px;\n bottom: calc(100% + 6px);\n max-height: 280px;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.band-plugin-react-prompt-cands.mention:where([data-variant=comment] *, [data-variant=reply] *) {\n position: static;\n margin: 6px 8px;\n box-shadow: 0 0 0 var(--hairline) var(--rule);\n}\n.band-plugin-react-prompt-cands-h {\n font-size: var(--fs-caption);\n color: var(--muted);\n padding: 4px 8px 2px;\n}\n.band-plugin-react-prompt-empty {\n font-size: var(--fs-ui);\n color: var(--muted);\n padding: 6px 8px 8px;\n}\n.band-plugin-react-prompt-option:where([aria-selected=true]) {\n background: var(--sunk);\n}\n.band-plugin-react-prompt-bar {\n position: relative;\n min-width: 0;\n}\n.band-plugin-react-prompt-bar.composer-bar {\n flex-wrap: nowrap;\n}\n.band-plugin-react-prompt-anchor {\n position: relative;\n display: inline-flex;\n}\n.band-plugin-react-prompt-capbtn.btn {\n font-family: var(--mono);\n font-size: var(--fs-dense);\n}\n.band-plugin-react-prompt-hint {\n font-size: var(--fs-meta);\n color: var(--muted);\n padding: 0 8px;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n@media (max-width: 860px) {\n .band-plugin-react-prompt-hint:not([data-notice]) {\n display: none;\n }\n}\n.band-plugin-react-prompt-send:where([data-waiting]) {\n background: var(--fill-3);\n color: var(--ink);\n}\n.band-plugin-react-prompt-ring {\n display: block;\n}\n.band-plugin-react-prompt-menu {\n position: absolute;\n z-index: 26;\n left: 0;\n bottom: calc(100% + 6px);\n min-width: 248px;\n max-width: min(320px, calc(100vw - 32px));\n max-height: 360px;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 4px;\n border-radius: 10px;\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n display: grid;\n outline: none;\n}\n.band-plugin-react-prompt-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 8px;\n border: 0;\n border-radius: 7px;\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-ui);\n text-align: left;\n text-decoration: none;\n}\n.band-plugin-react-prompt-item:where(:hover, :focus-visible) {\n background: var(--sunk);\n outline: none;\n}\n.band-plugin-react-prompt-item:where(:disabled) {\n color: var(--muted);\n background: none;\n opacity: 0.42;\n}\n.band-plugin-react-prompt-meta:where(.band-plugin-react-prompt-item > *) {\n flex: 1;\n}\n.band-plugin-react-prompt-check {\n width: 14px;\n flex: none;\n color: var(--accent-text);\n}\n.band-plugin-react-prompt-sep {\n border: 0;\n height: var(--hairline);\n background: var(--rule);\n margin: 4px 6px;\n}\n.band-plugin-react-prompt-group {\n font-size: var(--fs-caption);\n color: var(--muted);\n padding: 4px 8px 2px;\n}\n.band-plugin-react-prompt-switch {\n flex: none;\n width: 28px;\n height: 16px;\n border-radius: 999px;\n background: var(--fill-3);\n position: relative;\n transition: background var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--panel);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: transform var(--sixteenth) var(--ease);\n}\n.band-plugin-react-prompt-switch:where([data-on]) {\n background: var(--primary);\n}\n.band-plugin-react-prompt-switch:where([data-on])::after {\n transform: translateX(12px);\n}\n.band-plugin-react-prompt-source {\n margin: 6px 10px 0;\n padding: 8px;\n border-radius: var(--r-lg);\n background: var(--sunk);\n display: grid;\n gap: 6px;\n}\n.band-plugin-react-prompt-source-h {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--fs-ui);\n}\n:where(.band-plugin-react-prompt-source-h, .band-plugin-react-prompt-preview-h) > .grow {\n flex: 1;\n}\n.band-plugin-react-prompt-drop {\n position: absolute;\n inset: 0;\n z-index: 24;\n display: grid;\n place-items: center;\n padding: 12px;\n text-align: center;\n border-radius: inherit;\n background: color-mix(in srgb, var(--accent-soft) 92%, transparent);\n color: var(--accent-text);\n font-size: var(--fs-ui);\n box-shadow: inset 0 0 0 1.5px var(--accent);\n pointer-events: none;\n}\n.band-plugin-react-prompt-preview {\n border: 0;\n padding: 10px;\n border-radius: var(--r-xl);\n background: var(--panel);\n color: var(--ink);\n box-shadow: var(--shadow-pop);\n max-width: min(960px, calc(100vw - 32px));\n max-height: calc(100vh - 64px);\n}\n.band-plugin-react-prompt-preview::backdrop {\n background: rgba(10, 12, 16, 0.5);\n}\n.band-plugin-react-prompt-preview-h {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 0 8px 4px;\n}\n.band-plugin-react-prompt-big {\n display: block;\n max-width: 100%;\n max-height: calc(100vh - 140px);\n margin: 0 auto;\n border-radius: var(--r);\n}\n.band-plugin-react-prompt-pre {\n margin: 0;\n padding: 10px 12px;\n border-radius: var(--r);\n background: var(--sunk);\n font-family: var(--mono);\n font-size: var(--fs-meta);\n white-space: pre-wrap;\n overflow: auto;\n overscroll-behavior: contain;\n max-height: calc(100vh - 160px);\n min-width: min(560px, calc(100vw - 64px));\n}\n@media (hover: hover) {\n .band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card > *) {\n opacity: 0;\n }\n .band-plugin-react-prompt-x:where(.band-plugin-react-prompt-card:hover > *, .band-plugin-react-prompt-card:focus-within > *) {\n opacity: 1;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .band-plugin-react-prompt-x,\n .band-plugin-react-prompt-switch,\n .band-plugin-react-prompt-switch::after {\n transition: none;\n }\n}\n.band-plugin-react-prompt-box.composer textarea[aria-invalid=true] {\n box-shadow: inset 0 -2px 0 var(--bad);\n}\n.band-plugin-react-prompt-box.composer textarea[aria-invalid=true]::placeholder {\n color: var(--bad);\n}\n.band-plugin-react-prompt-import {\n display: grid;\n gap: 8px;\n padding: 12px;\n}\n.band-plugin-react-prompt-import p {\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-ui);\n}\n.band-plugin-react-prompt-import-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n.band-plugin-react-prompt-card[data-compressed] {\n max-width: 320px;\n}\n.band-plugin-react-prompt-card[data-compressed] .band-plugin-react-prompt-open {\n padding: 6px 26px 6px 6px;\n}\n\n/* src/message/message.css */\n.band-plugin-react-msg {\n position: relative;\n display: grid;\n gap: 6px;\n min-width: 0;\n border-radius: var(--r);\n outline: none;\n}\n.band-plugin-react-msg:where(.fit) {\n justify-self: start;\n width: fit-content;\n max-width: 100%;\n}\n.band-plugin-react-msg:where(:focus-visible) {\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-msg-bar {\n justify-self: end;\n z-index: 2;\n display: flex;\n gap: 2px;\n padding: 3px;\n background: var(--panel);\n border-radius: var(--r);\n box-shadow: var(--shadow-pop);\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--sixteenth) var(--ease) var(--eighth), visibility 0s linear calc(var(--eighth) + var(--sixteenth));\n}\n:where(.band-plugin-react-msg:focus-within, .band-plugin-react-msg.open) > .band-plugin-react-msg-bar {\n opacity: 1;\n visibility: visible;\n transition: opacity var(--sixteenth) var(--ease);\n}\n@media (hover: hover) {\n :where(.band-plugin-react-msg:hover) > .band-plugin-react-msg-bar {\n opacity: 1;\n visibility: visible;\n transition: opacity var(--sixteenth) var(--ease);\n }\n}\n@media (hover: none) {\n .band-plugin-react-msg-bar {\n display: none;\n }\n}\n.band-plugin-react-msg-ib {\n width: 28px;\n height: 28px;\n display: inline-grid;\n place-items: center;\n border: 0;\n border-radius: 6px;\n background: none;\n color: var(--muted);\n padding: 0;\n transition: background var(--sixteenth) var(--ease);\n}\n.band-plugin-react-msg-ib:where(:hover, .on) {\n background: var(--fill-2);\n color: var(--ink);\n}\n.band-plugin-react-msg-ib:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n color: var(--ink);\n}\n.band-plugin-react-msg-ib:where(.done) {\n color: var(--ok);\n}\n:where(.band-plugin-react-msg-ib, .band-plugin-react-msg-mi, .band-plugin-react-msg-chip) svg {\n width: 16px;\n height: 16px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n.band-plugin-react-msg-menu {\n position: fixed;\n z-index: 1000;\n width: 248px;\n max-width: calc(100vw - 32px);\n display: grid;\n gap: 2px;\n padding: 8px;\n background: var(--panel);\n border-radius: var(--r-lg);\n box-shadow: var(--shadow-pop);\n animation: band-plugin-react-msg-in var(--sixteenth) var(--ease);\n}\n@keyframes band-plugin-react-msg-in {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n}\n.band-plugin-react-msg-emo {\n margin: 0;\n border: 0;\n min-width: 0;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 2px;\n padding: 2px 0 4px;\n}\n.band-plugin-react-msg-emo > button {\n height: 34px;\n display: grid;\n place-items: center;\n border: 0;\n border-radius: var(--r);\n background: none;\n font-size: 20px;\n line-height: 1;\n padding: 0;\n transition: background var(--sixteenth) var(--ease), transform var(--sixteenth) var(--ease);\n}\n.band-plugin-react-msg-emo > button:where(:hover) {\n background: var(--fill-2);\n transform: scale(1.08);\n}\n.band-plugin-react-msg-emo > button:where(.mine) {\n background: var(--accent-soft);\n box-shadow: inset 0 0 0 1px var(--accent);\n}\n.band-plugin-react-msg-emo > button:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-msg-sep {\n height: var(--hairline);\n margin: 2px 0 4px;\n background: var(--rule);\n}\n.band-plugin-react-msg-mi {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 6px 8px;\n border: 0;\n border-radius: var(--r-sm);\n background: none;\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-body);\n text-align: left;\n}\n.band-plugin-react-msg-mi svg {\n stroke: var(--muted);\n}\n.band-plugin-react-msg-mi:where(:hover, :focus-visible) {\n outline: none;\n background: var(--fill-2);\n}\n.band-plugin-react-msg-rx {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n align-items: center;\n}\n.band-plugin-react-msg-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 5px;\n height: 26px;\n padding: 0 9px;\n border: 0;\n border-radius: 999px;\n background: var(--fill);\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-ui);\n font-variant-numeric: tabular-nums;\n transition: background var(--sixteenth) var(--ease), opacity var(--sixteenth) var(--ease);\n}\nbutton.band-plugin-react-msg-chip:where(:hover) {\n background: var(--fill-2);\n}\n.band-plugin-react-msg-chip:where(.mine) {\n background: var(--accent-soft);\n color: var(--accent-text);\n box-shadow: inset 0 0 0 1px var(--accent);\n}\n.band-plugin-react-msg-chip:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-msg-chip:where(.pending) {\n opacity: 0.6;\n}\n.band-plugin-react-msg-chip:where(.add) {\n padding: 0 7px;\n color: var(--muted);\n opacity: 0;\n}\n:where(.band-plugin-react-msg:hover, .band-plugin-react-msg:focus-within, .band-plugin-react-msg.open) .band-plugin-react-msg-chip:where(.add) {\n opacity: 1;\n}\n@media (hover: none) {\n .band-plugin-react-msg-chip:where(.add) {\n opacity: 1;\n }\n}\n.band-plugin-react-msg-e {\n font-size: var(--fs-lead);\n line-height: 1;\n}\n.band-plugin-react-msg-tip {\n position: absolute;\n left: 0;\n bottom: calc(100% + 6px);\n z-index: 4;\n white-space: nowrap;\n padding: 4px 8px;\n border-radius: var(--r-sm);\n background: var(--ink);\n color: var(--panel);\n font-size: var(--fs-meta);\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--sixteenth) var(--ease);\n}\n:where(.band-plugin-react-msg-chip:hover, .band-plugin-react-msg-chip:focus-visible) > .band-plugin-react-msg-tip {\n opacity: 1;\n visibility: visible;\n}\n.band-plugin-react-msg-err {\n display: flex;\n gap: 6px;\n align-items: center;\n font-size: var(--fs-meta);\n color: var(--bad);\n}\n.band-plugin-react-msg-err > button {\n border: 0;\n padding: 0;\n background: none;\n color: var(--ink);\n font: inherit;\n text-decoration: underline;\n}\n.band-plugin-react-msg-sheetwrap {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 12px;\n}\n.band-plugin-react-msg-scrim {\n position: absolute;\n inset: 0;\n border: 0;\n padding: 0;\n background: color-mix(in srgb, black 36%, transparent);\n animation: band-plugin-react-msg-fade var(--eighth) var(--ease);\n}\n.band-plugin-react-msg-lifted {\n position: relative;\n margin: 0 16px;\n max-height: 36vh;\n overflow: hidden;\n padding: 12px;\n display: grid;\n gap: 6px;\n background: var(--panel);\n border-radius: var(--r-lg);\n box-shadow: var(--shadow-pop);\n pointer-events: none;\n}\n.band-plugin-react-msg-sheet {\n position: relative;\n display: grid;\n gap: 2px;\n padding: 8px 12px calc(20px + env(safe-area-inset-bottom));\n background: var(--panel);\n border-radius: var(--r-xl) var(--r-xl) 0 0;\n box-shadow: var(--shadow-pop);\n animation: band-plugin-react-msg-rise var(--eighth) var(--ease);\n}\n.band-plugin-react-msg-grab {\n width: 36px;\n height: 4px;\n margin: 0 auto 10px;\n border-radius: 2px;\n background: var(--fill-3);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo {\n gap: 8px;\n padding-bottom: 10px;\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo > button {\n height: 44px;\n font-size: 24px;\n background: var(--fill);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-emo > button:where(.mine) {\n background: var(--accent-soft);\n}\n:where(.band-plugin-react-msg-sheet) .band-plugin-react-msg-mi {\n padding: 12px 8px;\n font-size: var(--fs-lead);\n}\n@keyframes band-plugin-react-msg-fade {\n from {\n opacity: 0;\n }\n}\n@keyframes band-plugin-react-msg-rise {\n from {\n transform: translateY(24px);\n opacity: 0;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n :where(.band-plugin-react-msg-menu, .band-plugin-react-msg-sheet, .band-plugin-react-msg-scrim, .band-plugin-react-msg-bar, .band-plugin-react-msg-chip) {\n animation: none;\n transition: none;\n }\n}\n.band-plugin-react-atts {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin: 0;\n padding: 0;\n list-style: none;\n min-width: 0;\n}\n.band-plugin-react-atts-thumb {\n display: block;\n padding: 0;\n border: 0;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n overflow: hidden;\n cursor: zoom-in;\n}\n.band-plugin-react-atts-thumb:where(:hover) {\n box-shadow: 0 0 0 1px var(--rule-strong);\n}\n.band-plugin-react-atts-thumb:where(:hover) .band-plugin-react-atts-img {\n filter: brightness(0.94);\n}\n.band-plugin-react-atts-thumb:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-atts-pending {\n display: block;\n width: 96px;\n height: 72px;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n}\n.band-plugin-react-atts-pending[data-compact] {\n width: 40px;\n height: 30px;\n}\n.band-plugin-react-atts-img {\n display: block;\n max-width: 160px;\n max-height: 120px;\n min-width: 48px;\n min-height: 48px;\n object-fit: contain;\n}\n.band-plugin-react-atts-img:where([data-loading]) {\n width: 96px;\n height: 72px;\n background: var(--sunk);\n}\n.band-plugin-react-atts:where([data-compact]) {\n align-items: center;\n gap: 4px;\n}\n.band-plugin-react-atts:where([data-compact]) .band-plugin-react-atts-img {\n width: auto;\n height: 32px;\n min-width: 32px;\n max-width: 96px;\n min-height: 0;\n object-fit: cover;\n object-position: left top;\n border-radius: var(--r-sm);\n box-shadow: 0 0 0 1px var(--rule);\n}\n.band-plugin-react-atts-more {\n font-size: var(--fs-dense);\n color: var(--muted);\n}\n.band-plugin-react-atts-file {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr) auto auto;\n align-items: center;\n gap: 8px;\n max-width: 320px;\n padding: 6px 10px 6px 6px;\n border: 0;\n border-radius: var(--r-sm);\n background: var(--sunk);\n box-shadow: 0 0 0 1px var(--rule);\n color: var(--ink);\n font: inherit;\n font-size: var(--fs-dense);\n text-align: left;\n cursor: pointer;\n}\n.band-plugin-react-atts-file:where(:hover):not([data-deleted]) {\n background: var(--panel);\n}\n.band-plugin-react-atts-file[data-deleted] {\n color: var(--muted);\n cursor: default;\n}\n.band-plugin-react-atts-file:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-plugin-react-atts-ext {\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n border-radius: var(--r-sm);\n background: var(--panel);\n color: var(--muted);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.02em;\n}\n.band-plugin-react-atts-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-autospace: no-autospace;\n}\n.band-plugin-react-atts-size,\n.band-plugin-react-atts-act,\n.band-plugin-react-atts-count {\n color: var(--muted);\n white-space: nowrap;\n}\n.band-plugin-react-atts-act {\n color: var(--accent-text);\n}\n.band-plugin-react-atts-wait {\n display: block;\n margin: 24px;\n color: var(--muted);\n}\n.band-plugin-react-atts-wait:where(div) {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* src/memory/memory.css */\n.band-plugin-react-memo {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n width: fit-content;\n max-width: 100%;\n box-sizing: border-box;\n margin-top: 2px;\n border: 0;\n border-radius: 7px;\n padding: 5px 8px;\n background: var(--fill);\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-dense);\n line-height: 1.5;\n text-align: left;\n cursor: pointer;\n transition: background var(--sixteenth) var(--ease), color var(--sixteenth) var(--ease);\n}\n.band-plugin-react-memo:where(:hover) {\n background: var(--fill-2);\n color: var(--ink);\n}\n.band-plugin-react-memo:where(:focus-visible) {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-plugin-react-memo > svg {\n flex: none;\n width: 14px;\n height: 14px;\n margin-top: 2px;\n fill: none;\n stroke: var(--muted);\n stroke-width: 1.4;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.band-plugin-react-memo > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-memo-rejected {\n display: block;\n color: var(--warn);\n}\n\n/* src/toast/toast.css */\n.band-plugin-react-toast-stack {\n position: fixed;\n right: 20px;\n bottom: calc(60px + env(safe-area-inset-bottom, 0px));\n z-index: var(--layer-pop);\n width: min(340px, calc(100vw - 40px));\n display: grid;\n gap: 8px;\n}\n.band-plugin-react-toast {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr) auto;\n gap: 10px;\n align-items: center;\n padding: 10px 12px;\n border-radius: var(--r-lg);\n background: var(--panel);\n box-shadow: var(--shadow-pop);\n font-size: var(--fs-row);\n color: var(--ink);\n animation: band-plugin-react-toast-in var(--eighth) var(--ease);\n}\n@keyframes band-plugin-react-toast-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.band-plugin-react-toast-again {\n animation: none;\n}\n.band-plugin-react-toast-icon {\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n font-size: 10px;\n color: var(--panel);\n}\n.band-plugin-react-toast-icon:where(.ok) {\n background: var(--ok);\n}\n.band-plugin-react-toast-icon:where(.bad) {\n background: var(--bad);\n}\n.band-plugin-react-toast-icon:where(.busy) {\n border: 1.6px solid var(--accent);\n border-top-color: transparent;\n color: transparent;\n background: none;\n animation: band-plugin-react-toast-spin 900ms linear infinite;\n}\n@keyframes band-plugin-react-toast-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.band-plugin-react-toast-text {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-plugin-react-toast-detail {\n display: block;\n color: var(--muted);\n font-size: var(--fs-meta);\n overflow-wrap: anywhere;\n}\n.band-plugin-react-toast-act {\n font-size: var(--fs-meta);\n color: var(--ink);\n background: none;\n border: 0;\n font-family: inherit;\n text-decoration: underline;\n padding: 2px 4px;\n border-radius: 4px;\n}\n.band-plugin-react-toast-act:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n@media (prefers-reduced-motion: reduce) {\n .band-plugin-react-toast,\n .band-plugin-react-toast-icon:where(.busy) {\n animation: none;\n }\n}\n\n/* src/status/status.css */\n.band-plugin-react-status {\n display: grid;\n gap: 2px;\n min-width: 0;\n padding: 0 2px 0 4px;\n font-size: var(--fs-dense);\n color: var(--muted);\n}\n.band-plugin-react-status-head {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n color: var(--accent-text);\n}\n.band-plugin-react-status-who {\n font-weight: 600;\n}\n.band-plugin-react-status-context {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-status .band-plugin-react-status-glyph.glyph {\n --c: var(--accent);\n margin-left: 2px;\n}\n.band-plugin-react-status-spacer {\n flex: 1;\n}\n.band-plugin-react-status-elapsed {\n flex: none;\n color: var(--muted);\n font-variant-numeric: tabular-nums;\n}\n.band-plugin-react-status-note {\n padding-left: 22px;\n color: var(--ink);\n overflow-wrap: anywhere;\n}\n.band-plugin-react-status-action {\n padding-left: 22px;\n font-family: var(--mono);\n color: var(--muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-plugin-react-status-stall {\n padding-left: 22px;\n color: var(--warn);\n}\n.band-plugin-react-status-steps {\n display: grid;\n gap: 2px;\n margin: 0;\n padding: 0 0 0 22px;\n list-style: none;\n font-family: var(--mono);\n font-size: var(--fs-meta);\n color: var(--muted);\n}\n.band-plugin-react-status-steps > :where([data-state=done]) {\n color: var(--muted);\n}\n.band-plugin-react-status-steps > :where([data-state=now]) {\n color: var(--ink);\n}\n.band-plugin-react-status-stop {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n padding-left: 26px;\n font-size: var(--fs-dense);\n}\n.band-plugin-react-status-stop-note {\n color: var(--muted);\n}\n.band-plugin-react-stopped {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 6px;\n min-width: 0;\n padding: 0 2px 0 4px;\n font-size: var(--fs-row);\n color: var(--muted);\n}\n.band-plugin-react-stopped-text b {\n font-weight: 600;\n color: var(--ink);\n}\n.band-plugin-react-stopped-took {\n font-size: var(--fs-meta);\n font-variant-numeric: tabular-nums;\n}\n\n/* src/version-reference.css */\n.band-plugin-react-version-ref {\n display: inline-block;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n vertical-align: bottom;\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n font: inherit;\n text-align: left;\n}\n.band-plugin-react-version-ref:where(button) {\n cursor: pointer;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.band-plugin-react-version-ref:where(:focus-visible) {\n outline: none;\n border-radius: var(--r-sm);\n box-shadow: 0 0 0 2px var(--accent);\n}\n\n/* src/settings/settings.css */\n.band-sf {\n display: grid;\n grid-template-columns: 216px minmax(0, 1fr);\n min-height: 0;\n height: 100%;\n}\n.band-sf-nav {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 24px 12px 24px 20px;\n display: grid;\n gap: 16px;\n align-content: start;\n}\n.band-sf-head {\n display: grid;\n gap: 2px;\n min-width: 0;\n padding: 0 8px;\n}\n.band-sf-title {\n font-size: var(--fs-title);\n font-weight: 600;\n line-height: 1.3;\n}\n.band-sf-obj {\n font-size: var(--fs-ui);\n color: var(--muted);\n}\n.band-sf-grp {\n display: grid;\n gap: 1px;\n}\n.band-sf-grp > span {\n padding: 2px 8px;\n color: var(--muted);\n font-size: var(--fs-dense);\n}\n.band-sf-grp a {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 6px 8px;\n border-radius: var(--r);\n color: var(--ink);\n text-decoration: none;\n font-size: var(--fs-row);\n}\n.band-sf-grp a:hover {\n background: var(--fill);\n}\n.band-sf-grp a[aria-current=page] {\n background: var(--fill-2);\n font-weight: 500;\n}\n.band-sf-grp a:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-sf-grp a .band-sf-chev {\n display: none;\n color: var(--muted);\n}\n.band-sf-scroll {\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n}\n.band-sf-main {\n box-sizing: border-box;\n width: 100%;\n max-width: 824px;\n padding: 32px 32px 64px;\n display: grid;\n gap: 20px;\n align-content: start;\n}\n.band-sf-crumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n min-width: 0;\n color: var(--muted);\n font-size: var(--fs-dense);\n}\n.band-sf-crumb-in {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n min-width: 0;\n}\n.band-sf-crumb-ws {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n white-space: nowrap;\n}\n.band-sf-crumb-ws > span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.band-sf-crumb a,\n.band-sf-crumb button {\n min-width: 0;\n border: 0;\n padding: 0;\n background: none;\n color: var(--muted);\n font: inherit;\n text-decoration: none;\n border-radius: 4px;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n.band-sf-crumb button {\n text-align: start;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.band-sf-crumb a:hover,\n.band-sf-crumb button:hover {\n color: var(--ink);\n}\n.band-sf-crumb a:focus-visible,\n.band-sf-crumb button:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--accent);\n}\n.band-sf-back {\n display: inline-flex;\n align-self: start;\n justify-self: start;\n gap: 4px;\n color: var(--muted);\n text-decoration: none;\n font-size: var(--fs-ui);\n border-radius: 4px;\n}\n.band-sf-back-m {\n display: none;\n}\n.band-sf-back:hover {\n color: var(--ink);\n}\n.band-sf-back:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-sf-h {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n}\n.band-sf-h > div {\n display: grid;\n gap: 4px;\n min-width: 0;\n}\n.band-sf-h h1 {\n margin: 0;\n font-size: var(--fs-h2);\n font-weight: 600;\n line-height: 1.3;\n}\n.band-sf-h p {\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-ui);\n max-width: 560px;\n}\n.band-sf-h-a {\n flex: none;\n}\n.band-sf-sec {\n display: grid;\n gap: 10px;\n}\n.band-sf-sec h2 {\n margin: 0;\n font-size: var(--fs-lead);\n font-weight: 600;\n}\n.band-sf-sec > p {\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-ui);\n}\n.band-sf-rows {\n display: grid;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.band-sf-row {\n position: relative;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 2px 12px;\n align-items: center;\n padding: 10px 12px;\n margin: 0 -12px;\n border-radius: var(--r-lg);\n}\n.band-sf-row:hover {\n background: var(--fill);\n}\n.band-sf-row.is-new,\n.band-sf-row.is-new:hover {\n background: var(--ok-soft);\n}\n.band-sf-row-t {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px 8px;\n min-width: 0;\n}\n.band-sf-row-t b {\n font-weight: 600;\n overflow-wrap: anywhere;\n}\n.band-sf-row-link {\n color: inherit;\n text-decoration: none;\n border-radius: 4px;\n}\n.band-sf-row-link::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: var(--r-lg);\n}\n.band-sf-row-a {\n position: relative;\n z-index: 1;\n}\n.band-sf-row-link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-sf-row-m {\n grid-column: 1;\n display: flex;\n flex-wrap: wrap;\n gap: 2px 14px;\n color: var(--muted);\n font-size: var(--fs-dense);\n min-width: 0;\n}\n.band-sf-row-m > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-sf-row-a {\n grid-column: 2;\n grid-row: 1 / span 2;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.band-sf-row-a .btn {\n position: relative;\n z-index: 1;\n}\n.band-sf-chev {\n color: var(--muted);\n}\n.band-sf-mono {\n font-family: var(--mono);\n font-size: 0.92em;\n}\n.band-sf-facts {\n display: grid;\n gap: 6px 16px;\n margin: 0;\n font-size: var(--fs-ui);\n}\n.band-sf-fact {\n display: grid;\n grid-template-columns: 112px minmax(0, 1fr);\n gap: 16px;\n}\n.band-sf-facts dt {\n color: var(--muted);\n}\n.band-sf-facts dd {\n margin: 0;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.band-sf-dz {\n display: grid;\n gap: 10px;\n padding-top: 8px;\n}\n.band-sf-dz h2 {\n margin: 0;\n font-size: var(--fs-lead);\n font-weight: 600;\n}\n.band-sf-dz-r {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.band-sf-dz-r > div {\n display: grid;\n gap: 2px;\n min-width: 0;\n}\n.band-sf-dz-r span {\n color: var(--muted);\n font-size: var(--fs-dense);\n}\n.band-sf-dz-r .btn {\n flex: none;\n}\n.band-sf-empty,\n.band-sf .band-sf-empty.rest {\n display: grid;\n justify-items: start;\n text-align: start;\n gap: 10px;\n padding: 24px 0;\n max-width: 480px;\n}\n.band-sf-empty p {\n margin: 0;\n color: var(--muted);\n}\n.band-sf-error {\n min-width: 0;\n}\n.band-sf-load {\n padding: 40px 0;\n display: grid;\n justify-items: start;\n}\n.band-sf-ok {\n margin: 0;\n color: var(--ok);\n font-size: var(--fs-ui);\n}\n.band-sf-muted {\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-ui);\n}\n.band-sf-banner {\n margin: 0;\n padding: 10px 12px;\n border-radius: var(--r-lg);\n background: var(--fill);\n font-size: var(--fs-ui);\n}\n.band-sf-banner.is-warn {\n display: flex;\n align-items: center;\n gap: 8px;\n background: var(--warn-soft);\n}\n.band-sf-form {\n display: grid;\n gap: 16px;\n max-width: 560px;\n min-width: 0;\n}\n.band-sf-form code {\n overflow-wrap: anywhere;\n}\n.band-sf-fld {\n display: grid;\n gap: 6px;\n min-width: 0;\n}\n.band-sf-fld > label {\n font-size: var(--fs-ui);\n font-weight: 500;\n}\n.band-sf-fld .field {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n}\n.band-sf-fld textarea.field {\n resize: vertical;\n line-height: 1.5;\n}\n.band-sf-req {\n margin-left: 6px;\n color: var(--muted);\n font-weight: 400;\n}\n.band-sf-optional {\n margin-left: 6px;\n color: var(--muted);\n font-weight: 400;\n}\n.band-sf-one {\n display: grid;\n gap: 10px;\n min-width: 0;\n}\n.band-sf-one fieldset {\n margin: 0;\n padding: 0;\n border: 0;\n min-width: 0;\n display: grid;\n gap: 10px;\n}\n.band-sf-choices {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n}\n.band-sf-hint {\n color: var(--muted);\n font-size: var(--fs-dense);\n}\n.band-sf-hint a,\n.band-sf-fld .field-note a,\n.band-sf-muted a {\n color: var(--accent-text);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.band-sf-err {\n margin: 0;\n color: var(--bad);\n font-size: var(--fs-ui);\n}\n.band-sf-fail {\n grid-column: 1 / -1;\n display: flex;\n align-items: flex-start;\n gap: 8px;\n overflow-wrap: anywhere;\n}\n.band-sf-given {\n margin: 0;\n padding: 10px 12px;\n border-radius: var(--r-lg);\n background: var(--fill);\n font-size: var(--fs-ui);\n}\ndl.band-sf-given {\n display: grid;\n grid-template-columns: 56px minmax(0, 1fr);\n gap: 2px 12px;\n}\ndl.band-sf-given dt {\n color: var(--muted);\n}\ndl.band-sf-given dd {\n margin: 0;\n min-width: 0;\n}\ndl.band-sf-given p {\n grid-column: 1 / -1;\n margin: 0;\n color: var(--muted);\n font-size: var(--fs-dense);\n}\n.band-sf-stepback {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n align-self: start;\n justify-self: start;\n padding: 0;\n border: 0;\n background: none;\n color: var(--muted);\n font: inherit;\n font-size: var(--fs-ui);\n cursor: pointer;\n border-radius: 4px;\n}\n.band-sf-stepback:hover {\n color: var(--ink);\n}\n.band-sf-stepback:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);\n}\n.band-sf-acts {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n}\n.band-sf-acts-end {\n justify-content: flex-end;\n}\n.band-sf-state {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--muted);\n font-size: var(--fs-ui);\n}\n.band-settings-no-access {\n display: grid;\n gap: 10px;\n justify-items: start;\n max-width: 560px;\n padding-top: 8px;\n}\n.band-settings-no-access h2 {\n margin: 0;\n font-size: var(--fs-title);\n}\n.band-settings-no-access p {\n margin: 0;\n color: var(--muted);\n}\n.band-sf-dialog {\n box-sizing: border-box;\n width: min(460px, calc(100vw - 32px));\n max-height: calc(100dvh - 32px);\n overflow: auto;\n overscroll-behavior: contain;\n border: 0;\n border-radius: var(--r-xl);\n box-shadow: var(--shadow-pop);\n background: var(--panel);\n color: var(--ink);\n padding: 22px 24px;\n}\n.band-sf-dialog[open] {\n display: grid;\n gap: 14px;\n}\n.band-sf-dialog::backdrop {\n background: var(--scrim);\n}\n.band-sf-dialog h2 {\n margin: 0;\n font-size: var(--fs-title);\n overflow-wrap: anywhere;\n}\n.band-sf-dialog ul {\n margin: 0;\n padding-left: 18px;\n display: grid;\n gap: 4px;\n}\n.band-sf-row-x {\n grid-column: 1 / -1;\n margin-top: 8px;\n min-width: 0;\n}\n.band-sf-row.has-lead {\n grid-template-columns: auto minmax(0, 1fr) auto;\n}\n.band-sf-row-l {\n grid-column: 1;\n grid-row: 1 / span 2;\n display: flex;\n align-items: center;\n}\n.band-sf-row.has-lead .band-sf-row-t,\n.band-sf-row.has-lead .band-sf-row-m {\n grid-column: 2;\n}\n.band-sf-row.has-lead .band-sf-row-a {\n grid-column: 3;\n}\n@media (max-width: 600px) {\n .band-sf {\n grid-template-columns: minmax(0, 1fr);\n }\n .band-sf[data-view=page] .band-sf-nav {\n display: none;\n }\n .band-sf[data-view=index] .band-sf-scroll {\n display: none;\n }\n .band-sf-nav {\n padding: 16px;\n }\n .band-sf-grp a {\n padding: 10px 8px;\n font-size: var(--fs-body);\n }\n .band-sf-grp a .band-sf-chev {\n display: inline;\n }\n .band-sf-grp a[aria-current=page] {\n background: none;\n font-weight: 400;\n }\n .band-sf-main {\n padding: 12px 16px 48px;\n gap: 16px;\n }\n .band-sf-back-m {\n display: inline-flex;\n }\n .band-sf-h {\n display: grid;\n gap: 10px;\n }\n .band-sf-h-a .btn {\n justify-self: start;\n }\n .band-sf-row-a {\n grid-column: 1 / -1;\n grid-row: auto;\n justify-content: flex-start;\n margin-top: 4px;\n }\n .band-sf-row-a .band-sf-chev {\n margin-left: auto;\n }\n .band-sf-row-a:has(.band-sf-chev:only-child) {\n grid-column: 2;\n grid-row: 1 / span 2;\n justify-content: flex-end;\n margin-top: 0;\n }\n .band-sf-row > .band-sf-acts {\n grid-column: 1 / -1;\n justify-content: flex-start;\n margin-top: 4px;\n }\n .band-sf-fact {\n grid-template-columns: 88px minmax(0, 1fr);\n gap: 12px;\n }\n .band-sf-dz-r {\n display: grid;\n gap: 8px;\n }\n .band-sf-dz-r .btn {\n justify-self: start;\n }\n .band-sf-dialog {\n padding: 18px 16px;\n }\n .band-sf-row.has-lead .band-sf-row-a {\n grid-column: 2 / -1;\n }\n}\n";
4
4
  let el = document.head.querySelector("style[data-band-style=\"@kanyun-ai-infra/band-plugin-react\"]");
5
5
  if (!el) {
6
6
  el = document.createElement("style");
@@ -20,14 +20,37 @@ import {
20
20
  InfoNote,
21
21
  LogoLockup,
22
22
  PaneHeader,
23
+ SettingsActions,
24
+ SettingsBack,
25
+ SettingsChoices,
26
+ SettingsDanger,
27
+ SettingsDangerRow,
28
+ SettingsDialog,
29
+ SettingsEmpty,
30
+ SettingsFacts,
31
+ SettingsField,
32
+ SettingsForm,
33
+ SettingsHead,
34
+ SettingsLayout,
35
+ SettingsLoading,
36
+ SettingsNoAccess,
37
+ SettingsNotice,
38
+ SettingsReadError,
39
+ SettingsRow,
40
+ SettingsRows,
41
+ SettingsSaveState,
42
+ SettingsSaved,
43
+ SettingsSection,
44
+ SettingsSingle,
23
45
  WorkshopEmblem,
24
46
  WorkshopIcon,
25
47
  agentInstrument,
26
48
  avatarInitial,
27
49
  avatarTone,
28
50
  instrumentOf,
29
- memberOrder
30
- } from "./chunk-ULDBT77D.js";
51
+ memberOrder,
52
+ settingsLinkHandler
53
+ } from "./chunk-HX653UQN.js";
31
54
  import {
32
55
  scrollIntoPanel
33
56
  } from "./chunk-VKASR4EL.js";
@@ -2384,18 +2407,18 @@ function PromptInput(props) {
2384
2407
  }
2385
2408
  void doSubmit();
2386
2409
  };
2387
- const pending = uploading(draft).length;
2410
+ const pending2 = uploading(draft).length;
2388
2411
  const failures = failed(draft).length;
2389
2412
  useEffect7(() => {
2390
2413
  if (!waiting) return;
2391
2414
  if (failures > 0) {
2392
2415
  setWaiting(false);
2393
2416
  setNotice(failedNotice(failed(latest.current), files.current));
2394
- } else if (pending === 0) {
2417
+ } else if (pending2 === 0) {
2395
2418
  if (!hasContent(latest.current)) setWaiting(false);
2396
2419
  else if (!props.busy && !importing) void doSubmit();
2397
2420
  }
2398
- }, [waiting, pending, failures, doSubmit, props.busy, importing]);
2421
+ }, [waiting, pending2, failures, doSubmit, props.busy, importing]);
2399
2422
  useLayoutEffect2(() => {
2400
2423
  const el = textRef.current;
2401
2424
  if (!el || CSS?.supports?.("field-sizing", "content")) return;
@@ -2524,7 +2547,7 @@ function PromptInput(props) {
2524
2547
  const activeSource = panel && typeof panel === "object" && "source" in panel ? sources.find((s) => s.id === panel.source) : void 0;
2525
2548
  const activeImport = panel && typeof panel === "object" && "importFrom" in panel ? imports[panel.importFrom] : void 0;
2526
2549
  const previewItem = preview ? draft.items.find((i) => i.key === preview) : void 0;
2527
- const sendState = waiting ? `\u7B49 ${pending} \u4E2A\u9644\u4EF6\u4F20\u5B8C\u5C31\u53D1\u9001\uFF0C\u518D\u70B9\u4E00\u6B21\u53D6\u6D88` : posting ? "\u53D1\u9001\u4E2D" : submitLabel;
2550
+ const sendState = waiting ? `\u7B49 ${pending2} \u4E2A\u9644\u4EF6\u4F20\u5B8C\u5C31\u53D1\u9001\uFF0C\u518D\u70B9\u4E00\u6B21\u53D6\u6D88` : posting ? "\u53D1\u9001\u4E2D" : submitLabel;
2528
2551
  const keyHint = `Enter ${submitText ?? "\u53D1\u9001"}\uFF0CShift+Enter \u6362\u884C`;
2529
2552
  const failedLines = uploadFailureLines(draft.items);
2530
2553
  return /* @__PURE__ */ jsxs10(
@@ -2908,7 +2931,7 @@ function PromptInput(props) {
2908
2931
  " \u4E2A"
2909
2932
  ] })
2910
2933
  ] }),
2911
- /* @__PURE__ */ jsx11("span", { className: "sr-only", "aria-live": "polite", children: pending > 0 ? `${pending} \u4E2A\u9644\u4EF6\u4E0A\u4F20\u4E2D` : "" }),
2934
+ /* @__PURE__ */ jsx11("span", { className: "sr-only", "aria-live": "polite", children: pending2 > 0 ? `${pending2} \u4E2A\u9644\u4EF6\u4E0A\u4F20\u4E2D` : "" }),
2912
2935
  previewItem && /* @__PURE__ */ jsx11(
2913
2936
  Preview,
2914
2937
  {
@@ -3377,13 +3400,13 @@ function flushAllDrafts() {
3377
3400
  }
3378
3401
  function useDraft(key) {
3379
3402
  const [draft, setDraft] = useState11(() => (key ? read(key) : null) ?? emptyDraft());
3380
- const pending = useRef8(null);
3403
+ const pending2 = useRef8(null);
3381
3404
  const timer = useRef8(void 0);
3382
3405
  const lost = useRef8(false);
3383
3406
  const flush = useCallback3(() => {
3384
3407
  clearTimeout(timer.current);
3385
- const p = pending.current;
3386
- pending.current = null;
3408
+ const p = pending2.current;
3409
+ pending2.current = null;
3387
3410
  if (p) {
3388
3411
  const written = write(p.key, p.d);
3389
3412
  lost.current = hasContent(p.d) && (!written || p.d.items.length !== persistable(p.d).items.length);
@@ -3401,7 +3424,7 @@ function useDraft(key) {
3401
3424
  (d) => {
3402
3425
  setDraft(d);
3403
3426
  if (!key) return;
3404
- pending.current = { key, d };
3427
+ pending2.current = { key, d };
3405
3428
  clearTimeout(timer.current);
3406
3429
  if (!hasContent(d)) flush();
3407
3430
  else timer.current = setTimeout(flush, 300);
@@ -3435,14 +3458,14 @@ var same = (a, b) => a.kind === b.kind && a.id === b.id;
3435
3458
  function reactedBy(r, me) {
3436
3459
  return Boolean(r?.actors.some((a) => same(a, me)));
3437
3460
  }
3438
- function mergeReactions(live, pending, me) {
3461
+ function mergeReactions(live, pending2, me) {
3439
3462
  const out = (live ?? []).map((r) => ({
3440
3463
  emoji: r.emoji,
3441
3464
  actors: [...r.actors],
3442
3465
  mine: reactedBy(r, me),
3443
3466
  pending: false
3444
3467
  }));
3445
- for (const [emoji, p] of pending) {
3468
+ for (const [emoji, p] of pending2) {
3446
3469
  const hit = out.find((r) => r.emoji === emoji);
3447
3470
  if (p.on) {
3448
3471
  if (!hit) out.push({ emoji, actors: [me], mine: true, pending: true });
@@ -3459,8 +3482,8 @@ function mergeReactions(live, pending, me) {
3459
3482
  }
3460
3483
  return out.filter((r) => r.actors.length > 0);
3461
3484
  }
3462
- function settledPending(live, pending, me) {
3463
- return [...pending].filter(([emoji, p]) => {
3485
+ function settledPending(live, pending2, me) {
3486
+ return [...pending2].filter(([emoji, p]) => {
3464
3487
  if (p.state !== "sent") return false;
3465
3488
  return reactedBy(
3466
3489
  live?.find((r) => r.emoji === emoji),
@@ -3871,7 +3894,7 @@ async function copyText(text) {
3871
3894
  function useReactionPatches(ctx, base) {
3872
3895
  const [patches, setPatches] = useState13({ base, map: /* @__PURE__ */ new Map() });
3873
3896
  useEffect10(() => {
3874
- let alive = true;
3897
+ let alive2 = true;
3875
3898
  const seq3 = /* @__PURE__ */ new Map();
3876
3899
  const off = ctx.events.subscribe("reaction.changed", (e) => {
3877
3900
  const threadId = e.payload.threadId;
@@ -3880,7 +3903,7 @@ function useReactionPatches(ctx, base) {
3880
3903
  seq3.set(threadId, n);
3881
3904
  ctx.threads.comments(threadId).then(
3882
3905
  (comments) => {
3883
- if (!alive || seq3.get(threadId) !== n) return;
3906
+ if (!alive2 || seq3.get(threadId) !== n) return;
3884
3907
  setPatches((p) => {
3885
3908
  const map2 = new Map(p.base === base ? p.map : []);
3886
3909
  for (const c of comments) map2.set(c.id, c.reactions);
@@ -3892,7 +3915,7 @@ function useReactionPatches(ctx, base) {
3892
3915
  );
3893
3916
  });
3894
3917
  return () => {
3895
- alive = false;
3918
+ alive2 = false;
3896
3919
  off();
3897
3920
  };
3898
3921
  }, [ctx, base]);
@@ -3951,7 +3974,7 @@ function Message({
3951
3974
  const system = c.kind === "system";
3952
3975
  const react = ctx.threads.react;
3953
3976
  const canReact = !system && Boolean(react) && ctx.member.can("comment");
3954
- const [pending, setPending] = useState13(/* @__PURE__ */ new Map());
3977
+ const [pending2, setPending] = useState13(/* @__PURE__ */ new Map());
3955
3978
  const [failed2, setFailed] = useState13();
3956
3979
  const [menu, setMenu] = useState13(null);
3957
3980
  const [sheet, setSheet] = useState13(false);
@@ -3962,7 +3985,7 @@ function Message({
3962
3985
  const moreBtn = useRef10(null);
3963
3986
  const addBtn = useRef10(null);
3964
3987
  useEffect10(() => {
3965
- const done = settledPending(reactions, pending, me);
3988
+ const done = settledPending(reactions, pending2, me);
3966
3989
  if (done.length === 0) return;
3967
3990
  setPending((p) => {
3968
3991
  const next = new Map(p);
@@ -3975,7 +3998,7 @@ function Message({
3975
3998
  const t = setTimeout(() => setCopied(false), COPIED_MS);
3976
3999
  return () => clearTimeout(t);
3977
4000
  }, [copied]);
3978
- const shown = mergeReactions(reactions, pending, me);
4001
+ const shown = mergeReactions(reactions, pending2, me);
3979
4002
  const toggle = (emoji, on) => {
3980
4003
  if (!react || !canReact) return;
3981
4004
  const target = on ?? !shown.find((r) => r.emoji === emoji)?.mine;
@@ -5286,6 +5309,232 @@ function Markdown({ text, breaks = false }) {
5286
5309
  const tree = useMemo3(() => parseMarkdown(text), [text]);
5287
5310
  return /* @__PURE__ */ jsx19(Fragment13, { children: render(tree, breaks) });
5288
5311
  }
5312
+
5313
+ // src/settings/frame.tsx
5314
+ import {
5315
+ useCallback as useCallback6,
5316
+ useEffect as useEffect12,
5317
+ useRef as useRef12,
5318
+ useState as useState14,
5319
+ useSyncExternalStore as useSyncExternalStore6
5320
+ } from "react";
5321
+ import { Fragment as Fragment14, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
5322
+ function settingsNavigate(ctx, target) {
5323
+ leaveThen(
5324
+ () => ctx.app.navigate({ page: target.page, ...target.params ? { params: target.params } : {} })
5325
+ );
5326
+ }
5327
+ function settingsLink(ctx, page, params) {
5328
+ return settingsLinkHandler((t) => settingsNavigate(ctx, t), {
5329
+ page,
5330
+ ...params ? { params } : {}
5331
+ });
5332
+ }
5333
+ var NARROW = "(max-width: 600px)";
5334
+ function useNarrow() {
5335
+ return useSyncExternalStore6(
5336
+ (fn) => {
5337
+ const m = window.matchMedia?.(NARROW);
5338
+ m?.addEventListener("change", fn);
5339
+ return () => m?.removeEventListener("change", fn);
5340
+ },
5341
+ () => window.matchMedia?.(NARROW).matches ?? false,
5342
+ () => false
5343
+ );
5344
+ }
5345
+ var dirtyProbe = null;
5346
+ var pendingLeave = null;
5347
+ var leaveWatchers = /* @__PURE__ */ new Set();
5348
+ var notifyLeave = () => {
5349
+ for (const fn of [...leaveWatchers]) fn();
5350
+ };
5351
+ function formChanged() {
5352
+ return dirtyProbe?.() ?? false;
5353
+ }
5354
+ function controlValue(el) {
5355
+ if (el instanceof HTMLInputElement)
5356
+ return el.type === "checkbox" || el.type === "radio" ? String(el.checked) : el.value;
5357
+ if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return el.value;
5358
+ return "";
5359
+ }
5360
+ var inForm = (el) => el.closest("form") !== null;
5361
+ function useLeaveGuard(root) {
5362
+ useEffect12(() => {
5363
+ const el = root.current;
5364
+ if (!el) return;
5365
+ pendingLeave = null;
5366
+ const baseline = /* @__PURE__ */ new Map();
5367
+ const add = (node) => {
5368
+ if (node.matches("input, textarea, select") && inForm(node) && !baseline.has(node))
5369
+ baseline.set(node, controlValue(node));
5370
+ };
5371
+ const snap = (node) => {
5372
+ if (node instanceof Element) add(node);
5373
+ for (const child of node.querySelectorAll("input, textarea, select")) add(child);
5374
+ };
5375
+ snap(el);
5376
+ const observer = typeof MutationObserver === "function" ? new MutationObserver((records) => {
5377
+ for (const r of records)
5378
+ for (const n of r.addedNodes) if (n instanceof Element) snap(n);
5379
+ }) : null;
5380
+ observer?.observe(el, { childList: true, subtree: true });
5381
+ const probe = () => {
5382
+ for (const [node, was] of baseline) {
5383
+ if (!node.isConnected) continue;
5384
+ if (controlValue(node) !== was) return true;
5385
+ }
5386
+ return false;
5387
+ };
5388
+ dirtyProbe = probe;
5389
+ return () => {
5390
+ observer?.disconnect();
5391
+ if (dirtyProbe === probe) dirtyProbe = null;
5392
+ };
5393
+ }, [root]);
5394
+ }
5395
+ function leaveThen(go) {
5396
+ if (!formChanged()) {
5397
+ go();
5398
+ return;
5399
+ }
5400
+ pendingLeave = go;
5401
+ notifyLeave();
5402
+ }
5403
+ function usePendingLeave() {
5404
+ return useSyncExternalStore6(
5405
+ (fn) => {
5406
+ leaveWatchers.add(fn);
5407
+ return () => {
5408
+ leaveWatchers.delete(fn);
5409
+ };
5410
+ },
5411
+ () => pendingLeave !== null,
5412
+ () => false
5413
+ );
5414
+ }
5415
+ function SettingsLeaveDialog() {
5416
+ const open = usePendingLeave();
5417
+ if (!open) return null;
5418
+ const stay = () => {
5419
+ pendingLeave = null;
5420
+ notifyLeave();
5421
+ };
5422
+ const leave = () => {
5423
+ const go = pendingLeave;
5424
+ pendingLeave = null;
5425
+ notifyLeave();
5426
+ go?.();
5427
+ };
5428
+ return /* @__PURE__ */ jsx20(
5429
+ SettingsDialog,
5430
+ {
5431
+ title: "\u653E\u5F03\u6CA1\u4FDD\u5B58\u7684\u5185\u5BB9\uFF1F",
5432
+ onClose: stay,
5433
+ actions: /* @__PURE__ */ jsxs18(Fragment14, { children: [
5434
+ /* @__PURE__ */ jsx20("button", { type: "button", className: "btn", onClick: stay, children: "\u7EE7\u7EED\u586B\u5199" }),
5435
+ /* @__PURE__ */ jsx20("button", { type: "button", className: "btn primary", onClick: leave, children: "\u653E\u5F03\u5E76\u79BB\u5F00" })
5436
+ ] }),
5437
+ children: /* @__PURE__ */ jsx20("p", { children: "\u8FD9\u4E00\u9875\u586B\u7684\u5185\u5BB9\u8FD8\u6CA1\u4FDD\u5B58\uFF0C\u79BB\u5F00\u540E\u4E0D\u4F1A\u7559\u5728\u8FD9\u91CC\uFF0C\u4E5F\u4E0D\u4F1A\u5B58\u5728\u6D4F\u89C8\u5668\u91CC\u3002" })
5438
+ }
5439
+ );
5440
+ }
5441
+ function SettingsFrame({
5442
+ ctx,
5443
+ navLabel,
5444
+ title,
5445
+ obj,
5446
+ crumb,
5447
+ groups,
5448
+ current,
5449
+ view = "page",
5450
+ back,
5451
+ backMobile,
5452
+ children: children2
5453
+ }) {
5454
+ const mainRef = useRef12(null);
5455
+ useLeaveGuard(mainRef);
5456
+ return /* @__PURE__ */ jsxs18(Fragment14, { children: [
5457
+ /* @__PURE__ */ jsx20(
5458
+ SettingsLayout,
5459
+ {
5460
+ navLabel,
5461
+ title,
5462
+ obj,
5463
+ crumb,
5464
+ groups,
5465
+ current,
5466
+ view,
5467
+ back,
5468
+ backMobile,
5469
+ onNavigate: (t) => settingsNavigate(ctx, t),
5470
+ mainRef,
5471
+ children: children2
5472
+ }
5473
+ ),
5474
+ /* @__PURE__ */ jsx20(SettingsLeaveDialog, {})
5475
+ ] });
5476
+ }
5477
+ var pending = {};
5478
+ var PENDING_TTL_MS = 1e4;
5479
+ var alive = (at) => Date.now() - at < PENDING_TTL_MS;
5480
+ function markFresh(slug, id) {
5481
+ markFreshMany(slug, [id]);
5482
+ }
5483
+ function markFreshMany(slug, ids) {
5484
+ pending = { ...pending, fresh: { slug, ids, at: Date.now() } };
5485
+ }
5486
+ function enterSection(slug) {
5487
+ const f = pending.fresh;
5488
+ if (f && f.slug !== slug) pending = { ...pending, fresh: void 0 };
5489
+ const n = pending.notice;
5490
+ if (n && n.slug !== slug) pending = { ...pending, notice: void 0 };
5491
+ }
5492
+ function peekFresh(slug) {
5493
+ return peekFreshAll(slug)[0] ?? null;
5494
+ }
5495
+ function peekFreshAll(slug) {
5496
+ const f = pending.fresh;
5497
+ return f && f.slug === slug && alive(f.at) ? f.ids : [];
5498
+ }
5499
+ function clearFresh() {
5500
+ pending = { ...pending, fresh: void 0 };
5501
+ }
5502
+ function markNotice(slug, text) {
5503
+ pending = { ...pending, notice: { slug, text, at: Date.now() } };
5504
+ }
5505
+ function takeNotice(slug) {
5506
+ const n = pending.notice;
5507
+ pending = { ...pending, notice: void 0 };
5508
+ return n && n.slug === slug && alive(n.at) ? n.text : null;
5509
+ }
5510
+ function useFreshRow(slug) {
5511
+ return useFreshRows(slug)[0] ?? null;
5512
+ }
5513
+ function useFreshRows(slug) {
5514
+ const [ids] = useState14(() => peekFreshAll(slug));
5515
+ useEffect12(() => {
5516
+ if (ids.length > 0) clearFresh();
5517
+ }, [ids]);
5518
+ return ids;
5519
+ }
5520
+ function useSavedNote() {
5521
+ const [note, setNote] = useState14("");
5522
+ const flash = useCallback6((text) => setNote(text), []);
5523
+ useEffect12(() => {
5524
+ if (!note) return;
5525
+ const timer = setTimeout(() => setNote(""), 2e3);
5526
+ return () => clearTimeout(timer);
5527
+ }, [note]);
5528
+ return [note, flash];
5529
+ }
5530
+ function useCrossPageNotice(slug) {
5531
+ const [note, flash] = useSavedNote();
5532
+ useEffect12(() => {
5533
+ const text = takeNotice(slug);
5534
+ if (text) flash(text);
5535
+ }, [slug, flash]);
5536
+ return [note, flash];
5537
+ }
5289
5538
  export {
5290
5539
  AgentAvatar,
5291
5540
  Avatar,
@@ -5343,6 +5592,29 @@ export {
5343
5592
  STATUS_CHIP,
5344
5593
  STOPPED_UNDONE,
5345
5594
  STOP_COST,
5595
+ SettingsActions,
5596
+ SettingsBack,
5597
+ SettingsChoices,
5598
+ SettingsDanger,
5599
+ SettingsDangerRow,
5600
+ SettingsDialog,
5601
+ SettingsEmpty,
5602
+ SettingsFacts,
5603
+ SettingsField,
5604
+ SettingsForm,
5605
+ SettingsFrame,
5606
+ SettingsHead,
5607
+ SettingsLayout,
5608
+ SettingsLoading,
5609
+ SettingsNoAccess,
5610
+ SettingsNotice,
5611
+ SettingsReadError,
5612
+ SettingsRow,
5613
+ SettingsRows,
5614
+ SettingsSaveState,
5615
+ SettingsSaved,
5616
+ SettingsSection,
5617
+ SettingsSingle,
5346
5618
  StatusMessage,
5347
5619
  StopTurn,
5348
5620
  TARGET_REPO_DOCS,
@@ -5367,6 +5639,7 @@ export {
5367
5639
  avatarTone,
5368
5640
  canRestoreProject,
5369
5641
  checkFiles,
5642
+ clearFresh,
5370
5643
  composerSpendLine,
5371
5644
  createState,
5372
5645
  credentialOptionLabel,
@@ -5377,6 +5650,7 @@ export {
5377
5650
  draftFileBytes,
5378
5651
  durationText,
5379
5652
  emptyDraft,
5653
+ enterSection,
5380
5654
  entriesFor,
5381
5655
  errorRepo,
5382
5656
  errorRequestAccessUrl,
@@ -5413,8 +5687,12 @@ export {
5413
5687
  isProvisionFailure,
5414
5688
  isThreadTail,
5415
5689
  itemKey,
5690
+ leaveThen,
5416
5691
  loadVersionReferences,
5417
5692
  localDay,
5693
+ markFresh,
5694
+ markFreshMany,
5695
+ markNotice,
5418
5696
  markdownOf,
5419
5697
  memberName,
5420
5698
  memberOrder,
@@ -5427,6 +5705,8 @@ export {
5427
5705
  modelHintText,
5428
5706
  parseDraft,
5429
5707
  parseMemoryItem,
5708
+ peekFresh,
5709
+ peekFreshAll,
5430
5710
  persistable,
5431
5711
  personalImportSource,
5432
5712
  personalImportSources,
@@ -5456,6 +5736,9 @@ export {
5456
5736
  roleLabel,
5457
5737
  saveDraft,
5458
5738
  scrollIntoPanel,
5739
+ settingsLink,
5740
+ settingsLinkHandler,
5741
+ settingsNavigate,
5459
5742
  settledPending,
5460
5743
  shortTime,
5461
5744
  shortWhen,
@@ -5465,6 +5748,7 @@ export {
5465
5748
  stopQueuedNote,
5466
5749
  stoppedTurnText,
5467
5750
  takeDraft,
5751
+ takeNotice,
5468
5752
  targetRepoErrorId,
5469
5753
  threadConfirmation,
5470
5754
  threadPath,
@@ -5479,16 +5763,22 @@ export {
5479
5763
  useAppData,
5480
5764
  useArtifactRole,
5481
5765
  useComposition,
5766
+ useCrossPageNotice,
5482
5767
  useCtxData,
5483
5768
  useDraft,
5484
5769
  useElapsed,
5770
+ useFreshRow,
5771
+ useFreshRows,
5485
5772
  useHandToAgent,
5773
+ useLeaveGuard,
5486
5774
  useMembers,
5487
5775
  useMessageList,
5776
+ useNarrow,
5488
5777
  useNow,
5489
5778
  useProjectAttachments,
5490
5779
  useReactionPatches,
5491
5780
  useRoute,
5781
+ useSavedNote,
5492
5782
  useSelectedArtifact,
5493
5783
  useSelectedEntity,
5494
5784
  useSettledText,