@lapismd/design-core 0.2.0 → 0.3.0

package/dist/shared/workspace/settings/WorkspaceSettings.css

@@ -0,0 +1,1376 @@
+.ui-workspace-settings {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-background);
+  font-size: 1rem;
+  container-name: workspace-settings;
+  container-type: inline-size;
+}
+
+.ui-workspace-settings__mobile-toolbar {
+  display: none;
+}
+
+.ui-workspace-settings__sidebar {
+  display: flex;
+  width: 14rem;
+  min-width: 11rem;
+  min-height: 0;
+  flex: 0 0 14rem;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--ui-workspace-border);
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-settings__search {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  border-bottom: 1px solid var(--ui-workspace-border);
+  padding: 0.5rem;
+}
+
+.ui-workspace-settings__search
+  [data-ui-component="input-group"][data-ui-part="input-group"] {
+  width: 100%;
+  min-height: 2rem;
+  border-color: var(--ui-workspace-border-strong);
+  border-radius: var(--ui-workspace-settings-control-radius);
+  background: var(--ui-workspace-background);
+}
+
+.ui-workspace-settings__search
+  [data-ui-component="input-group"][data-ui-part="input-group-addon"] {
+  color: var(--ui-workspace-muted-foreground);
+}
+
+.ui-workspace-settings__search svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.ui-workspace-settings__search [data-ui-component="input"] {
+  height: 2rem;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.875rem;
+}
+
+.ui-workspace-settings__search
+  [data-ui-component="input"]::-webkit-search-cancel-button,
+.ui-workspace-settings__search
+  [data-ui-component="input"]::-webkit-search-decoration {
+  display: none;
+}
+
+.ui-workspace-settings__search-clear {
+  --ui-button-height: 1rem;
+  width: 1rem !important;
+  height: 1rem !important;
+  border-radius: 999px;
+  padding: 0;
+  color: var(--ui-workspace-accent-foreground);
+  background: color-mix(in srgb, var(--ui-workspace-accent) 60%, transparent);
+}
+
+.ui-workspace-settings__search-clear svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: currentcolor;
+}
+
+.ui-workspace-settings__navigation {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 0.5rem;
+}
+
+.ui-workspace-settings__navigation section + section {
+  margin-top: 1.25rem;
+}
+
+.ui-workspace-settings__navigation h2 {
+  display: flex;
+  height: 2rem;
+  align-items: center;
+  margin: 0;
+  border-radius: var(--ui-workspace-settings-control-radius);
+  padding: 0 0.5rem;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+}
+
+.ui-workspace-settings__navigation button {
+  display: flex;
+  width: 100%;
+  height: var(--ui-workspace-settings-navigation-row-height);
+  min-height: var(--ui-workspace-settings-navigation-row-height);
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: var(--ui-workspace-settings-control-radius);
+  padding: 0.5rem;
+  color: var(--ui-workspace-foreground);
+  background: transparent;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1rem;
+  text-align: left;
+}
+
+.ui-workspace-settings__navigation button + button {
+  margin-top: 0.25rem;
+}
+
+.ui-workspace-settings__navigation button:hover {
+  background: var(--ui-workspace-muted);
+}
+
+.ui-workspace-settings__navigation button[data-active="true"] {
+  background: var(--ui-workspace-settings-navigation-active-background);
+  font-weight: 500;
+}
+
+.ui-workspace-settings__navigation button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-workspace-settings__content {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.ui-workspace-settings__content-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding-right: 4px;
+  scrollbar-width: none;
+}
+
+.ui-workspace-settings__content-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-workspace-settings__scrollbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 1px;
+  bottom: 0;
+  width: 7px;
+}
+
+.ui-workspace-settings__scrollbar > div {
+  position: absolute;
+  right: 0;
+  width: 7px;
+  border-radius: 999px;
+  background: var(--ui-workspace-border);
+}
+
+.ui-workspace-settings__content-inner {
+  width: min(100%, 68rem);
+  min-height: 100%;
+  margin-inline: auto;
+  padding: 0.75rem 2rem 4rem;
+}
+
+.ui-workspace-settings__schema-form {
+  display: grid;
+  width: min(100%, 68rem);
+  gap: 1.75rem;
+}
+
+.ui-workspace-settings__schema-section > header,
+.ui-workspace-settings-page > header {
+  margin: 0 0 0.85rem;
+  padding: 0;
+  color: var(--ui-workspace-foreground);
+  background: transparent;
+}
+
+.ui-workspace-settings__schema-section h1,
+.ui-workspace-settings__schema-section h2,
+.ui-workspace-settings-page h1 {
+  margin: 0;
+  font-size: var(--ui-workspace-settings-heading-size);
+  font-weight: var(--ui-workspace-settings-heading-weight);
+  line-height: 1.25;
+}
+
+.ui-workspace-settings__schema-section > header p,
+.ui-workspace-settings-page > header p {
+  margin: 0.25rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+.ui-workspace-settings__schema-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(10rem, max-content);
+  overflow: hidden;
+  border-radius: 0.5rem;
+  padding: 0 1.25rem;
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-settings__schema-section
+  + .ui-workspace-settings__schema-section {
+  margin-top: 1.75rem;
+}
+
+.ui-workspace-settings__schema-body > .ui-workspace-settings__schema-section {
+  grid-column: 1 / -1;
+  padding: 1rem 0;
+}
+
+.ui-workspace-settings__schema-body
+  > .ui-workspace-settings__schema-section
+  + .ui-workspace-settings__schema-section {
+  border-top: 1px solid var(--ui-workspace-border);
+}
+
+.ui-workspace-settings__schema-body
+  > .ui-workspace-settings__schema-section
+  > .ui-workspace-settings__schema-body {
+  padding-inline: 0;
+}
+
+.ui-workspace-setting-item {
+  display: grid;
+  min-height: 0;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: start;
+  gap: 1rem;
+  border-top: 1px solid var(--ui-workspace-border);
+  padding: 1rem 0;
+}
+
+.ui-workspace-setting-item[data-setting-layout="stacked"] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+
+.ui-workspace-setting-item[data-setting-layout="stacked"]
+  .ui-workspace-setting-item__info,
+.ui-workspace-setting-item[data-setting-layout="stacked"]
+  .ui-workspace-setting-item__control {
+  width: 100%;
+  max-width: 100%;
+}
+
+.ui-workspace-setting-item[data-setting-layout="stacked"]
+  .ui-workspace-setting-item__control {
+  min-width: 0;
+  align-self: stretch;
+  justify-self: stretch;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.ui-workspace-setting-item:first-child {
+  border-top: 0;
+}
+
+.ui-workspace-setting-item__info label {
+  display: block;
+  font-size: var(--ui-workspace-settings-label-size);
+  font-weight: 400;
+}
+
+.ui-workspace-setting-item__info p {
+  margin: 0.2rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: var(--ui-workspace-settings-description-size);
+  line-height: 1.3;
+}
+
+.ui-workspace-setting-item__info .ui-workspace-setting-item__error {
+  color: var(--ui-workspace-destructive);
+}
+
+.ui-workspace-setting-item__control {
+  display: flex;
+  min-width: 12rem;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.ui-workspace-setting-toggle-table {
+  --muted: var(--ui-workspace-panel-action-hover-background);
+  grid-column: 1 / -1;
+  width: 100%;
+  min-width: 0;
+}
+
+.ui-workspace-setting-toggle-table
+  > [data-ui-component="table"][data-ui-part="table-container"] {
+  overflow-x: hidden;
+}
+
+.ui-workspace-setting-toggle-table
+  [data-ui-component="table"][data-ui-part="table"] {
+  table-layout: fixed;
+}
+
+.ui-workspace-setting-toggle-table__feature {
+  width: auto;
+  min-width: 0;
+  white-space: normal;
+}
+
+.ui-workspace-setting-toggle-table__feature label {
+  display: block;
+  font-size: var(--ui-workspace-settings-label-size);
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.ui-workspace-setting-toggle-table__feature p {
+  margin: 0.2rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: var(--ui-workspace-settings-description-size);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-toggle-table__feature .ui-workspace-setting-item__error {
+  color: var(--ui-workspace-destructive);
+}
+
+.ui-workspace-setting-toggle-table__enabled {
+  width: 5.5rem;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.ui-workspace-setting-toggle-table__enabled
+  [data-ui-component="switch"][data-ui-part="switch"] {
+  margin-inline-start: auto;
+}
+
+.ui-workspace-settings__search-hit
+  .ui-workspace-setting-toggle-table__feature
+  p {
+  color: var(--ui-workspace-foreground);
+}
+
+.ui-workspace-setting-item [data-ui-component="password-input"] {
+  width: min(100%, 20rem);
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="password-input"]
+  [data-ui-component="input"] {
+  width: 100%;
+}
+
+.ui-workspace-setting-item [data-ui-component="input"]:not([type="range"]),
+.ui-workspace-setting-item [data-ui-component="textarea"],
+.ui-workspace-setting-item
+  [data-ui-component="select"][data-ui-part="select-trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-icon-picker"][data-ui-part="trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-setting-multiselect"][data-ui-part="trigger"] {
+  width: min(100%, 20rem);
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: var(--ui-workspace-settings-control-radius);
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-background);
+  font-size: 0.875rem;
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="input"]:not([type="range"]):focus-visible,
+.ui-workspace-setting-item [data-ui-component="textarea"]:focus-visible {
+  border-color: transparent;
+}
+
+.ui-workspace-setting-item [data-ui-component="input"]:not([type="range"]),
+.ui-workspace-setting-item
+  [data-ui-component="select"][data-ui-part="select-trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-icon-picker"][data-ui-part="trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-setting-multiselect"][data-ui-part="trigger"] {
+  height: var(--ui-workspace-settings-control-height);
+  min-height: var(--ui-workspace-settings-control-height);
+}
+
+.ui-workspace-setting-item [data-ui-component="textarea"] {
+  field-sizing: content;
+  height: auto;
+  min-height: var(--ui-workspace-settings-control-height);
+  overflow: visible;
+  overflow-wrap: anywhere;
+  resize: none;
+  white-space: pre-wrap;
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="select"][data-ui-part="select-trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-setting-multiselect"][data-ui-part="trigger"],
+.ui-workspace-setting-item
+  [data-ui-component="workspace-icon-picker"][data-ui-part="trigger"] {
+  justify-content: space-between;
+}
+
+.ui-workspace-setting-select__value {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-ui-component="workspace-setting-multiselect"][data-ui-part="root"] {
+  display: contents;
+}
+
+[data-ui-component="workspace-setting-multiselect"][data-ui-part="trigger"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0;
+  padding-inline: 0.75rem;
+}
+
+[data-ui-component="workspace-setting-multiselect"] [data-ui-part="chevron"] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  line-height: 0;
+  opacity: 0.5;
+}
+
+[data-ui-component="workspace-setting-multiselect"][data-ui-part="trigger"]
+  [data-ui-component="workspace-icon"] {
+  display: block;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-ui-component="workspace-setting-multiselect"][data-ui-part="content"] {
+  --ui-command-view-background: transparent;
+  --ui-command-view-foreground: var(--ui-workspace-popover-foreground);
+  --ui-command-view-muted-foreground: var(--ui-workspace-muted-foreground);
+  --ui-command-view-border-color: var(--ui-workspace-border);
+  --ui-command-view-radius: var(--ui-workspace-radius-medium);
+  --ui-command-view-item-radius: var(--ui-workspace-radius-small);
+  --ui-command-view-item-selected-background: var(--ui-workspace-selection);
+  --ui-command-view-item-selected-foreground: var(
+    --ui-workspace-popover-foreground
+  );
+  --ui-command-view-list-max-height: 17.5rem;
+  overflow: hidden;
+}
+
+.ui-workspace-setting-restore,
+.ui-workspace-setting-item__control > [data-ui-component="button"],
+.ui-workspace-setting-list [data-ui-component="button"],
+.ui-workspace-setting-key-value [data-ui-component="button"],
+.ui-workspace-setting-object-collection [data-ui-component="button"] {
+  --ui-button-radius: var(--ui-workspace-settings-control-radius);
+  min-height: var(--ui-workspace-settings-control-height);
+}
+
+.ui-workspace-setting-restore {
+  width: var(--ui-workspace-settings-control-height);
+  padding: 0.375rem;
+}
+
+.ui-workspace-setting-restore svg,
+.ui-workspace-setting-item__control > [data-ui-component="button"] svg,
+.ui-workspace-setting-list [data-ui-component="button"] svg,
+.ui-workspace-setting-key-value [data-ui-component="button"] svg,
+.ui-workspace-setting-object-collection [data-ui-component="button"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+@media (hover: hover) {
+  .ui-workspace-settings
+    :is(
+      .ui-workspace-setting-restore,
+      .ui-workspace-setting-list [data-ui-component="button"],
+      .ui-workspace-setting-key-value [data-ui-component="button"],
+      .ui-workspace-setting-object-collection [data-ui-component="button"]
+    ):is([data-variant="ghost"], [data-variant="outline"]):hover,
+  .ui-workspace-settings
+    :is(
+      .ui-workspace-setting-key-value,
+      .ui-workspace-setting-object-collection
+    )
+    [data-ui-part="table-cell"]
+    [data-ui-component="button"]:is(
+      [data-variant="ghost"],
+      [data-variant="outline"]
+    ):hover {
+    color: var(--ui-workspace-panel-action-hover-foreground);
+    background-color: var(--ui-workspace-panel-action-hover-background);
+  }
+
+  .ui-workspace-settings
+    :is(
+      .ui-workspace-setting-key-value,
+      .ui-workspace-setting-object-collection,
+      .ui-workspace-setting-toggle-table
+    )
+    [data-ui-component="table"][data-ui-part="table-row"]:hover {
+    background-color: transparent;
+  }
+}
+
+.ui-workspace-setting-range {
+  --muted: var(--ui-workspace-panel-action-hover-background);
+  display: flex;
+  min-width: 12rem;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ui-workspace-setting-range
+  [data-ui-component="slider"][data-ui-part="slider"] {
+  width: 9rem;
+  min-width: 9rem;
+}
+
+.ui-workspace-setting-range output {
+  min-width: 2.5rem;
+  color: var(--ui-workspace-muted-foreground);
+  text-align: right;
+}
+
+.ui-workspace-setting-list {
+  display: flex;
+  width: 20rem;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.ui-workspace-setting-list > div {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.ui-workspace-setting-list > div [data-ui-component="input"] {
+  flex: 1 1 auto;
+}
+
+.ui-workspace-setting-list__flag {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--ui-workspace-foreground);
+  font-size: var(--ui-workspace-settings-label-size);
+  line-height: 1.3;
+}
+
+.ui-workspace-setting-list__flag span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-add {
+  display: inline-flex;
+  align-items: center;
+  align-self: end;
+  gap: 0.25rem;
+  width: fit-content;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--ui-workspace-muted-foreground);
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.ui-workspace-setting-add svg {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.ui-workspace-setting-add:hover,
+.ui-workspace-setting-add:focus-visible {
+  color: var(--ui-workspace-foreground);
+  background: transparent;
+}
+
+.ui-workspace-setting-add:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-workspace-setting-add:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ui-workspace-setting-key-value,
+.ui-workspace-setting-object-collection {
+  --muted: var(--ui-workspace-panel-action-hover-background);
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow-x: auto;
+}
+
+.ui-workspace-setting-key-value [data-ui-part="table-head"]:first-child {
+  width: 45%;
+}
+
+.ui-workspace-setting-key-value [data-ui-part="table-head"]:last-child,
+.ui-workspace-setting-object-collection [data-ui-part="table-head"]:last-child {
+  width: 4rem;
+  text-align: right;
+}
+
+.ui-workspace-setting-key-value [data-ui-part="table-head"],
+.ui-workspace-setting-object-collection [data-ui-part="table-head"] {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-workspace-setting-key-value [data-ui-part="table-cell"]:last-child,
+.ui-workspace-setting-object-collection [data-ui-part="table-cell"]:last-child {
+  text-align: right;
+}
+
+.ui-workspace-setting-object-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.2rem;
+}
+
+.ui-workspace-setting-object-code,
+.ui-workspace-setting-object-value,
+.ui-workspace-setting-object-status {
+  display: inline-block;
+  max-width: 20rem;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.8125rem;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-object-code {
+  font-family: var(--ui-font-mono, monospace);
+}
+
+.ui-workspace-setting-object-status {
+  border-radius: 999px;
+  padding: 0.2rem 0.5rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: var(--ui-workspace-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-workspace-setting-output {
+  display: inline-flex;
+  min-height: var(--ui-workspace-settings-control-height);
+  max-width: 24rem;
+  align-items: center;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.8125rem;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-output[data-presentation="code"] code {
+  font-family: var(--ui-font-mono, monospace);
+}
+
+.ui-workspace-setting-output[data-presentation="status"] {
+  min-height: 1.65rem;
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: var(--ui-workspace-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-workspace-setting-action-result,
+.ui-workspace-setting-object-action-result {
+  margin: 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+}
+
+.ui-workspace-setting-action-result[data-tone="success"],
+.ui-workspace-setting-object-action-result[data-tone="success"] {
+  color: var(--ui-workspace-success, #15803d);
+}
+
+.ui-workspace-setting-action-result[data-tone="warning"],
+.ui-workspace-setting-object-action-result[data-tone="warning"] {
+  color: var(--ui-workspace-warning, #a16207);
+}
+
+.ui-workspace-setting-action-result[data-tone="error"],
+.ui-workspace-setting-object-action-result[data-tone="error"] {
+  color: var(--ui-workspace-destructive, #b91c1c);
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"] {
+  --ui-button-padding-inline: 0.4rem;
+  min-width: 0;
+  max-width: 100%;
+  height: 1.65rem;
+  gap: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: var(--ui-workspace-settings-control-radius);
+  color: inherit;
+  background: color-mix(in srgb, currentcolor 7%, transparent);
+  font-weight: 500;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"] code {
+  min-width: 0;
+  overflow: hidden;
+  font: 500 0.75rem/1 var(--ui-font-mono, monospace);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"]
+  [data-ui-component="workspace-icon"] {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 auto;
+}
+
+button.ui-workspace-copyable-value[data-copy-failed="true"] {
+  color: var(--ui-workspace-destructive);
+}
+
+.ui-workspace-copyable-value__empty {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+@media (hover: hover) {
+  button.ui-workspace-copyable-value[data-ui-component="button"]:hover {
+    border-color: color-mix(in srgb, currentcolor 20%, transparent);
+    color: var(--ui-workspace-panel-action-hover-foreground);
+    background: var(--ui-workspace-panel-action-hover-background);
+    box-shadow: 0 1px 2px color-mix(in srgb, currentcolor 14%, transparent);
+  }
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"]:focus-visible {
+  border-color: color-mix(in srgb, currentcolor 28%, transparent);
+  color: var(--ui-workspace-panel-action-hover-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+
+.ui-workspace-setting-unsupported {
+  max-width: 22rem;
+}
+
+.ui-workspace-setting-item [data-ui-component="input"][type="color"] {
+  --swatch-width: 1.5rem;
+  --swatch-height: 1.5rem;
+  --swatch-radius: 0.875rem;
+  appearance: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  min-height: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="input"][type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0.125rem;
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="input"][type="color"]::-webkit-color-swatch {
+  width: var(--swatch-width);
+  height: var(--swatch-height);
+  border: 0;
+  border-radius: var(--swatch-radius);
+  box-shadow: 0 0 0 1px var(--ui-workspace-border);
+}
+
+.ui-workspace-setting-item
+  [data-ui-component="input"][type="color"]:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-workspace-settings__search-results {
+  width: min(100%, 68rem);
+  padding-top: 0.75rem;
+}
+
+.ui-workspace-settings__search-results h1 {
+  margin: 0 0 1.75rem;
+  color: var(--ui-workspace-foreground);
+  font-size: var(--ui-workspace-settings-heading-size);
+  font-weight: var(--ui-workspace-settings-heading-weight);
+  line-height: 1.2;
+}
+
+.ui-workspace-settings__search-empty {
+  width: 100%;
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-settings__search-list {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.ui-workspace-settings__search-result {
+  display: grid;
+  min-height: 5.75rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background: var(--ui-workspace-panel);
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+
+.ui-workspace-settings__search-result:hover,
+.ui-workspace-settings__search-result:focus-within {
+  border-color: var(--ui-workspace-border-strong);
+  background: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 6%,
+    var(--ui-workspace-panel)
+  );
+}
+
+.ui-workspace-settings__search-result-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-workspace-settings__search-result-main:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 3px;
+}
+
+.ui-workspace-settings__search-result-actions {
+  display: flex;
+  align-items: center;
+}
+
+.ui-workspace-settings__search-result-open {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--ui-workspace-radius-small);
+  padding: 0;
+  color: var(--ui-workspace-muted-foreground);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workspace-settings__search-result-open:hover {
+  color: var(--ui-workspace-panel-action-hover-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+
+.ui-workspace-settings__search-result-open:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 1px;
+}
+
+.ui-workspace-settings__search-result-open svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ui-workspace-settings__search-result-title,
+.ui-workspace-settings__search-result-path,
+.ui-workspace-settings__search-result-excerpt {
+  width: 100%;
+  min-width: 0;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-settings__search-result-title {
+  color: var(--ui-workspace-foreground);
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.ui-workspace-settings__search-result-path,
+.ui-workspace-settings__search-result-excerpt {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.ui-workspace-settings__search-result-path {
+  font-size: 0.72rem;
+}
+
+.ui-workspace-settings__search-result-excerpt {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: pre-line;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.ui-workspace-settings__search-hit {
+  border-radius: var(--ui-workspace-radius-medium);
+  color: var(--ui-workspace-foreground);
+  background: color-mix(
+    in srgb,
+    var(--ui-workspace-accent) 22%,
+    var(--ui-workspace-panel)
+  );
+  box-shadow: 0 0.35rem 1.1rem
+    color-mix(in srgb, var(--ui-workspace-accent) 22%, transparent);
+  transition:
+    background-color 150ms ease,
+    box-shadow 150ms ease,
+    color 150ms ease;
+}
+
+.ui-workspace-setting-item.ui-workspace-settings__search-hit,
+.ui-workspace-settings__schema-body
+  > .ui-workspace-settings__schema-section.ui-workspace-settings__search-hit {
+  margin-inline: -0.75rem;
+  padding-inline: 0.75rem;
+}
+
+.ui-workspace-settings__search-hit .ui-workspace-setting-item__info p {
+  color: color-mix(in srgb, var(--ui-workspace-foreground) 78%, transparent);
+}
+
+.ui-workspace-hotkeys {
+  width: 100%;
+  max-width: 72rem;
+  margin-inline: auto;
+  font-size: 0.875rem;
+}
+
+.ui-workspace-hotkeys__header {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--ui-workspace-border);
+  padding: 0.5rem 0 1.25rem;
+  background: color-mix(
+    in srgb,
+    var(--ui-workspace-background) 95%,
+    transparent
+  );
+  backdrop-filter: blur(8px);
+}
+
+.ui-workspace-hotkeys__summary h1 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.ui-workspace-hotkeys__summary p {
+  margin: 0.125rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+.ui-workspace-hotkeys__filters {
+  display: flex;
+  max-width: 70%;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.ui-workspace-hotkeys__search {
+  position: relative;
+  width: min(22.5rem, 100%);
+  min-width: 16.25rem;
+}
+
+.ui-workspace-hotkeys__search > svg {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--ui-workspace-muted-foreground);
+  transform: translateY(-50%);
+}
+
+.ui-workspace-hotkeys__search [data-ui-component="input"] {
+  height: 2.5rem;
+  padding-inline: 2.5rem 3rem;
+}
+
+.ui-workspace-hotkeys__search-actions {
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  transform: translateY(-50%);
+}
+
+.ui-workspace-hotkeys__list article {
+  display: flex;
+  min-height: 5.375rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 1px solid var(--ui-workspace-border);
+  padding: 1.25rem 0;
+}
+
+.ui-workspace-hotkeys__command {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.ui-workspace-hotkeys__command strong {
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workspace-hotkeys__conflict {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  color: var(--ui-workspace-destructive);
+  font-size: 0.75rem;
+}
+
+.ui-workspace-hotkeys__conflict svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-workspace-hotkeys__bindings {
+  display: flex;
+  max-width: 50%;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.ui-workspace-hotkeys__blank,
+.ui-workspace-hotkeys__chip {
+  display: inline-flex;
+  height: 2.25rem;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: var(--ui-workspace-radius-small);
+  padding: 0 0.75rem;
+  background: var(--ui-workspace-muted);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.ui-workspace-hotkeys__chip > button {
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  place-content: center;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+}
+
+.ui-workspace-hotkeys__chip > button:hover {
+  color: var(--ui-workspace-foreground);
+}
+
+.ui-workspace-hotkeys__chip svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-workspace-hotkeys__capture {
+  min-width: 10rem;
+}
+
+.ui-workspace-plugins {
+  overflow: hidden;
+  border-radius: var(--ui-workspace-radius-large);
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-plugins-group + .ui-workspace-plugins-group {
+  margin-top: 1.5rem;
+}
+
+.ui-workspace-plugins-group > h2 {
+  margin: 0 0 0.5rem;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.875rem;
+  font-weight: 650;
+}
+
+.ui-workspace-plugins article {
+  display: grid;
+  grid-template-columns: auto minmax(10rem, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 1px solid var(--ui-workspace-border);
+  padding: 0.875rem 1rem;
+}
+
+.ui-workspace-plugins__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.ui-workspace-plugins__settings {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--ui-workspace-radius-small);
+  padding: 0;
+  color: var(--ui-workspace-muted-foreground);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workspace-plugins__settings:hover {
+  color: var(--ui-workspace-panel-action-hover-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+
+.ui-workspace-plugins__settings:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 1px;
+}
+
+.ui-workspace-plugins__settings svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-workspace-plugins article:last-child {
+  border-bottom: 0;
+}
+
+.ui-workspace-plugins p,
+.ui-workspace-plugins [data-status] {
+  margin: 0.125rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.ui-workspace-plugins__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-workspace-plugins__badge {
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: 999px;
+  padding: 0.125rem 0.375rem;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.ui-workspace-plugins__error {
+  display: block;
+  margin-top: 0.25rem;
+  color: var(--ui-workspace-destructive, var(--destructive));
+  font-size: 0.8125rem;
+}
+
+.ui-workspace-plugins article {
+  grid-template-columns: auto minmax(10rem, 1fr) auto;
+}
+
+.ui-workspace-plugins__icon {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-content: center;
+  border-radius: var(--ui-workspace-radius-medium);
+  background: var(--ui-workspace-muted);
+}
+
+.ui-workspace-plugins__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+@container workspace-settings (max-width: 44rem) {
+  .ui-workspace-settings__sidebar {
+    display: none;
+  }
+
+  .ui-workspace-settings__mobile-toolbar {
+    position: absolute;
+    z-index: 2;
+    inset: 0 0 auto;
+    display: flex;
+    min-width: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    border-bottom: 1px solid var(--ui-workspace-border);
+    padding: 0.375rem 0.5rem;
+    background: var(--ui-workspace-panel);
+  }
+
+  .ui-workspace-settings__content-inner {
+    padding-top: 3.75rem;
+  }
+
+  .ui-workspace-settings__mobile-navigation-trigger {
+    min-width: 0;
+    max-width: 100%;
+    justify-content: flex-start;
+    color: var(--ui-workspace-foreground);
+  }
+
+  .ui-workspace-settings__mobile-navigation-trigger span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-workspace-settings__content-inner {
+    padding-inline: 1rem;
+  }
+
+  .ui-workspace-setting-item {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .ui-workspace-setting-item__control {
+    min-width: 0;
+    justify-content: flex-start;
+  }
+
+  .ui-workspace-hotkeys__header,
+  .ui-workspace-hotkeys__list article {
+    flex-direction: column;
+  }
+
+  .ui-workspace-hotkeys__filters,
+  .ui-workspace-hotkeys__bindings {
+    width: 100%;
+    max-width: none;
+    justify-content: flex-start;
+  }
+
+  .ui-workspace-hotkeys__filters {
+    flex-wrap: wrap;
+  }
+}
+
+.ui-workspace-settings__mobile-sheet {
+  width: min(20rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  min-height: 0;
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-settings__mobile-sheet-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding-top: 2.75rem;
+}