@inkandswitch/patchwork-pkg-base 0.0.50 → 0.0.51

package/packages/packages/dist/index.js

@@ -3,7 +3,1022 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('@layer package {\n  :root,\n  :host,\n  [theme] {\n    /* Surface + ink: a tool derives from --editor-*. */\n    --pw-packages-fill: var(--editor-fill, white);\n    --pw-packages-line: var(--editor-line, black);\n    --pw-packages-family: var(--editor-family-sans, system-ui, sans-serif);\n    --pw-packages-family-code: var(--editor-family-code, ui-monospace, monospace);\n\n    --pw-packages-muted: color-mix(\n      in oklch,\n      var(--pw-packages-line),\n      var(--pw-packages-fill) 45%\n    );\n    --pw-packages-faint: color-mix(\n      in oklch,\n      var(--pw-packages-line),\n      var(--pw-packages-fill) 62%\n    );\n    /* Dividers should recede into the canvas, with only a trace of the\n       secondary colour to distinguish adjacent areas. */\n    --pw-packages-border: color-mix(\n      in oklch,\n      var(--studio-secondary, #33ccf8),\n      var(--pw-packages-fill) 90%\n    );\n    --pw-packages-border-strong: color-mix(\n      in oklch,\n      var(--studio-secondary, #33ccf8),\n      var(--pw-packages-fill) 82%\n    );\n    --pw-packages-raise: color-mix(\n      in oklch,\n      var(--pw-packages-fill),\n      var(--pw-packages-line) 4%\n    );\n    --pw-packages-raise-2: color-mix(\n      in oklch,\n      var(--pw-packages-fill),\n      var(--pw-packages-line) 8%\n    );\n\n    /* Accent per origin (accents come from --studio-*). "installed" is the\n       primary "yours" accent; "ephemeral" gets the secondary. */\n    --pw-packages-accent: var(--studio-primary, #35f7ca);\n    --pw-packages-installed: var(--studio-primary, #35f7ca);\n    --pw-packages-ephemeral: var(--studio-secondary, #33ccf8);\n    --pw-packages-core: var(--pw-packages-muted);\n    --pw-packages-unknown: var(--studio-warning, #f8c43b);\n    --pw-packages-danger: var(--studio-danger, #f8674b);\n\n    --pw-packages-installed-fill: color-mix(\n      in oklch,\n      var(--pw-packages-installed),\n      var(--pw-packages-fill) 82%\n    );\n    --pw-packages-installed-text: var(\n      --editor-primary-text,\n      color-mix(\n        in oklch,\n        var(--pw-packages-installed),\n        var(--pw-packages-line) 30%\n      )\n    );\n    --pw-packages-ephemeral-fill: color-mix(\n      in oklch,\n      var(--pw-packages-ephemeral),\n      var(--pw-packages-fill) 82%\n    );\n    --pw-packages-ephemeral-text: var(\n      --editor-secondary-text,\n      color-mix(\n        in oklch,\n        var(--pw-packages-ephemeral),\n        var(--pw-packages-line) 30%\n      )\n    );\n    --pw-packages-core-fill: var(--pw-packages-raise-2);\n    --pw-packages-core-text: var(--pw-packages-muted);\n    --pw-packages-unknown-fill: color-mix(\n      in oklch,\n      var(--pw-packages-unknown),\n      var(--pw-packages-fill) 78%\n    );\n    --pw-packages-unknown-text: var(\n      --editor-warning-text,\n      color-mix(\n        in oklch,\n        var(--pw-packages-unknown),\n        var(--pw-packages-line) 30%\n      )\n    );\n    --pw-packages-accent-fill: var(--pw-packages-installed-fill);\n    --pw-packages-accent-text: var(--pw-packages-installed-text);\n\n    --pw-packages-focus: var(--studio-primary, #35f7ca);\n  }\n}\n\n/* ---- composition / block ---- */\n\n.pw-packages {\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-line);\n  font-family: var(--pw-packages-family);\n  font-size: 14px;\n  line-height: 1.5;\n  container-type: inline-size;\n}\n\n.pw-packages *,\n.pw-packages *::before,\n.pw-packages *::after {\n  box-sizing: border-box;\n}\n\n/* ---- header ---- */\n\n.pw-packages {\n  --pw-ctl-h: 2.15rem;\n}\n\n.pw-packages__head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  padding: 0.875rem 1rem 0;\n  background: color-mix(in oklch, var(--pw-packages-fill), transparent 4%);\n  backdrop-filter: blur(6px);\n}\n\n/* Row 1: filter (left) + a quiet summary pinned top-right. */\n.pw-packages__toolbar {\n  display: flex;\n  gap: 0.75rem;\n  align-items: center;\n  flex-wrap: wrap;\n}\n.pw-packages__search {\n  flex: 1;\n  min-width: 12rem;\n  height: var(--pw-ctl-h);\n  border: 1px solid var(--pw-packages-border-strong);\n  border-radius: var(--studio-radius-md, 8px);\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-line);\n  font: inherit;\n  font-size: 0.8125rem;\n  padding: 0 0.75rem;\n}\n.pw-packages__search::placeholder {\n  color: var(--pw-packages-faint);\n}\n.pw-packages__search:focus,\n.pw-packages__origin-chip:focus-visible,\n.pw-packages__tab:focus-visible {\n  outline: 2px solid var(--pw-packages-focus);\n  outline-offset: 1px;\n}\n.pw-packages__stats {\n  display: flex;\n  align-items: baseline;\n  gap: 0.75rem;\n  margin-left: auto;\n  font-size: 0.8125rem;\n  color: var(--pw-packages-muted);\n  flex-wrap: wrap;\n}\n.pw-packages__stats strong {\n  color: var(--pw-packages-line);\n  font-variant-numeric: tabular-nums;\n}\n.pw-packages__stat-of {\n  color: var(--pw-packages-faint);\n}\n\n/* Bottom row: folder tabs (left) + origin filter chips (right), sharing the\n   baseline. Inactive tabs are plain text; the active one is a raised card whose\n   open bottom breaks through the baseline and merges into the content below. */\n.pw-packages__tabbar {\n  display: flex;\n  align-items: flex-end;\n  gap: 0.35rem 0.75rem;\n  flex-wrap: wrap;\n  margin: 0.15rem -1rem 0;\n  padding: 0 0.6rem;\n  border-bottom: 1px solid var(--pw-packages-border);\n}\n.pw-packages__tabs {\n  display: flex;\n  align-items: flex-end;\n  gap: 0.25rem;\n}\n.pw-packages__tab {\n  appearance: none;\n  border: 1px solid transparent;\n  border-bottom: 0;\n  background: transparent;\n  color: var(--pw-packages-muted);\n  font: inherit;\n  font-size: 0.8125rem;\n  padding: 0.4rem 0.9rem;\n  border-radius: var(--studio-radius-md, 8px) var(--studio-radius-md, 8px) 0 0;\n  cursor: pointer;\n  margin-bottom: -1px;\n  transition: color var(--studio-transition-fast, 0.1s ease);\n}\n.pw-packages__tab:hover {\n  color: var(--pw-packages-line);\n}\n.pw-packages__tab[data-active] {\n  background: var(--pw-packages-fill);\n  border-color: var(--pw-packages-border);\n  border-bottom: 1px solid var(--pw-packages-fill);\n  color: var(--pw-packages-line);\n  font-weight: 600;\n}\n.pw-packages__tab[data-view="registries"][data-active] {\n  border-color: color-mix(\n    in oklch,\n    var(--studio-secondary, #33ccf8),\n    var(--pw-packages-fill) 65%\n  );\n  color: color-mix(\n    in oklch,\n    var(--studio-secondary, #33ccf8),\n    var(--pw-packages-line) 40%\n  );\n}\n\n/* Origin chips ride on the right of the tab row, lifted off the baseline. */\n.pw-packages__origins {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n  margin-left: auto;\n  margin-bottom: 0.4rem;\n}\n.pw-packages__origin-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 1px solid var(--pw-packages-border-strong);\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-muted);\n  border-radius: var(--studio-radius-round, 9999px);\n  padding: 0.2rem 0.625rem;\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n  transition: background var(--studio-transition-fast, 0.1s ease);\n}\n.pw-packages__origin-chip:hover {\n  background: var(--pw-packages-raise);\n}\n.pw-packages__origin-count {\n  font-variant-numeric: tabular-nums;\n  font-size: 0.6875rem;\n  color: var(--pw-packages-faint);\n}\n/* Active chip is a quiet neutral pill — the header stays accent-free so the\n   Install button is the only colored thing. Origin *colors* still live on the\n   cards (badges/dots/stripes), where they encode state. */\n.pw-packages__origin-chip[data-active] {\n  border-color: transparent;\n  font-weight: 600;\n  color: var(--pw-packages-line);\n  background: var(--pw-packages-raise-2);\n}\n.pw-packages__origin-chip[data-active] .pw-packages__origin-count {\n  color: inherit;\n  opacity: 0.7;\n}\n\n/* ---- shared: origin badge + copyable + source line + plugin row ---- */\n\n.pw-packages__origin {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.075rem 0.45rem;\n  border-radius: var(--studio-radius-round, 9999px);\n  font-size: 0.6875rem;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  background: var(--pw-packages-core-fill);\n  color: var(--pw-packages-core-text);\n  white-space: nowrap;\n}\n.pw-packages__origin[data-origin="installed"] {\n  background: var(--pw-packages-installed-fill);\n  color: var(--pw-packages-installed-text);\n}\n.pw-packages__origin[data-origin="ephemeral"] {\n  background: var(--pw-packages-ephemeral-fill);\n  color: var(--pw-packages-ephemeral-text);\n}\n.pw-packages__origin[data-origin="unknown"] {\n  background: var(--pw-packages-unknown-fill);\n  color: var(--pw-packages-unknown-text);\n}\n\n.pw-packages__copy {\n  font-family: var(--pw-packages-family-code);\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  cursor: pointer;\n  border-radius: 3px;\n  padding: 0.05rem 0.2rem;\n  margin: -0.05rem -0.2rem;\n  transition: color var(--studio-transition-fast, 0.1s ease),\n    background var(--studio-transition-fast, 0.1s ease);\n  word-break: break-all;\n}\n.pw-packages__copy:hover {\n  background: var(--pw-packages-raise-2);\n  color: var(--pw-packages-line);\n}\n.pw-packages__copy.is-copied {\n  color: var(--pw-packages-accent-text);\n  background: var(--pw-packages-accent-fill);\n}\n\n.pw-source {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  min-width: 0;\n}\n.pw-source__lines {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.2rem;\n  min-width: 0;\n}\n.pw-source__url {\n  min-width: 0;\n}\n.pw-source__heads {\n  font-size: 0.6875rem;\n  color: var(--pw-packages-faint);\n}\n.pw-source__none {\n  font-size: 0.75rem;\n  font-style: italic;\n  color: var(--pw-packages-faint);\n}\n\n/* right-aligned open / delete actions (cards, registries, table) */\n.pw-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.pw-actions__btn {\n  border: 1px solid var(--pw-packages-border-strong);\n  background: var(--pw-packages-raise);\n  color: var(--pw-packages-muted);\n  border-radius: var(--studio-radius-sm, 4px);\n  font: inherit;\n  font-size: 0.6875rem;\n  padding: 0.15rem 0.55rem;\n  cursor: pointer;\n  transition: background var(--studio-transition-fast, 0.1s ease),\n    color var(--studio-transition-fast, 0.1s ease),\n    border-color var(--studio-transition-fast, 0.1s ease);\n}\n.pw-actions__btn:hover {\n  background: var(--pw-packages-raise-2);\n  color: var(--pw-packages-line);\n}\n.pw-actions__btn--danger:hover {\n  background: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 84%);\n  border-color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 55%);\n  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 25%);\n}\n\n.pw-plugins {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n}\n.pw-plugin {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  padding: 0.4rem 0;\n  flex-wrap: wrap;\n}\n.pw-plugin__dot {\n  align-self: center;\n  width: 0.4rem;\n  height: 0.4rem;\n  border-radius: 9999px;\n  flex-shrink: 0;\n  background: var(--pw-packages-core);\n}\n.pw-plugin__dot[data-origin="installed"] {\n  background: var(--pw-packages-installed);\n}\n.pw-plugin__dot[data-origin="ephemeral"] {\n  background: var(--pw-packages-ephemeral);\n}\n.pw-plugin__dot[data-origin="unknown"] {\n  background: var(--pw-packages-unknown);\n}\n.pw-plugin__name {\n  font-weight: 550;\n}\n.pw-plugin__type {\n  font-size: 0.6875rem;\n  color: var(--pw-packages-muted);\n  background: var(--pw-packages-raise-2);\n  border-radius: var(--studio-radius-sm, 4px);\n  padding: 0.05rem 0.4rem;\n}\n.pw-plugin__id {\n  margin-left: auto;\n}\n.pw-plugin__supports {\n  flex-basis: 100%;\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  font-family: var(--pw-packages-family-code);\n}\n.pw-plugin__supports-label {\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 0.625rem;\n  font-family: var(--pw-packages-family);\n  color: var(--pw-packages-faint);\n}\n\n/* ---- view: by package (cards) ---- */\n\n.pw-cards {\n  list-style: none;\n  margin: 0;\n  padding: 1.25rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.pw-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1.25rem 1.375rem;\n  background: var(--pw-packages-fill);\n}\n.pw-card__source {\n  display: flex;\n  min-width: 0;\n}\n.pw-card__foot {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding-top: 0.65rem;\n  border-top: 1px solid var(--pw-packages-border);\n}\n\n/* show-more toggle, valid inside the plugin/registry <ul>s */\n.pw-more {\n  list-style: none;\n  padding: 0.15rem 0 0.1rem;\n}\n.pw-more__btn {\n  border: 0;\n  background: none;\n  padding: 0.1rem 0;\n  font: inherit;\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  cursor: pointer;\n  border-bottom: 1px dashed var(--pw-packages-border-strong);\n}\n.pw-more__btn:hover {\n  color: var(--pw-packages-accent-text);\n  border-bottom-color: currentColor;\n}\n.pw-card__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-card__name {\n  margin: 0;\n  font-size: 1.0625rem;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n.pw-card__badges {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  flex-wrap: wrap;\n}\n.pw-card__version {\n  font-size: 0.6875rem;\n  font-family: var(--pw-packages-family-code);\n  color: var(--pw-packages-muted);\n}\n.pw-card__count {\n  font-size: 0.6875rem;\n  color: var(--pw-packages-faint);\n}\n.pw-card__pkgname {\n  font-size: 0.75rem;\n  font-family: var(--pw-packages-family-code);\n  color: var(--pw-packages-faint);\n  margin-top: -0.25rem;\n}\n\n/* ---- view: by registry ---- */\n\n.pw-registries {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n}\n.pw-registry {\n  border-bottom: 1px solid var(--pw-packages-border);\n}\n.pw-registry__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.875rem;\n  background: color-mix(\n    in oklch,\n    var(--studio-secondary, #33ccf8),\n    var(--pw-packages-fill) 94%\n  );\n  border-bottom: 1px solid var(--pw-packages-border);\n}\n.pw-registry__name {\n  margin: 0;\n  font-size: 0.9375rem;\n  font-weight: 650;\n  font-family: var(--pw-packages-family-code);\n}\n.pw-registry__count {\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  background: var(--pw-packages-fill);\n  border: 1px solid var(--pw-packages-border);\n  border-radius: var(--studio-radius-round, 9999px);\n  padding: 0 0.5rem;\n  font-variant-numeric: tabular-nums;\n}\n.pw-reglist {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.pw-regitem {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3rem;\n  padding: 0.55rem 0.875rem;\n  border-left: 3px solid transparent;\n}\n.pw-regitem + .pw-regitem {\n  border-top: 1px solid var(--pw-packages-border);\n}\n.pw-regitem[data-origin="installed"] {\n  border-left-color: var(--pw-packages-installed);\n}\n.pw-regitem[data-origin="ephemeral"] {\n  border-left-color: var(--pw-packages-ephemeral);\n}\n.pw-regitem[data-origin="unknown"] {\n  border-left-color: var(--pw-packages-unknown);\n}\n.pw-regitem__main {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-regitem__name {\n  font-weight: 550;\n}\n.pw-regitem__supports {\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  font-family: var(--pw-packages-family-code);\n}\n.pw-regitem__source {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  color: var(--pw-packages-faint);\n}\n.pw-regitem__pkg {\n  font-size: 0.6875rem;\n  color: var(--pw-packages-muted);\n}\n\n/* ---- view: table ---- */\n\n.pw-table-wrap {\n  padding: 1rem;\n  overflow-x: auto;\n}\n.pw-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8125rem;\n}\n.pw-table__th {\n  text-align: left;\n  padding: 0.4rem 0.6rem;\n  border-bottom: 2px solid var(--pw-packages-border-strong);\n  color: var(--pw-packages-muted);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\n.pw-table__th--plain {\n  cursor: default;\n}\n.pw-table__th[data-sorted] {\n  color: var(--pw-packages-line);\n}\n.pw-table__arrow {\n  font-size: 0.625rem;\n  margin-left: 0.25rem;\n}\n.pw-table__row {\n  border-bottom: 1px solid var(--pw-packages-border);\n}\n.pw-table__row:hover {\n  background: var(--pw-packages-raise);\n}\n.pw-table td {\n  padding: 0.4rem 0.6rem;\n  vertical-align: baseline;\n}\n.pw-table__name {\n  font-weight: 550;\n}\n.pw-table__supports {\n  display: block;\n  font-size: 0.6875rem;\n  color: var(--pw-packages-faint);\n  font-family: var(--pw-packages-family-code);\n}\n.pw-table__reg,\n.pw-table__pkg {\n  font-family: var(--pw-packages-family-code);\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n}\n/* Keep the id on one line (the table scrolls) instead of breaking per-character. */\n.pw-table__id {\n  white-space: nowrap;\n}\n.pw-table__url {\n  max-width: 22rem;\n}\n\n/* ---- broken modules ---- */\n\n.pw-package-notices {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem 1.25rem 0;\n}\n.pw-package-notice {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  border: 1px solid var(--pw-packages-border-strong);\n  border-left: 3px solid var(--pw-packages-unknown);\n  border-radius: var(--studio-radius-md, 8px);\n  background: var(--pw-packages-unknown-fill);\n  padding: 0.625rem 0.75rem;\n  color: var(--pw-packages-unknown-text);\n  font-size: 0.8125rem;\n}\n.pw-package-notice__url {\n  max-width: 100%;\n}\n\n.pw-broken {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem 0;\n}\n.pw-broken__box {\n  border: 1px solid\n    color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 45%);\n  border-left: 3px solid var(--pw-packages-danger);\n  border-radius: var(--studio-radius-md, 8px);\n  background: color-mix(\n    in oklch,\n    var(--pw-packages-danger),\n    var(--pw-packages-fill) 88%\n  );\n  padding: 0.75rem 0.875rem;\n}\n.pw-broken__head {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-broken__label {\n  font-size: 0.75rem;\n  font-weight: 650;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 30%);\n}\n.pw-broken__name {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 45%);\n  word-break: break-word;\n}\n.pw-broken__url {\n  min-width: 0;\n}\n.pw-broken__plugins {\n  margin: 0.6rem 0 0;\n}\n.pw-broken__trace {\n  margin: 0.6rem 0 0;\n  padding: 0.55rem 0.7rem;\n  background: color-mix(in oklch, var(--pw-packages-line), transparent 92%);\n  border-radius: var(--studio-radius-sm, 4px);\n  font-family: var(--pw-packages-family-code);\n  font-size: 0.6875rem;\n  line-height: 1.5;\n  color: var(--pw-packages-line);\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow: auto;\n  max-height: 16rem;\n}\n\n/* ---- empty ---- */\n\n.pw-packages__empty {\n  padding: 3rem 1rem;\n  text-align: center;\n  color: var(--pw-packages-muted);\n}\n\n@container (max-width: 560px) {\n  .pw-cards {\n    padding: 0.875rem;\n  }\n  .pw-card {\n    padding: 1rem 1.05rem;\n  }\n  .pw-plugin__id {\n    margin-left: 0;\n  }\n}\n\n/* ---- install modal ---- */\n\n.pw-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: max(6vh, 2rem) 1rem 2rem;\n  background: color-mix(in oklch, var(--pw-packages-line), transparent 55%);\n  backdrop-filter: blur(2px);\n  overflow-y: auto;\n}\n.pw-install {\n  width: min(34rem, 100%);\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1.25rem 1.375rem 1.125rem;\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-line);\n  border: 1px solid var(--pw-packages-border-strong);\n  border-radius: var(--studio-radius-lg, 12px);\n  box-shadow: 0 12px 40px color-mix(in oklch, var(--pw-packages-line), transparent 78%);\n}\n.pw-install__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n.pw-install__title {\n  margin: 0;\n  font-size: 1.0625rem;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n}\n.pw-install__close {\n  border: 0;\n  background: none;\n  color: var(--pw-packages-muted);\n  font-size: 1.25rem;\n  line-height: 1;\n  padding: 0.1rem 0.3rem;\n  cursor: pointer;\n  border-radius: var(--studio-radius-sm, 4px);\n}\n.pw-install__close:hover {\n  background: var(--pw-packages-raise-2);\n  color: var(--pw-packages-line);\n}\n.pw-install__blurb {\n  margin: 0;\n  font-size: 0.8125rem;\n  color: var(--pw-packages-muted);\n}\n.pw-install__blurb code {\n  font-family: var(--pw-packages-family-code);\n  font-size: 0.75rem;\n}\n.pw-install__input {\n  width: 100%;\n  border: 1px solid var(--pw-packages-border-strong);\n  border-radius: var(--studio-radius-sm, 4px);\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-line);\n  font: inherit;\n  font-family: var(--pw-packages-family-code);\n  font-size: 0.8125rem;\n  padding: 0.5rem 0.625rem;\n}\n.pw-install__input:focus {\n  outline: 2px solid var(--pw-packages-focus);\n  outline-offset: 1px;\n}\n.pw-install__preview {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.pw-install__error {\n  font-size: 0.8125rem;\n  color: var(--pw-packages-unknown-text);\n  background: var(--pw-packages-unknown-fill);\n  border-radius: var(--studio-radius-sm, 4px);\n  padding: 0.4rem 0.6rem;\n}\n.pw-install__loading {\n  font-size: 0.8125rem;\n  color: var(--pw-packages-muted);\n}\n.pw-install__card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.6rem;\n  padding: 0.875rem 1rem;\n  background: var(--pw-packages-fill);\n}\n.pw-install__card-head {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-install__pkg {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 650;\n  word-break: break-word;\n}\n.pw-install__version {\n  font-size: 0.6875rem;\n  font-family: var(--pw-packages-family-code);\n  color: var(--pw-packages-muted);\n}\n.pw-install__none {\n  font-size: 0.8125rem;\n  font-style: italic;\n  color: var(--pw-packages-faint);\n}\n.pw-install__plugins {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.3rem;\n}\n.pw-install__plugin {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-install__plugin-name {\n  font-weight: 550;\n}\n.pw-install__plugin-supports {\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n  font-family: var(--pw-packages-family-code);\n}\n.pw-install__foot {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.pw-install__already {\n  margin-right: auto;\n  font-size: 0.75rem;\n  color: var(--pw-packages-muted);\n}\n.pw-install__cancel {\n  border: 1px solid var(--pw-packages-border-strong);\n  background: var(--pw-packages-fill);\n  color: var(--pw-packages-muted);\n  border-radius: 999px;\n  font: inherit;\n  font-size: 0.8125rem;\n  padding: 0.45rem 0.9rem;\n  cursor: pointer;\n}\n.pw-install__cancel:hover {\n  background: var(--pw-packages-raise);\n  color: var(--pw-packages-line);\n}\n.pw-install__add {\n  border: 1px solid\n    color-mix(in oklch, var(--pw-packages-accent), var(--pw-packages-line) 12%);\n  background: color-mix(\n    in oklch,\n    var(--pw-packages-accent),\n    var(--pw-packages-fill) 46%\n  );\n  color: color-mix(in oklch, var(--pw-packages-accent), var(--pw-packages-line) 58%);\n  border-radius: 999px;\n  font: inherit;\n  font-size: 0.8125rem;\n  font-weight: 650;\n  padding: 0.45rem 1.05rem;\n  cursor: pointer;\n  box-shadow: 0 2px 6px\n    color-mix(in oklch, var(--pw-packages-accent), transparent 74%);\n  transition: background var(--studio-transition-fast, 0.1s ease),\n    box-shadow var(--studio-transition-fast, 0.1s ease);\n}\n.pw-install__add:hover:not(:disabled) {\n  background: color-mix(\n    in oklch,\n    var(--pw-packages-accent),\n    var(--pw-packages-fill) 30%\n  );\n}\n.pw-install__add:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  box-shadow: none;\n}'));
+      elementStyle.appendChild(document.createTextNode(`@layer package {
+  :root,
+  :host,
+  [theme] {
+    /* Surface + ink: a tool derives from --editor-*. */
+    --pw-packages-fill: var(--editor-fill, white);
+    --pw-packages-line: var(--editor-line, black);
+    --pw-packages-family: var(--editor-family-sans, system-ui, sans-serif);
+    --pw-packages-family-code: var(--editor-family-code, ui-monospace, monospace);
+
+    --pw-packages-muted: color-mix(
+      in oklch,
+      var(--pw-packages-line),
+      var(--pw-packages-fill) 45%
+    );
+    --pw-packages-faint: color-mix(
+      in oklch,
+      var(--pw-packages-line),
+      var(--pw-packages-fill) 62%
+    );
+    /* Dividers should recede into the canvas, with only a trace of the
+       secondary colour to distinguish adjacent areas. */
+    --pw-packages-border: color-mix(
+      in oklch,
+      var(--studio-secondary, #33ccf8),
+      var(--pw-packages-fill) 90%
+    );
+    --pw-packages-border-strong: color-mix(
+      in oklch,
+      var(--studio-secondary, #33ccf8),
+      var(--pw-packages-fill) 82%
+    );
+    --pw-packages-raise: color-mix(
+      in oklch,
+      var(--pw-packages-fill),
+      var(--pw-packages-line) 4%
+    );
+    --pw-packages-raise-2: color-mix(
+      in oklch,
+      var(--pw-packages-fill),
+      var(--pw-packages-line) 8%
+    );
+
+    /* Accent per origin (accents come from --studio-*). "installed" is the
+       primary "yours" accent; "ephemeral" gets the secondary. */
+    --pw-packages-accent: var(--studio-primary, #35f7ca);
+    --pw-packages-installed: var(--studio-primary, #35f7ca);
+    --pw-packages-ephemeral: var(--studio-secondary, #33ccf8);
+    --pw-packages-core: var(--pw-packages-muted);
+    --pw-packages-unknown: var(--studio-warning, #f8c43b);
+    --pw-packages-danger: var(--studio-danger, #f8674b);
+
+    --pw-packages-installed-fill: color-mix(
+      in oklch,
+      var(--pw-packages-installed),
+      var(--pw-packages-fill) 82%
+    );
+    --pw-packages-installed-text: var(
+      --editor-primary-text,
+      color-mix(
+        in oklch,
+        var(--pw-packages-installed),
+        var(--pw-packages-line) 30%
+      )
+    );
+    --pw-packages-ephemeral-fill: color-mix(
+      in oklch,
+      var(--pw-packages-ephemeral),
+      var(--pw-packages-fill) 82%
+    );
+    --pw-packages-ephemeral-text: var(
+      --editor-secondary-text,
+      color-mix(
+        in oklch,
+        var(--pw-packages-ephemeral),
+        var(--pw-packages-line) 30%
+      )
+    );
+    --pw-packages-core-fill: var(--pw-packages-raise-2);
+    --pw-packages-core-text: var(--pw-packages-muted);
+    --pw-packages-unknown-fill: color-mix(
+      in oklch,
+      var(--pw-packages-unknown),
+      var(--pw-packages-fill) 78%
+    );
+    --pw-packages-unknown-text: var(
+      --editor-warning-text,
+      color-mix(
+        in oklch,
+        var(--pw-packages-unknown),
+        var(--pw-packages-line) 30%
+      )
+    );
+    --pw-packages-accent-fill: var(--pw-packages-installed-fill);
+    --pw-packages-accent-text: var(--pw-packages-installed-text);
+
+    --pw-packages-focus: var(--studio-primary, #35f7ca);
+  }
+}
+
+/* ---- composition / block ---- */
+
+.pw-packages {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-line);
+  font-family: var(--pw-packages-family);
+  font-size: 14px;
+  line-height: 1.5;
+  container-type: inline-size;
+}
+
+.pw-packages *,
+.pw-packages *::before,
+.pw-packages *::after {
+  box-sizing: border-box;
+}
+
+/* ---- header ---- */
+
+.pw-packages {
+  --pw-ctl-h: 2.15rem;
+}
+
+.pw-packages__head {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.875rem 1rem 0;
+  background: color-mix(in oklch, var(--pw-packages-fill), transparent 4%);
+  backdrop-filter: blur(6px);
+}
+
+/* Row 1: filter (left) + a quiet summary pinned top-right. */
+.pw-packages__toolbar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.pw-packages__search {
+  flex: 1;
+  min-width: 12rem;
+  height: var(--pw-ctl-h);
+  border: 1px solid var(--pw-packages-border-strong);
+  border-radius: var(--studio-radius-md, 8px);
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-line);
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0 0.75rem;
+}
+.pw-packages__search::placeholder {
+  color: var(--pw-packages-faint);
+}
+.pw-packages__search:focus,
+.pw-packages__origin-chip:focus-visible,
+.pw-packages__tab:focus-visible {
+  outline: 2px solid var(--pw-packages-focus);
+  outline-offset: 1px;
+}
+.pw-packages__stats {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin-left: auto;
+  font-size: 0.8125rem;
+  color: var(--pw-packages-muted);
+  flex-wrap: wrap;
+}
+.pw-packages__stats strong {
+  color: var(--pw-packages-line);
+  font-variant-numeric: tabular-nums;
+}
+.pw-packages__stat-of {
+  color: var(--pw-packages-faint);
+}
+
+/* Bottom row: folder tabs (left) + origin filter chips (right), sharing the
+   baseline. Inactive tabs are plain text; the active one is a raised card whose
+   open bottom breaks through the baseline and merges into the content below. */
+.pw-packages__tabbar {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.35rem 0.75rem;
+  flex-wrap: wrap;
+  margin: 0.15rem -1rem 0;
+  padding: 0 0.6rem;
+  border-bottom: 1px solid var(--pw-packages-border);
+}
+.pw-packages__tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.25rem;
+}
+.pw-packages__tab {
+  appearance: none;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  background: transparent;
+  color: var(--pw-packages-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: var(--studio-radius-md, 8px) var(--studio-radius-md, 8px) 0 0;
+  cursor: pointer;
+  margin-bottom: -1px;
+  transition: color var(--studio-transition-fast, 0.1s ease);
+}
+.pw-packages__tab:hover {
+  color: var(--pw-packages-line);
+}
+.pw-packages__tab[data-active] {
+  background: var(--pw-packages-fill);
+  border-color: var(--pw-packages-border);
+  border-bottom: 1px solid var(--pw-packages-fill);
+  color: var(--pw-packages-line);
+  font-weight: 600;
+}
+.pw-packages__tab[data-view="registries"][data-active] {
+  border-color: color-mix(
+    in oklch,
+    var(--studio-secondary, #33ccf8),
+    var(--pw-packages-fill) 65%
+  );
+  color: color-mix(
+    in oklch,
+    var(--studio-secondary, #33ccf8),
+    var(--pw-packages-line) 40%
+  );
+}
+
+/* Origin chips ride on the right of the tab row, lifted off the baseline. */
+.pw-packages__origins {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-bottom: 0.4rem;
+}
+.pw-packages__origin-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border: 1px solid var(--pw-packages-border-strong);
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-muted);
+  border-radius: var(--studio-radius-round, 9999px);
+  padding: 0.2rem 0.625rem;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background var(--studio-transition-fast, 0.1s ease);
+}
+.pw-packages__origin-chip:hover {
+  background: var(--pw-packages-raise);
+}
+.pw-packages__origin-count {
+  font-variant-numeric: tabular-nums;
+  font-size: 0.6875rem;
+  color: var(--pw-packages-faint);
+}
+/* Active chip is a quiet neutral pill — the header stays accent-free so the
+   Install button is the only colored thing. Origin *colors* still live on the
+   cards (badges/dots/stripes), where they encode state. */
+.pw-packages__origin-chip[data-active] {
+  border-color: transparent;
+  font-weight: 600;
+  color: var(--pw-packages-line);
+  background: var(--pw-packages-raise-2);
+}
+.pw-packages__origin-chip[data-active] .pw-packages__origin-count {
+  color: inherit;
+  opacity: 0.7;
+}
+
+/* ---- shared: origin badge + copyable + source line + plugin row ---- */
+
+.pw-packages__origin {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.075rem 0.45rem;
+  border-radius: var(--studio-radius-round, 9999px);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  background: var(--pw-packages-core-fill);
+  color: var(--pw-packages-core-text);
+  white-space: nowrap;
+}
+.pw-packages__origin[data-origin="installed"] {
+  background: var(--pw-packages-installed-fill);
+  color: var(--pw-packages-installed-text);
+}
+.pw-packages__origin[data-origin="ephemeral"] {
+  background: var(--pw-packages-ephemeral-fill);
+  color: var(--pw-packages-ephemeral-text);
+}
+.pw-packages__origin[data-origin="unknown"] {
+  background: var(--pw-packages-unknown-fill);
+  color: var(--pw-packages-unknown-text);
+}
+
+.pw-packages__unlisted {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.05rem 0.4rem;
+  border-radius: var(--studio-radius-sm, 4px);
+  font-size: 0.6875rem;
+  font-weight: 550;
+  letter-spacing: 0.01em;
+  color: var(--pw-packages-muted);
+  background: transparent;
+  border: 1px dashed var(--pw-packages-border-strong);
+  white-space: nowrap;
+}
+
+/* Unlisted plugins are hidden from pickers, so their names recede toward the
+   canvas. --pw-packages-faint is the tool's most recessed ink tier (line→fill
+   62%), derived from --editor-line/--editor-fill; the same color used for
+   "no import url" and plugin counts. */
+.pw-plugin__name.is-unlisted,
+.pw-regitem__name.is-unlisted,
+.pw-table__name.is-unlisted,
+.pw-install__plugin-name.is-unlisted {
+  color: var(--pw-packages-faint);
+}
+
+.pw-packages__copy {
+  font-family: var(--pw-packages-family-code);
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 0.05rem 0.2rem;
+  margin: -0.05rem -0.2rem;
+  transition: color var(--studio-transition-fast, 0.1s ease),
+    background var(--studio-transition-fast, 0.1s ease);
+  word-break: break-all;
+}
+.pw-packages__copy:hover {
+  background: var(--pw-packages-raise-2);
+  color: var(--pw-packages-line);
+}
+.pw-packages__copy.is-copied {
+  color: var(--pw-packages-accent-text);
+  background: var(--pw-packages-accent-fill);
+}
+
+.pw-source {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.pw-source__lines {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  min-width: 0;
+}
+.pw-source__url {
+  min-width: 0;
+}
+.pw-source__heads {
+  font-size: 0.6875rem;
+  color: var(--pw-packages-faint);
+}
+.pw-source__none {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--pw-packages-faint);
+}
+
+/* right-aligned open / delete actions (cards, registries, table) */
+.pw-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.pw-actions__btn {
+  border: 1px solid var(--pw-packages-border-strong);
+  background: var(--pw-packages-raise);
+  color: var(--pw-packages-muted);
+  border-radius: var(--studio-radius-sm, 4px);
+  font: inherit;
+  font-size: 0.6875rem;
+  padding: 0.15rem 0.55rem;
+  cursor: pointer;
+  transition: background var(--studio-transition-fast, 0.1s ease),
+    color var(--studio-transition-fast, 0.1s ease),
+    border-color var(--studio-transition-fast, 0.1s ease);
+}
+.pw-actions__btn:hover {
+  background: var(--pw-packages-raise-2);
+  color: var(--pw-packages-line);
+}
+.pw-actions__btn--danger:hover {
+  background: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 84%);
+  border-color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 55%);
+  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 25%);
+}
+
+.pw-plugins {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.pw-plugin {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.4rem 0;
+  flex-wrap: wrap;
+}
+.pw-plugin__dot {
+  align-self: center;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  background: var(--pw-packages-core);
+}
+.pw-plugin__dot[data-origin="installed"] {
+  background: var(--pw-packages-installed);
+}
+.pw-plugin__dot[data-origin="ephemeral"] {
+  background: var(--pw-packages-ephemeral);
+}
+.pw-plugin__dot[data-origin="unknown"] {
+  background: var(--pw-packages-unknown);
+}
+.pw-plugin__name {
+  font-weight: 550;
+}
+.pw-plugin__type {
+  font-size: 0.6875rem;
+  color: var(--pw-packages-muted);
+  background: var(--pw-packages-raise-2);
+  border-radius: var(--studio-radius-sm, 4px);
+  padding: 0.05rem 0.4rem;
+}
+.pw-plugin__id {
+  margin-left: auto;
+}
+.pw-plugin__supports {
+  flex-basis: 100%;
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  font-family: var(--pw-packages-family-code);
+}
+.pw-plugin__supports-label {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.625rem;
+  font-family: var(--pw-packages-family);
+  color: var(--pw-packages-faint);
+}
+
+/* ---- view: by package (cards) ---- */
+
+.pw-cards {
+  list-style: none;
+  margin: 0;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.pw-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem 1.375rem;
+  background: var(--pw-packages-fill);
+}
+.pw-card__source {
+  display: flex;
+  min-width: 0;
+}
+.pw-card__foot {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 0.65rem;
+  border-top: 1px solid var(--pw-packages-border);
+}
+
+/* show-more toggle, valid inside the plugin/registry <ul>s */
+.pw-more {
+  list-style: none;
+  padding: 0.15rem 0 0.1rem;
+}
+.pw-more__btn {
+  border: 0;
+  background: none;
+  padding: 0.1rem 0;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  cursor: pointer;
+  border-bottom: 1px dashed var(--pw-packages-border-strong);
+}
+.pw-more__btn:hover {
+  color: var(--pw-packages-accent-text);
+  border-bottom-color: currentColor;
+}
+.pw-card__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-card__name {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  word-break: break-word;
+}
+.pw-card__badges {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+.pw-card__version {
+  font-size: 0.6875rem;
+  font-family: var(--pw-packages-family-code);
+  color: var(--pw-packages-muted);
+}
+.pw-card__count {
+  font-size: 0.6875rem;
+  color: var(--pw-packages-faint);
+}
+.pw-card__pkgname {
+  font-size: 0.75rem;
+  font-family: var(--pw-packages-family-code);
+  color: var(--pw-packages-faint);
+  margin-top: -0.25rem;
+}
+
+/* ---- view: by registry ---- */
+
+.pw-registries {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+.pw-registry {
+  border-bottom: 1px solid var(--pw-packages-border);
+}
+.pw-registry__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  background: color-mix(
+    in oklch,
+    var(--studio-secondary, #33ccf8),
+    var(--pw-packages-fill) 94%
+  );
+  border-bottom: 1px solid var(--pw-packages-border);
+}
+.pw-registry__name {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 650;
+  font-family: var(--pw-packages-family-code);
+}
+.pw-registry__count {
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  background: var(--pw-packages-fill);
+  border: 1px solid var(--pw-packages-border);
+  border-radius: var(--studio-radius-round, 9999px);
+  padding: 0 0.5rem;
+  font-variant-numeric: tabular-nums;
+}
+.pw-reglist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pw-regitem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.55rem 0.875rem;
+  border-left: 3px solid transparent;
+}
+.pw-regitem + .pw-regitem {
+  border-top: 1px solid var(--pw-packages-border);
+}
+.pw-regitem[data-origin="installed"] {
+  border-left-color: var(--pw-packages-installed);
+}
+.pw-regitem[data-origin="ephemeral"] {
+  border-left-color: var(--pw-packages-ephemeral);
+}
+.pw-regitem[data-origin="unknown"] {
+  border-left-color: var(--pw-packages-unknown);
+}
+.pw-regitem__main {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-regitem__name {
+  font-weight: 550;
+}
+.pw-regitem__supports {
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  font-family: var(--pw-packages-family-code);
+}
+.pw-regitem__source {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  color: var(--pw-packages-faint);
+}
+.pw-regitem__pkg {
+  font-size: 0.6875rem;
+  color: var(--pw-packages-muted);
+}
+
+/* ---- view: table ---- */
+
+.pw-table-wrap {
+  padding: 1rem;
+  overflow-x: auto;
+}
+.pw-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+.pw-table__th {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 2px solid var(--pw-packages-border-strong);
+  color: var(--pw-packages-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+.pw-table__th--plain {
+  cursor: default;
+}
+.pw-table__th[data-sorted] {
+  color: var(--pw-packages-line);
+}
+.pw-table__arrow {
+  font-size: 0.625rem;
+  margin-left: 0.25rem;
+}
+.pw-table__row {
+  border-bottom: 1px solid var(--pw-packages-border);
+}
+.pw-table__row:hover {
+  background: var(--pw-packages-raise);
+}
+.pw-table td {
+  padding: 0.4rem 0.6rem;
+  vertical-align: baseline;
+}
+.pw-table__name {
+  font-weight: 550;
+}
+.pw-table__supports {
+  display: block;
+  font-size: 0.6875rem;
+  color: var(--pw-packages-faint);
+  font-family: var(--pw-packages-family-code);
+}
+.pw-table__reg,
+.pw-table__pkg {
+  font-family: var(--pw-packages-family-code);
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+}
+/* Keep the id on one line (the table scrolls) instead of breaking per-character. */
+.pw-table__id {
+  white-space: nowrap;
+}
+.pw-table__flag {
+  text-align: center;
+  color: var(--pw-packages-muted);
+}
+.pw-table__url {
+  max-width: 22rem;
+}
+
+/* ---- broken modules ---- */
+
+.pw-package-notices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem 0;
+}
+.pw-package-notice {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  border: 1px solid var(--pw-packages-border-strong);
+  border-left: 3px solid var(--pw-packages-unknown);
+  border-radius: var(--studio-radius-md, 8px);
+  background: var(--pw-packages-unknown-fill);
+  padding: 0.625rem 0.75rem;
+  color: var(--pw-packages-unknown-text);
+  font-size: 0.8125rem;
+}
+.pw-package-notice__url {
+  max-width: 100%;
+}
+
+.pw-broken {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem 0;
+}
+.pw-broken__box {
+  border: 1px solid
+    color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-fill) 45%);
+  border-left: 3px solid var(--pw-packages-danger);
+  border-radius: var(--studio-radius-md, 8px);
+  background: color-mix(
+    in oklch,
+    var(--pw-packages-danger),
+    var(--pw-packages-fill) 88%
+  );
+  padding: 0.75rem 0.875rem;
+}
+.pw-broken__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-broken__label {
+  font-size: 0.75rem;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 30%);
+}
+.pw-broken__name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: color-mix(in oklch, var(--pw-packages-danger), var(--pw-packages-line) 45%);
+  word-break: break-word;
+}
+.pw-broken__url {
+  min-width: 0;
+}
+.pw-broken__plugins {
+  margin: 0.6rem 0 0;
+}
+.pw-broken__trace {
+  margin: 0.6rem 0 0;
+  padding: 0.55rem 0.7rem;
+  background: color-mix(in oklch, var(--pw-packages-line), transparent 92%);
+  border-radius: var(--studio-radius-sm, 4px);
+  font-family: var(--pw-packages-family-code);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+  color: var(--pw-packages-line);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+  max-height: 16rem;
+}
+
+/* ---- empty ---- */
+
+.pw-packages__empty {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--pw-packages-muted);
+}
+
+@container (max-width: 560px) {
+  .pw-cards {
+    padding: 0.875rem;
+  }
+  .pw-card {
+    padding: 1rem 1.05rem;
+  }
+  .pw-plugin__id {
+    margin-left: 0;
+  }
+}
+
+/* ---- install modal ---- */
+
+.pw-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: max(6vh, 2rem) 1rem 2rem;
+  background: color-mix(in oklch, var(--pw-packages-line), transparent 55%);
+  backdrop-filter: blur(2px);
+  overflow-y: auto;
+}
+.pw-install {
+  width: min(34rem, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem 1.375rem 1.125rem;
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-line);
+  border: 1px solid var(--pw-packages-border-strong);
+  border-radius: var(--studio-radius-lg, 12px);
+  box-shadow: 0 12px 40px color-mix(in oklch, var(--pw-packages-line), transparent 78%);
+}
+.pw-install__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.pw-install__title {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.pw-install__close {
+  border: 0;
+  background: none;
+  color: var(--pw-packages-muted);
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: 0.1rem 0.3rem;
+  cursor: pointer;
+  border-radius: var(--studio-radius-sm, 4px);
+}
+.pw-install__close:hover {
+  background: var(--pw-packages-raise-2);
+  color: var(--pw-packages-line);
+}
+.pw-install__blurb {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--pw-packages-muted);
+}
+.pw-install__blurb code {
+  font-family: var(--pw-packages-family-code);
+  font-size: 0.75rem;
+}
+.pw-install__input {
+  width: 100%;
+  border: 1px solid var(--pw-packages-border-strong);
+  border-radius: var(--studio-radius-sm, 4px);
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-line);
+  font: inherit;
+  font-family: var(--pw-packages-family-code);
+  font-size: 0.8125rem;
+  padding: 0.5rem 0.625rem;
+}
+.pw-install__input:focus {
+  outline: 2px solid var(--pw-packages-focus);
+  outline-offset: 1px;
+}
+.pw-install__preview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.pw-install__error {
+  font-size: 0.8125rem;
+  color: var(--pw-packages-unknown-text);
+  background: var(--pw-packages-unknown-fill);
+  border-radius: var(--studio-radius-sm, 4px);
+  padding: 0.4rem 0.6rem;
+}
+.pw-install__loading {
+  font-size: 0.8125rem;
+  color: var(--pw-packages-muted);
+}
+.pw-install__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 0.875rem 1rem;
+  background: var(--pw-packages-fill);
+}
+.pw-install__card-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-install__pkg {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 650;
+  word-break: break-word;
+}
+.pw-install__version {
+  font-size: 0.6875rem;
+  font-family: var(--pw-packages-family-code);
+  color: var(--pw-packages-muted);
+}
+.pw-install__none {
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--pw-packages-faint);
+}
+.pw-install__plugins {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.pw-install__plugin {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-install__plugin-name {
+  font-weight: 550;
+}
+.pw-install__plugin-supports {
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+  font-family: var(--pw-packages-family-code);
+}
+.pw-install__foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pw-install__already {
+  margin-right: auto;
+  font-size: 0.75rem;
+  color: var(--pw-packages-muted);
+}
+.pw-install__cancel {
+  border: 1px solid var(--pw-packages-border-strong);
+  background: var(--pw-packages-fill);
+  color: var(--pw-packages-muted);
+  border-radius: 999px;
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0.45rem 0.9rem;
+  cursor: pointer;
+}
+.pw-install__cancel:hover {
+  background: var(--pw-packages-raise);
+  color: var(--pw-packages-line);
+}
+.pw-install__add {
+  border: 1px solid
+    color-mix(in oklch, var(--pw-packages-accent), var(--pw-packages-line) 12%);
+  background: color-mix(
+    in oklch,
+    var(--pw-packages-accent),
+    var(--pw-packages-fill) 46%
+  );
+  color: color-mix(in oklch, var(--pw-packages-accent), var(--pw-packages-line) 58%);
+  border-radius: 999px;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 650;
+  padding: 0.45rem 1.05rem;
+  cursor: pointer;
+  box-shadow: 0 2px 6px
+    color-mix(in oklch, var(--pw-packages-accent), transparent 74%);
+  transition: background var(--studio-transition-fast, 0.1s ease),
+    box-shadow var(--studio-transition-fast, 0.1s ease);
+}
+.pw-install__add:hover:not(:disabled) {
+  background: color-mix(
+    in oklch,
+    var(--pw-packages-accent),
+    var(--pw-packages-fill) 30%
+  );
+}
+.pw-install__add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}`));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -105,7 +1120,7 @@ const plugins = [{
     } = await __vitePreload(async () => {
       const {
         mount: mount2
-      } = await import("./assets/mount-Bop__7hB.js");
+      } = await import("./assets/mount-DiYNUdeB.js");
       return {
         mount: mount2
       };