@lapis-notes/workspace 0.1.0 → 0.2.0

package/dist/plugin-management/plugin-management.css

@@ -3,10 +3,7 @@
     --ui-workspace-panel,
     var(--ui-workspace-background, var(--background))
   );
-  --ui-lapis-plugin-muted-surface: var(
-    --ui-workspace-muted,
-    var(--muted)
-  );
+  --ui-lapis-plugin-muted-surface: var(--ui-workspace-muted, var(--muted));
   --ui-lapis-plugin-foreground: var(
     --ui-workspace-foreground,
     var(--foreground)
@@ -20,6 +17,15 @@
     --ui-workspace-accent,
     var(--interactive-accent, var(--primary))
   );
+  --ui-lapis-plugin-accent-foreground: var(
+    --ui-workspace-accent-foreground,
+    var(--primary-foreground, #fff)
+  );
+  --ui-lapis-plugin-success: var(--success, #16a34a);
+  --ui-lapis-plugin-warning: var(
+    --ui-workspace-warning,
+    var(--warning, #d97706)
+  );
   --ui-lapis-plugin-hover: var(
     --ui-workspace-panel-action-hover-background,
     var(--background-modifier-hover, var(--accent))
@@ -34,8 +40,49 @@
   color: var(--ui-lapis-plugin-foreground);
 }
 
-.lapis-plugin-management__header,
-.lapis-plugin-management__trust {
+/* The uninstall confirmation owns its public token bridge. */
+.lapis-plugin-uninstall-dialog {
+  --ui-lapis-plugin-surface: var(
+    --ui-workspace-panel,
+    var(--ui-workspace-background, var(--background))
+  );
+  --ui-lapis-plugin-muted-surface: var(--ui-workspace-muted, var(--muted));
+  --ui-lapis-plugin-foreground: var(
+    --ui-workspace-foreground,
+    var(--foreground)
+  );
+  --ui-lapis-plugin-muted-foreground: var(
+    --ui-workspace-muted-foreground,
+    var(--muted-foreground)
+  );
+  --ui-lapis-plugin-border: var(--ui-workspace-border, var(--border));
+  --ui-lapis-plugin-accent: var(
+    --ui-workspace-accent,
+    var(--interactive-accent, var(--primary))
+  );
+  --ui-lapis-plugin-accent-foreground: var(
+    --ui-workspace-accent-foreground,
+    var(--primary-foreground, #fff)
+  );
+  --ui-lapis-plugin-success: var(--success, #16a34a);
+  --ui-lapis-plugin-warning: var(
+    --ui-workspace-warning,
+    var(--warning, #d97706)
+  );
+  --ui-lapis-plugin-danger: var(
+    --ui-workspace-destructive,
+    var(--destructive, #dc2626)
+  );
+  --ui-lapis-plugin-danger-foreground: var(--destructive-foreground, #fff);
+  --ui-lapis-plugin-hover: var(
+    --ui-workspace-panel-action-hover-background,
+    var(--background-modifier-hover, var(--accent))
+  );
+  --ui-lapis-plugin-radius: var(--ui-workspace-radius-medium, var(--radius));
+  color: var(--ui-lapis-plugin-foreground);
+}
+
+.lapis-plugin-management__header {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -43,12 +90,15 @@
   gap: 0.75rem;
 }
 
+.lapis-plugin-management[data-ui-part="community-plugins"] {
+  min-height: 100%;
+}
+
 .lapis-plugin-management__header h1,
 .lapis-plugin-management__trust h1,
 .lapis-plugin-card h2,
 .lapis-plugin-registry-card h2,
-.lapis-plugin-settings-row h2,
-.lapis-plugin-detail-dialog h2 {
+.lapis-plugin-settings-row h2 {
   margin: 0;
   color: var(--ui-lapis-plugin-foreground);
   font-size: 0.95rem;
@@ -60,8 +110,7 @@
 .lapis-plugin-management__trust p,
 .lapis-plugin-card p,
 .lapis-plugin-registry-card p,
-.lapis-plugin-settings-row p,
-.lapis-plugin-detail-dialog p {
+.lapis-plugin-settings-row p {
   margin: 0.25rem 0 0;
   color: var(--ui-lapis-plugin-muted-foreground);
   font-size: 0.8125rem;
@@ -74,8 +123,7 @@
 .lapis-plugin-settings-row__actions,
 .lapis-plugin-settings-row__title-line,
 .lapis-plugin-settings-row__summary,
-.lapis-plugin-registry-card__metadata,
-.lapis-plugin-detail-dialog__metadata > div {
+.lapis-plugin-registry-card__metadata {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -118,10 +166,246 @@
 }
 
 .lapis-plugin-management__trust {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 3rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.875rem;
   border: 1px solid var(--ui-lapis-plugin-border);
   border-radius: var(--ui-lapis-plugin-radius);
-  padding: 0.875rem;
-  background: var(--ui-lapis-plugin-muted-surface);
+  padding: 0.875rem 1rem;
+  background: var(--ui-lapis-plugin-surface);
+}
+
+.lapis-plugin-management__trust[data-trust-state="trusted"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 24%,
+    var(--ui-lapis-plugin-border)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 4%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-management__trust[data-trust-state="untrusted"] {
+  align-items: start;
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 28%,
+    var(--ui-lapis-plugin-border)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 5%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-management__trust-icon {
+  display: grid;
+  width: 3rem;
+  height: 3rem;
+  place-items: center;
+  border-radius: calc(var(--ui-lapis-plugin-radius) + 0.125rem);
+}
+
+.lapis-plugin-management__trust-icon svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  stroke-width: 2;
+}
+
+[data-trust-state="trusted"] .lapis-plugin-management__trust-icon {
+  color: var(--ui-lapis-plugin-success);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 12%,
+    transparent
+  );
+}
+
+[data-trust-state="untrusted"] .lapis-plugin-management__trust-icon {
+  color: var(--ui-lapis-plugin-warning);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 12%,
+    transparent
+  );
+}
+
+.lapis-plugin-management__trust-content {
+  min-width: 0;
+}
+
+.lapis-plugin-management__trust-title-line {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.lapis-plugin-management__trust-title-line h1 {
+  font-size: 1rem;
+  line-height: 1.25;
+}
+
+.lapis-plugin-management__trust-badge {
+  display: inline-flex;
+  min-height: 1.5rem;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.lapis-plugin-management__trust-badge svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.lapis-plugin-management__trust-badge > span {
+  width: 0.3125rem;
+  height: 0.3125rem;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+[data-trust-state="trusted"] .lapis-plugin-management__trust-badge {
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 55%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 8%,
+    transparent
+  );
+}
+
+[data-trust-state="untrusted"] .lapis-plugin-management__trust-badge {
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 60%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 8%,
+    transparent
+  );
+}
+
+.lapis-plugin-management__trust-content > p {
+  max-width: 44rem;
+}
+
+.lapis-plugin-management__trust-action {
+  margin-top: 0.75rem;
+}
+
+.lapis-plugin-management__trust > .lapis-plugin-management__trust-action {
+  margin-top: 0;
+}
+
+.lapis-plugin-management__trust-action--revoke {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-workspace-destructive, var(--destructive)) 28%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: var(--ui-workspace-destructive, var(--destructive));
+  background: transparent;
+}
+
+.lapis-plugin-management__trust-action--revoke:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--ui-workspace-destructive, var(--destructive)) 7%,
+    transparent
+  );
+}
+
+.lapis-plugin-management__reload {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lapis-plugin-management__reload .lapis-plugin-management__icon {
+  color: var(--ui-lapis-plugin-accent);
+}
+
+.lapis-plugin-management__empty-state {
+  display: flex;
+  min-height: 18rem;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem 3rem;
+  text-align: center;
+}
+
+.lapis-plugin-management__empty-state-icon {
+  position: relative;
+  display: grid;
+  width: 5rem;
+  height: 4.75rem;
+  place-items: center;
+  margin-bottom: 0.75rem;
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 58%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-management__empty-state-icon > svg:first-child {
+  width: 3.75rem;
+  height: 3.75rem;
+  fill: color-mix(in srgb, var(--ui-lapis-plugin-accent) 10%, transparent);
+  filter: drop-shadow(
+    0 0.25rem 0.5rem
+      color-mix(in srgb, var(--ui-lapis-plugin-accent) 14%, transparent)
+  );
+  stroke-width: 1.5;
+  transform: rotate(-7deg);
+}
+
+.lapis-plugin-management__empty-state-icon > svg:last-child {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: color-mix(in srgb, var(--ui-lapis-plugin-accent) 52%, transparent);
+  fill: currentColor;
+  stroke-width: 1.5;
+}
+
+.lapis-plugin-management__empty-state h2 {
+  margin: 0;
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.lapis-plugin-management__empty-state p {
+  max-width: 30rem;
+  margin: 0.5rem 0 1rem;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  font-size: 0.8125rem;
+  line-height: 1.5;
 }
 
 .lapis-plugin-settings-row,
@@ -245,6 +529,9 @@
 
 .lapis-plugin-registry__tab-list.lapis-plugin-registry__tab-list
   .lapis-plugin-registry__tab {
+  min-width: 0;
+  flex: 1 1 0;
+  justify-content: center;
   border: 0;
   border-bottom: 2px solid transparent;
   border-radius: 0;
@@ -259,8 +546,8 @@
 }
 
 .lapis-plugin-registry__tab-list
-  [data-ui-component="tabs-trigger"][data-state="active"] {
-  border-bottom-color: var(--ui-lapis-plugin-accent);
+  .lapis-plugin-registry__tab[data-state="active"] {
+  border-bottom-color: var(--ui-lapis-plugin-accent) !important;
 }
 
 .lapis-plugin-registry__grid {
@@ -318,160 +605,844 @@
   margin-top: 0.75rem;
 }
 
-.lapis-plugin-detail-dialog {
-  width: min(90vw, 68.75rem);
-  max-width: min(90vw, 68.75rem);
-  height: min(85vh, 62.5rem);
-  max-height: min(85vh, 62.5rem);
-  overflow: hidden;
-  padding: 0;
+.lapis-plugin-readme {
+  min-height: 100%;
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 0.8125rem;
+  line-height: 1.6;
 }
 
-.lapis-plugin-detail-dialog__layout,
-.lapis-plugin-detail-dialog__detail,
-.lapis-plugin-detail-dialog__results {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex-direction: column;
+.lapis-plugin-readme img,
+.lapis-plugin-readme pre,
+.lapis-plugin-readme table {
+  max-width: 100%;
 }
 
-.lapis-plugin-detail-dialog__header,
-.lapis-plugin-detail-dialog__metadata,
-.lapis-plugin-detail-dialog__results > header {
-  flex: 0 0 auto;
-  border-bottom: 1px solid var(--ui-lapis-plugin-border);
-  padding: 1rem 1.5rem;
-}
+@media (max-width: 48rem) {
+  .lapis-plugin-management__trust {
+    grid-template-columns: 2.5rem minmax(0, 1fr);
+    align-items: start;
+  }
 
-.lapis-plugin-detail-dialog__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding-right: 3rem;
-}
+  .lapis-plugin-management__trust-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 
-.lapis-plugin-detail-dialog__panes {
-  min-height: 0;
-  flex: 1 1 auto;
+  .lapis-plugin-management__trust > .lapis-plugin-management__trust-action {
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .lapis-plugin-management__empty-state {
+    min-height: 14rem;
+    padding-block: 1.5rem 2rem;
+  }
+
+  .lapis-plugin-settings-row,
+  .lapis-plugin-card {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .lapis-plugin-settings-row__actions,
+  .lapis-plugin-card__actions {
+    grid-column: 2;
+    justify-content: flex-start;
+  }
 }
 
-.lapis-plugin-detail-dialog__results {
-  border-right: 1px solid var(--ui-lapis-plugin-border);
+@media (prefers-reduced-motion: reduce) {
+  .lapis-plugin-management__icon[data-spinning="true"] {
+    animation: none;
+  }
 }
 
-.lapis-plugin-detail-dialog__results > header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.75rem 1rem;
-  font-size: 0.75rem;
+/* Shared registry list experience. */
+
+.lapis-plugin-registry__refresh {
+  min-width: 5.75rem;
 }
 
-.lapis-plugin-detail-dialog__results > header span {
-  color: var(--ui-lapis-plugin-muted-foreground);
+.lapis-plugin-registry__refresh svg,
+.lapis-plugin-registry-toolbar__controls svg,
+.lapis-plugin-registry-row__actions svg {
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
-.lapis-plugin-detail-dialog__result-list,
-.lapis-plugin-detail-dialog__readme {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow: auto;
-  padding: 0.5rem;
+.lapis-plugin-registry__refresh svg[data-spinning="true"],
+.lapis-plugin-registry-row__actions svg[data-spinning="true"] {
+  animation: lapis-plugin-spin 1s linear infinite;
 }
 
-.lapis-plugin-detail-dialog__result-list {
+.lapis-plugin-registry__content,
+.lapis-plugin-registry__rows {
   display: flex;
+  min-width: 0;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.625rem;
 }
 
-.lapis-plugin-detail-dialog__result-list button {
+.lapis-plugin-registry-toolbar {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 0.25rem;
-  border: 1px solid transparent;
-  border-radius: var(--ui-workspace-radius-small, 0.25rem);
-  padding: 0.5rem 0.75rem;
-  color: var(--ui-lapis-plugin-muted-foreground);
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
+  padding-block: 0.125rem 0.25rem;
 }
 
-.lapis-plugin-detail-dialog__result-list button:hover,
-.lapis-plugin-detail-dialog__result-list button[data-active="true"] {
-  color: var(--ui-lapis-plugin-foreground);
-  background: var(--ui-lapis-plugin-hover);
+.lapis-plugin-registry-toolbar > .cv-search-filter-bar {
+  --cv-search-filter-content-justify: stretch;
+  --cv-search-filter-justify: stretch;
+  --cv-search-filter-max-width: 100%;
+  padding: 0;
 }
 
-.lapis-plugin-detail-dialog__result-list button[data-active="true"] {
-  border-color: var(--ui-lapis-plugin-accent);
+.lapis-plugin-registry-toolbar
+  .cv-search-filter-input[data-input-mode="plain"] {
+  width: min(100%, 28rem);
+  flex: 1 1 18rem;
 }
 
-.lapis-plugin-detail-dialog__result-list button span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.75rem;
+.lapis-plugin-registry-toolbar .cv-search-filter-bar__filters {
+  width: auto;
+  flex: 1 1 28rem;
 }
 
-.lapis-plugin-detail-dialog__result-list button small {
-  font-size: 0.6875rem;
+.lapis-plugin-registry-toolbar__controls,
+.lapis-plugin-registry-toolbar__summary {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
 }
 
-.lapis-plugin-detail-dialog__metadata {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.lapis-plugin-registry-toolbar__controls {
+  justify-content: flex-start;
 }
 
-.lapis-plugin-detail-dialog__metadata > div:first-child {
+.lapis-plugin-registry-toolbar__summary {
   color: var(--ui-lapis-plugin-muted-foreground);
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
 }
 
-.lapis-plugin-detail-dialog__readme {
-  padding: 1.5rem;
+.lapis-plugin-registry-toolbar__summary > span + span::before {
+  margin-inline-end: 0.375rem;
+  content: "·";
 }
 
-.lapis-plugin-readme {
-  min-height: 100%;
-  color: var(--ui-lapis-plugin-foreground);
-  font-size: 0.8125rem;
-  line-height: 1.6;
+.lapis-plugin-registry-row {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 2rem minmax(0, 1fr);
+  align-items: center;
+  gap: 0.625rem;
+  border: 1px solid var(--ui-lapis-plugin-border);
+  border-radius: var(--ui-lapis-plugin-radius);
+  padding: 0.625rem;
+  background: var(--ui-lapis-plugin-surface);
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
 }
 
-.lapis-plugin-readme img,
-.lapis-plugin-readme pre,
-.lapis-plugin-readme table {
-  max-width: 100%;
+.lapis-plugin-registry-row:hover,
+.lapis-plugin-registry-row:focus-within {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 32%,
+    var(--ui-lapis-plugin-border)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 3%,
+    var(--ui-lapis-plugin-surface)
+  );
 }
 
-@media (max-width: 48rem) {
-  .lapis-plugin-settings-row,
-  .lapis-plugin-card {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
+.lapis-plugin-registry-row[data-selected="true"] {
+  border-color: var(--ui-lapis-plugin-accent);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 6%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
 
-  .lapis-plugin-settings-row__actions,
-  .lapis-plugin-card__actions {
-    grid-column: 2;
+.lapis-plugin-registry-row__icon {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border: 1px solid var(--ui-lapis-plugin-border);
+  border-radius: var(--ui-workspace-radius-small, 0.375rem);
+  color: var(--ui-lapis-plugin-muted-foreground);
+  background: var(--ui-lapis-plugin-muted-surface);
+}
+
+.lapis-plugin-registry-row__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.lapis-plugin-registry-row__main {
+  min-width: 0;
+}
+
+button.lapis-plugin-registry-row__main {
+  display: block;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
+
+button.lapis-plugin-registry-row__main:focus-visible {
+  border-radius: var(--ui-workspace-radius-small, 0.375rem);
+  outline: 2px solid var(--ui-lapis-plugin-accent);
+  outline-offset: 0.25rem;
+}
+
+.lapis-plugin-registry-row__heading,
+.lapis-plugin-registry-row__identity,
+.lapis-plugin-registry-row__metadata,
+.lapis-plugin-registry-row__actions {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.lapis-plugin-registry-row__heading strong {
+  overflow: hidden;
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 0.8125rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lapis-plugin-registry-row__heading {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+}
+
+.lapis-plugin-registry-row__identity {
+  grid-column: 1;
+  align-items: center;
+  justify-self: start;
+}
+
+.lapis-plugin-registry-row__identity > strong {
+  display: inline-flex;
+  min-height: 1.25rem;
+  align-items: center;
+}
+
+.lapis-plugin-registry-row__version {
+  grid-column: 2;
+  align-self: start;
+  justify-self: end;
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.lapis-plugin-registry-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 650;
+}
+
+.lapis-plugin-registry-badge svg {
+  width: 0.6875rem;
+  height: 0.6875rem;
+}
+
+.lapis-plugin-registry-badge[data-registry-badge-tone="neutral"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 24%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: var(--ui-lapis-plugin-foreground);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 9%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-badge[data-registry-badge-tone="official"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 30%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 52%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 10%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-badge[data-registry-badge-tone="community"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 28%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 48%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 9%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-badge[data-registry-badge-tone="category"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 20%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: var(--ui-lapis-plugin-muted-foreground);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 7%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-badge[data-registry-badge-tone="web"],
+.lapis-plugin-registry-badge[data-registry-badge-tone="desktop"] {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 24%,
+    var(--ui-lapis-plugin-border)
+  );
+  color: var(--ui-lapis-plugin-foreground);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-muted-foreground) 9%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-row__description {
+  overflow: hidden;
+  display: block;
+  margin: 0.125rem 0 0;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lapis-plugin-registry-row__metadata {
+  margin-top: 0.25rem;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  font-size: 0.6875rem;
+}
+
+.lapis-plugin-registry-row__metadata > span + span::before {
+  margin-inline-end: 0.375rem;
+  content: "·";
+}
+
+.lapis-plugin-registry-row__actions {
+  position: absolute;
+  right: 0.625rem;
+  bottom: 0.625rem;
+  justify-content: flex-end;
+}
+
+.lapis-plugin-registry-row[data-has-actions="true"]
+  .lapis-plugin-registry-row__description,
+.lapis-plugin-registry-row[data-has-actions="true"]
+  .lapis-plugin-registry-row__metadata,
+.lapis-plugin-registry-row[data-has-actions="true"]
+  .lapis-plugin-registry-row__status-reason {
+  width: calc(100% - 7.5rem);
+}
+
+.lapis-plugin-registry-status {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+  font-size: 0.6875rem;
+}
+
+.lapis-plugin-registry-row__identity > .lapis-plugin-registry-status {
+  flex: 0 0 auto;
+  margin-top: 0;
+}
+
+.lapis-plugin-registry-row__status-reason {
+  display: block;
+  margin: 0.375rem 0 0;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  font-size: 0.6875rem;
+  line-height: 1.4;
+}
+
+.lapis-plugin-registry-row__status-reason[data-status-tone="danger"] {
+  color: var(--ui-workspace-destructive, var(--destructive));
+}
+
+.lapis-plugin-registry-row__status-reason[data-status-tone="warning"] {
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 62%,
+    var(--ui-lapis-plugin-foreground)
+  );
+}
+
+.lapis-plugin-registry-status__label {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 999px;
+  padding: 0.125rem 0.375rem;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  background: var(--ui-lapis-plugin-muted-surface);
+  font-weight: 650;
+}
+
+.lapis-plugin-registry-status__label svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-status-tone="success"] .lapis-plugin-registry-status__label {
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 48%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-success) 7%,
+    transparent
+  );
+}
+
+[data-status-tone="warning"] .lapis-plugin-registry-status__label {
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 48%,
+    var(--ui-lapis-plugin-foreground)
+  );
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-warning) 7%,
+    transparent
+  );
+}
+
+[data-status-tone="danger"] .lapis-plugin-registry-status__label {
+  color: var(--ui-workspace-destructive, var(--destructive));
+  background: color-mix(
+    in srgb,
+    var(--ui-workspace-destructive, var(--destructive)) 9%,
+    transparent
+  );
+}
+
+.lapis-plugin-registry-status__reason {
+  min-width: 0;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  overflow-wrap: anywhere;
+}
+
+.lapis-plugin-registry-state {
+  display: flex;
+  min-height: 17rem;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2rem 1rem 3rem;
+  color: var(--ui-lapis-plugin-muted-foreground);
+  text-align: center;
+}
+
+.lapis-plugin-registry-state[data-compact="true"] {
+  min-height: 7rem;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;
+  border: 1px solid var(--ui-lapis-plugin-border);
+  border-radius: var(--ui-lapis-plugin-radius);
+  padding: 0.75rem;
+  text-align: start;
+}
+
+.lapis-plugin-registry-state__icon {
+  position: relative;
+  display: grid;
+  width: 4.5rem;
+  height: 4.25rem;
+  flex: 0 0 auto;
+  place-items: center;
+  color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 58%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-registry-state__icon > svg:first-child {
+  width: 3.5rem;
+  height: 3.5rem;
+  fill: color-mix(in srgb, var(--ui-lapis-plugin-accent) 10%, transparent);
+  stroke-width: 1.5;
+  transform: rotate(-7deg);
+}
+
+.lapis-plugin-registry-state__icon > svg:last-child:not(:first-child) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: currentColor;
+}
+
+.lapis-plugin-registry-state[data-state-kind="success"]
+  .lapis-plugin-registry-state__icon {
+  color: var(--ui-lapis-plugin-success);
+}
+
+.lapis-plugin-registry-state[data-state-kind="warning"]
+  .lapis-plugin-registry-state__icon,
+.lapis-plugin-registry-state[data-state-kind="error"]
+  .lapis-plugin-registry-state__icon {
+  color: var(--ui-lapis-plugin-warning);
+}
+
+.lapis-plugin-registry-state[data-compact="true"]
+  .lapis-plugin-registry-state__icon {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.lapis-plugin-registry-state[data-compact="true"]
+  .lapis-plugin-registry-state__icon
+  svg {
+  position: static;
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  transform: none;
+}
+
+.lapis-plugin-registry-state__body h2 {
+  margin: 0;
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 0.95rem;
+  font-weight: 650;
+}
+
+.lapis-plugin-registry-state__body p {
+  max-width: 32rem;
+  margin: 0.35rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.lapis-plugin-registry-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+[data-compact="true"] .lapis-plugin-registry-state__actions {
+  justify-content: flex-start;
+}
+
+.lapis-plugin-registry-state__actions a {
+  color: var(--ui-lapis-plugin-accent);
+  font-size: 0.75rem;
+  text-decoration: none;
+}
+
+.lapis-plugin-registry-state__actions a:hover {
+  text-decoration: underline;
+}
+
+.lapis-plugin-registry-state details {
+  max-width: 100%;
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+}
+
+.lapis-plugin-registry-state code {
+  display: block;
+  max-width: 100%;
+  margin-top: 0.375rem;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+[data-ui-component="alert-dialog"][data-ui-part="alert-dialog-content"].lapis-plugin-uninstall-dialog {
+  width: min(28rem, calc(100vw - 2rem)) !important;
+  max-width: 28rem !important;
+  gap: 1rem !important;
+  padding: 1.25rem !important;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-header"] {
+  grid-template-columns: 2.5rem minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  place-items: start !important;
+  column-gap: 0.75rem !important;
+  text-align: start !important;
+}
+
+.lapis-plugin-uninstall-dialog__media {
+  grid-row: 1 / span 2;
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+  margin: 0 !important;
+  border: 1px solid
+    color-mix(in srgb, var(--ui-lapis-plugin-danger) 24%, transparent);
+  color: var(--ui-lapis-plugin-danger);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-danger) 9%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-uninstall-dialog__media svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-title"],
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-description"] {
+  grid-column: 2;
+}
+
+.lapis-plugin-uninstall-dialog__target {
+  min-width: 0;
+}
+
+.lapis-plugin-uninstall-dialog__target .lapis-plugin-registry-row {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 16%,
+    var(--ui-lapis-plugin-border)
+  );
+  background: var(--ui-lapis-plugin-muted-surface);
+}
+
+.lapis-plugin-uninstall-dialog__alternative {
+  --ui-field-background: var(--ui-lapis-plugin-surface);
+  --ui-field-foreground: var(--ui-lapis-plugin-muted-foreground);
+  min-width: 0;
+  justify-content: space-between;
+  border: 1px solid var(--ui-lapis-plugin-border);
+  border-radius: var(--ui-workspace-radius-medium, var(--radius));
+  padding: 0.75rem;
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 4%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-uninstall-dialog__alternative [data-ui-part="field-content"] {
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.lapis-plugin-uninstall-dialog__alternative [data-ui-part="field-label"] {
+  color: var(--ui-lapis-plugin-foreground);
+  font-size: 0.8125rem;
+  font-weight: 650;
+}
+
+.lapis-plugin-uninstall-dialog__alternative [data-ui-part="field-description"] {
+  color: var(--ui-lapis-plugin-muted-foreground);
+  font-size: 0.75rem;
+}
+
+.lapis-plugin-uninstall-dialog[data-action-mode="disable"]
+  .lapis-plugin-uninstall-dialog__media {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 26%,
+    transparent
+  );
+  color: var(--ui-lapis-plugin-accent);
+  background: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 9%,
+    var(--ui-lapis-plugin-surface)
+  );
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-footer"] {
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-cancel"],
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-action"] {
+  display: inline-flex;
+  width: auto;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border: 1px solid transparent;
+  border-radius: var(--ui-workspace-radius-small, 0.375rem);
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 650;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease,
+    color 120ms ease,
+    filter 120ms ease;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-cancel"] {
+  border-color: var(--ui-lapis-plugin-border);
+  color: var(--ui-lapis-plugin-foreground);
+  background: var(--ui-lapis-plugin-surface);
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-cancel"]:hover {
+  border-color: color-mix(
+    in srgb,
+    var(--ui-lapis-plugin-accent) 28%,
+    var(--ui-lapis-plugin-border)
+  );
+  background: var(--ui-lapis-plugin-hover);
+}
+
+.lapis-plugin-uninstall-dialog
+  [data-ui-part="alert-dialog-action"].lapis-plugin-uninstall-dialog__confirm--uninstall {
+  border-color: var(--ui-lapis-plugin-danger) !important;
+  color: var(--ui-lapis-plugin-danger-foreground) !important;
+  background-color: var(--ui-lapis-plugin-danger) !important;
+}
+
+.lapis-plugin-uninstall-dialog
+  [data-ui-part="alert-dialog-action"].lapis-plugin-uninstall-dialog__confirm--disable {
+  border-color: var(--ui-lapis-plugin-accent) !important;
+  color: var(--ui-lapis-plugin-accent-foreground) !important;
+  background-color: var(--ui-lapis-plugin-accent) !important;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-action"]:hover {
+  filter: brightness(0.9);
+}
+
+.lapis-plugin-uninstall-dialog
+  [data-ui-part="alert-dialog-cancel"]:focus-visible,
+.lapis-plugin-uninstall-dialog
+  [data-ui-part="alert-dialog-action"]:focus-visible {
+  outline: 2px solid var(--ui-lapis-plugin-accent);
+  outline-offset: 2px;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-cancel"]:disabled,
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-action"]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-action"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+@media (max-width: 64rem) {
+  .lapis-plugin-registry-toolbar__controls {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 48rem) {
+  .lapis-plugin-registry-toolbar
+    .cv-search-filter-input[data-input-mode="plain"],
+  .lapis-plugin-registry-toolbar .cv-search-filter-bar__filters {
+    width: 100%;
+    flex-basis: 100%;
+  }
+
+  .lapis-plugin-registry-row {
+    grid-template-columns: 2rem minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .lapis-plugin-registry-row__actions {
+    position: static;
+    grid-column: 2;
     justify-content: flex-start;
   }
 
-  .lapis-plugin-detail-dialog {
-    width: calc(100vw - 1rem);
-    max-width: calc(100vw - 1rem);
+  .lapis-plugin-registry-row[data-has-actions="true"]
+    .lapis-plugin-registry-row__description,
+  .lapis-plugin-registry-row[data-has-actions="true"]
+    .lapis-plugin-registry-row__metadata,
+  .lapis-plugin-registry-row[data-has-actions="true"]
+    .lapis-plugin-registry-row__status-reason {
+    width: 100%;
+  }
+
+  .lapis-plugin-registry-row__description {
+    white-space: normal;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lapis-plugin-management__icon[data-spinning="true"] {
+  .lapis-plugin-registry-row {
+    transition: none;
+  }
+
+  .lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-cancel"],
+  .lapis-plugin-uninstall-dialog [data-ui-part="alert-dialog-action"] {
+    transition: none;
+  }
+
+  .lapis-plugin-registry__refresh svg[data-spinning="true"],
+  .lapis-plugin-registry-row__actions svg[data-spinning="true"] {
     animation: none;
   }
 }