@lapismd/mira 0.0.1

package/dist/ui/styles.css

@@ -0,0 +1,760 @@
+.mira-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--mira-radius);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: 550;
+  gap: 0.4rem;
+  justify-content: center;
+  letter-spacing: 0;
+  line-height: 1;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
+  white-space: nowrap;
+}
+
+.mira-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.mira-button--default {
+  background: var(--mira-accent);
+  color: var(--mira-accent-foreground);
+}
+
+.mira-button--secondary {
+  background: var(--mira-muted);
+  color: var(--mira-foreground);
+}
+
+.mira-button--outline {
+  background: transparent;
+  border-color: var(--mira-border);
+  color: var(--mira-foreground);
+}
+
+.mira-button--ghost {
+  background: transparent;
+  color: var(--mira-foreground);
+}
+
+.mira-button--ghost:hover,
+.mira-button--outline:hover,
+.mira-button--secondary:hover {
+  background: var(--mira-accent-soft);
+}
+
+.mira-button--default-size {
+  min-height: 36px;
+  padding: 0 0.85rem;
+}
+
+.mira-button--sm {
+  min-height: 30px;
+  padding: 0 0.65rem;
+}
+
+.mira-button--icon {
+  min-height: 32px;
+  padding: 0;
+  width: 32px;
+}
+
+.mira-separator--horizontal {
+  background: var(--mira-border);
+  height: 1px;
+  width: 100%;
+}
+
+.mira-separator--vertical {
+  background: var(--mira-border);
+  height: 100%;
+  width: 1px;
+}
+
+.mira-scroll-area {
+  min-height: 0;
+  overflow: auto;
+}
+
+.mira-toggle-group {
+  align-items: center;
+  background: var(--mira-muted);
+  border: 1px solid var(--mira-border);
+  border-radius: var(--mira-radius);
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+}
+
+.mira-toggle-group__item {
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--mira-radius) - 2px);
+  color: var(--mira-muted-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 550;
+  min-height: 28px;
+  padding: 0 0.65rem;
+}
+
+.mira-toggle-group__item[data-state="on"] {
+  background: var(--mira-editor-background);
+  color: var(--mira-foreground);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+}
+
+.mira-toolbar {
+  align-items: center;
+  display: flex;
+  gap: 0.15rem;
+}
+
+.mira-toolbar__group {
+  align-items: center;
+  background: var(--background-secondary, var(--mira-muted));
+  border: 1px solid var(--background-modifier-border, var(--mira-border));
+  border-radius: var(--radius-s, var(--mira-radius));
+  display: inline-flex;
+  gap: 1px;
+  padding: 1px;
+}
+
+.mira-toolbar__button,
+.mira-toolbar__group-item,
+.mira-toolbar__link {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: calc(var(--radius-s, var(--mira-radius)) - 2px);
+  color: var(--text-muted, var(--mira-muted-foreground));
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 1.75rem;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  text-decoration: none;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+  width: 1.75rem;
+}
+
+.mira-toolbar__button:hover,
+.mira-toolbar__group-item:hover,
+.mira-toolbar__link:hover {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+  color: var(--text-normal, var(--mira-foreground));
+}
+
+.mira-toolbar__button:focus-visible,
+.mira-toolbar__group-item:focus-visible,
+.mira-toolbar__link:focus-visible {
+  border-color: var(--mira-focus-ring, var(--mira-accent));
+  box-shadow: 0 0 0 2px
+    color-mix(
+      in srgb,
+      var(--mira-focus-ring, var(--mira-accent)) 30%,
+      transparent
+    );
+  outline: none;
+}
+
+.mira-toolbar__button:disabled,
+.mira-toolbar__group-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mira-toolbar__group-item[data-state="on"],
+.mira-toolbar__group-item[aria-pressed="true"],
+.mira-toolbar__button[data-state="on"],
+.mira-toolbar__button[aria-pressed="true"] {
+  background: var(--background-primary, var(--mira-editor-background));
+  color: var(--text-normal, var(--mira-foreground));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+}
+
+.mira-toolbar__button svg,
+.mira-toolbar__group-item svg,
+.mira-toolbar__link svg {
+  height: 1rem;
+  pointer-events: none;
+  width: 1rem;
+}
+
+.mira-ui-button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-m, var(--mira-radius));
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  justify-content: center;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease,
+    opacity 150ms ease;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.mira-ui-button:focus-visible {
+  border-color: var(--ring, var(--mira-accent));
+  box-shadow: 0 0 0 2px
+    color-mix(in oklab, var(--ring, var(--mira-accent)) 42%, transparent);
+}
+
+.mira-ui-button:disabled,
+.mira-ui-button[aria-disabled="true"],
+.mira-ui-button[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.mira-ui-button svg {
+  flex-shrink: 0;
+  height: 1rem;
+  pointer-events: none;
+  width: 1rem;
+}
+
+.mira-ui-button--default {
+  background: var(--interactive-accent, var(--mira-accent));
+  color: var(--text-on-accent, var(--mira-accent-foreground));
+}
+
+.mira-ui-button--default:hover {
+  background: var(--interactive-accent-hover, var(--mira-accent));
+}
+
+.mira-ui-button--default:active {
+  background: var(--interactive-accent-pressed, var(--mira-accent));
+}
+
+.mira-ui-button--destructive {
+  background: var(--destructive, #dc2626);
+  color: white;
+}
+
+.mira-ui-button--destructive:hover {
+  background: color-mix(in oklab, var(--destructive, #dc2626) 90%, black);
+}
+
+.mira-ui-button--outline {
+  background: var(--background, var(--mira-background));
+  border-color: var(--border, var(--mira-border));
+  color: var(--foreground, var(--mira-foreground));
+}
+
+.mira-ui-button--secondary {
+  background: var(--secondary, var(--mira-muted));
+  color: var(--secondary-foreground, var(--mira-foreground));
+}
+
+.mira-ui-button--ghost {
+  background: transparent;
+  color: var(--foreground, var(--mira-foreground));
+}
+
+.mira-ui-button--outline:hover,
+.mira-ui-button--secondary:hover,
+.mira-ui-button--ghost:hover {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+  color: var(--foreground, var(--mira-foreground));
+}
+
+.mira-ui-button--link {
+  background: transparent;
+  color: var(--text-accent, var(--mira-link));
+  text-underline-offset: 4px;
+}
+
+.mira-ui-button--link:hover {
+  text-decoration: underline;
+}
+
+.mira-ui-button--default-size {
+  height: 2.25rem;
+  padding: 0 1rem;
+}
+
+.mira-ui-button--default-size:has(> svg) {
+  padding-inline: 0.75rem;
+}
+
+.mira-ui-button--sm {
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.75rem;
+}
+
+.mira-ui-button--sm:has(> svg) {
+  padding-inline: 0.625rem;
+}
+
+.mira-ui-button--xs {
+  border-radius: var(--radius-s, 4px);
+  font-size: 0.75rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+}
+
+.mira-ui-button--xs svg {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+.mira-ui-button--lg {
+  height: 2.5rem;
+  padding: 0 1.5rem;
+}
+
+.mira-ui-button--lg:has(> svg) {
+  padding-inline: 1rem;
+}
+
+.mira-ui-button--icon {
+  height: 2.25rem;
+  padding: 0;
+  width: 2.25rem;
+}
+
+[data-slot="dropdown-menu-content"],
+[data-slot="dropdown-menu-sub-content"],
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"] {
+  background: var(--popover, var(--mira-widget-background));
+  border: 1px solid var(--border, var(--mira-border));
+  border-radius: var(--radius-m, var(--mira-radius));
+  box-shadow:
+    0 8px 28px rgb(0 0 0 / 14%),
+    0 2px 8px rgb(0 0 0 / 8%);
+  color: var(--popover-foreground, var(--mira-foreground));
+  /* Portaled to document.body — inherit Lapis's interface font contract before
+     falling back to Mira's portable sans stack. */
+  font-family: var(
+    --font-interface,
+    var(--mira-font-sans, ui-sans-serif, system-ui, sans-serif)
+  );
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  max-height: var(
+    --radix-dropdown-menu-content-available-height,
+    min(70vh, 28rem)
+  );
+  min-width: 8rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0.25rem;
+  z-index: 1100;
+}
+
+[data-mira-overlay][data-slot="popover-content"] {
+  background: var(--popover, var(--mira-widget-background));
+  border: 1px solid var(--border, var(--mira-border));
+  border-radius: var(--radius-m, var(--mira-radius));
+  box-shadow: var(
+    --mira-widget-shadow,
+    0 8px 28px rgb(0 0 0 / 14%),
+    0 2px 8px rgb(0 0 0 / 8%)
+  );
+  color: var(--popover-foreground, var(--mira-foreground));
+  font-family: var(
+    --font-interface,
+    var(--mira-font-sans, ui-sans-serif, system-ui, sans-serif)
+  );
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  padding: 1rem;
+  width: 18rem;
+  z-index: 1100;
+}
+
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"] {
+  max-height: var(
+    --radix-context-menu-content-available-height,
+    min(70vh, 28rem)
+  );
+}
+
+[data-slot="dropdown-menu-content"].flex,
+[data-slot="context-menu-content"].flex {
+  align-items: center;
+  display: flex;
+  gap: 0.125rem;
+}
+
+[data-slot="dropdown-menu-item"],
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="dropdown-menu-radio-item"],
+[data-slot="dropdown-menu-sub-trigger"],
+[data-slot="context-menu-item"],
+[data-slot="context-menu-checkbox-item"],
+[data-slot="context-menu-radio-item"],
+[data-slot="context-menu-sub-trigger"] {
+  align-items: center;
+  border-radius: var(--radius-s, 4px);
+  cursor: default;
+  display: flex;
+  gap: 0.5rem;
+  outline: none;
+  padding: 0.375rem 0.5rem;
+  position: relative;
+  user-select: none;
+}
+
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="dropdown-menu-radio-item"],
+[data-slot="context-menu-checkbox-item"],
+[data-slot="context-menu-radio-item"] {
+  padding-inline-start: 2rem;
+}
+
+[data-slot="dropdown-menu-checkbox-item"] > span:first-child,
+[data-slot="dropdown-menu-radio-item"] > span:first-child,
+[data-slot="context-menu-checkbox-item"] > span:first-child,
+[data-slot="context-menu-radio-item"] > span:first-child {
+  align-items: center;
+  display: flex;
+  height: 0.875rem;
+  inset-inline-start: 0.5rem;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  width: 0.875rem;
+}
+
+[data-slot="dropdown-menu-item"][data-inset],
+[data-slot="dropdown-menu-label"][data-inset],
+[data-slot="dropdown-menu-group-heading"][data-inset],
+[data-slot="context-menu-item"][data-inset],
+[data-slot="context-menu-label"][data-inset],
+[data-slot="context-menu-group-heading"][data-inset],
+[data-slot="dropdown-menu-sub-trigger"][data-inset],
+[data-slot="context-menu-sub-trigger"][data-inset] {
+  padding-inline-start: 2rem;
+}
+
+[data-slot="dropdown-menu-item"][data-disabled],
+[data-slot="dropdown-menu-checkbox-item"][data-disabled],
+[data-slot="dropdown-menu-radio-item"][data-disabled],
+[data-slot="dropdown-menu-sub-trigger"][data-disabled],
+[data-slot="context-menu-item"][data-disabled],
+[data-slot="context-menu-checkbox-item"][data-disabled],
+[data-slot="context-menu-radio-item"][data-disabled],
+[data-slot="context-menu-sub-trigger"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+[data-slot="dropdown-menu-item"][data-highlighted],
+[data-slot="dropdown-menu-checkbox-item"][data-highlighted],
+[data-slot="dropdown-menu-radio-item"][data-highlighted],
+[data-slot="dropdown-menu-sub-trigger"][data-highlighted],
+[data-slot="context-menu-item"][data-highlighted],
+[data-slot="context-menu-checkbox-item"][data-highlighted],
+[data-slot="context-menu-radio-item"][data-highlighted],
+[data-slot="context-menu-sub-trigger"][data-highlighted] {
+  background: var(
+    --accent,
+    var(--background-modifier-hover, var(--mira-accent-soft))
+  );
+  color: var(--accent-foreground, var(--mira-foreground));
+}
+
+[data-slot="dropdown-menu-item"][data-variant="destructive"],
+[data-slot="context-menu-item"][data-variant="destructive"] {
+  color: var(--destructive, #dc2626);
+}
+
+[data-slot="dropdown-menu-item"][data-variant="destructive"] svg,
+[data-slot="context-menu-item"][data-variant="destructive"] svg {
+  color: inherit;
+}
+
+[data-slot="dropdown-menu-item"] svg,
+[data-slot="dropdown-menu-checkbox-item"] svg,
+[data-slot="dropdown-menu-radio-item"] svg,
+[data-slot="dropdown-menu-sub-trigger"] svg,
+[data-slot="context-menu-item"] svg,
+[data-slot="context-menu-checkbox-item"] svg,
+[data-slot="context-menu-radio-item"] svg,
+[data-slot="context-menu-sub-trigger"] svg {
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  flex-shrink: 0;
+  height: 1rem;
+  pointer-events: none;
+  width: 1rem;
+}
+
+[data-slot="dropdown-menu-item"].\[\&_svg\]\:size-5 svg,
+[data-slot="context-menu-item"].\[\&_svg\]\:size-5 svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+[data-slot="dropdown-menu-label"],
+[data-slot="dropdown-menu-group-heading"] {
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.375rem 0.5rem;
+}
+
+[data-slot="context-menu-label"],
+[data-slot="context-menu-group-heading"] {
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.375rem 0.5rem;
+}
+
+[data-slot="dropdown-menu-separator"],
+[data-slot="context-menu-separator"] {
+  background: var(--border, var(--mira-border));
+  height: 1px;
+  margin: 0.25rem -0.25rem;
+}
+
+[data-slot="dropdown-menu-shortcut"],
+[data-slot="context-menu-shortcut"] {
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  line-height: 1rem;
+  margin-inline-start: auto;
+}
+
+[data-mira-overlay][data-slot="dialog-overlay"] {
+  background: rgb(0 0 0 / 48%);
+  inset: 0;
+  position: fixed;
+  z-index: 50;
+}
+
+[data-mira-overlay][data-slot="dialog-content"] {
+  background: var(--background, var(--mira-background));
+  border: 1px solid var(--border, var(--mira-border));
+  border-radius: var(--radius-l, var(--mira-radius));
+  box-shadow:
+    0 22px 70px rgb(0 0 0 / 26%),
+    0 6px 18px rgb(0 0 0 / 12%);
+  color: var(--foreground, var(--mira-foreground));
+  display: grid;
+  font-family: var(--font-sans, var(--mira-font-sans));
+  font-size: var(--mira-font-size, 0.875rem);
+  gap: 1rem;
+  left: 50%;
+  line-height: 1.4;
+  max-width: min(calc(100vw - 2rem), 32rem);
+  padding: 1.5rem;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  z-index: 50;
+}
+
+[data-mira-overlay][data-slot="dialog-content"].p-0 {
+  padding: 0;
+}
+
+[data-mira-overlay][data-slot="dialog-content"].overflow-hidden {
+  overflow: hidden;
+}
+
+[data-mira-overlay][data-slot="dialog-content"].max-h-\[85vh\] {
+  max-height: 85vh;
+}
+
+[data-mira-overlay][data-slot="dialog-content"].w-\[95vw\] {
+  width: 95vw;
+}
+
+[data-mira-overlay][data-slot="dialog-content"].max-w-\[95vw\] {
+  max-width: 95vw;
+}
+
+[data-mira-overlay][data-slot="dialog-content"] > [data-slot="dialog-close"] {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s, 4px);
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  cursor: pointer;
+  display: inline-flex;
+  height: 1.75rem;
+  justify-content: center;
+  opacity: 0.7;
+  padding: 0;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  transition: opacity 150ms ease;
+  width: 1.75rem;
+}
+
+[data-mira-overlay][data-slot="dialog-content"]
+  > [data-slot="dialog-close"]:hover {
+  opacity: 1;
+}
+
+[data-mira-overlay] [data-slot="dialog-title"] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+[data-mira-overlay] [data-slot="dialog-description"] {
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  font-size: 0.875rem;
+}
+
+[data-mira-overlay] [data-slot="dialog-header"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: left;
+}
+
+[data-mira-overlay] [data-slot="dialog-footer"] {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  [data-mira-overlay] [data-slot="dialog-footer"] {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+[data-mira-overlay][data-slot="tooltip-content"] {
+  background: var(--popover, var(--mira-widget-background));
+  border: 1px solid var(--border, var(--mira-border));
+  border-radius: var(--radius-s, 4px);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
+  color: var(--popover-foreground, var(--mira-foreground));
+  font-family: var(--font-sans, var(--mira-font-sans));
+  font-size: 0.75rem;
+  line-height: 1.3;
+  max-width: 18rem;
+  padding: 0.375rem 0.625rem;
+  z-index: var(--layer-tooltip, 1200);
+}
+
+[data-mira-overlay][data-slot="tooltip-content"] svg {
+  fill: var(--popover, var(--mira-widget-background));
+  color: var(--border, var(--mira-border));
+}
+
+[data-slot="table"] {
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: 0.875rem;
+  width: 100%;
+}
+
+[data-slot="table-row"] {
+  border-bottom: 1px solid var(--border, var(--mira-border));
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+}
+
+[data-slot="table-row"]:hover > :is(th, td) {
+  background: color-mix(
+    in oklab,
+    var(--muted, var(--mira-muted)) 50%,
+    transparent
+  );
+}
+
+[data-slot="table-row"].border-none,
+[data-slot="table-head"].border-none,
+[data-slot="table-cell"].border-none {
+  border: 0;
+}
+
+[data-slot="table-head"] {
+  background-clip: padding-box;
+  color: var(--foreground, var(--mira-foreground));
+  font-weight: 500;
+  height: 2.5rem;
+  padding: 0 0.5rem;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+[data-slot="table-cell"] {
+  background-clip: padding-box;
+  padding: 0.5rem;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+[data-slot="table-head"].p-0,
+[data-slot="table-cell"].p-0 {
+  padding: 0;
+}
+
+[data-slot="table-head"].h-5,
+[data-slot="table-cell"].h-5 {
+  height: 1.25rem;
+}
+
+[data-slot="table-head"].w-5,
+[data-slot="table-cell"].w-5 {
+  width: 1.25rem;
+}
+
+[data-slot="table-caption"] {
+  color: var(--muted-foreground, var(--mira-muted-foreground));
+  font-size: 0.875rem;
+  margin-top: 1rem;
+}
+
+[data-slot="table-footer"] {
+  background: color-mix(
+    in oklab,
+    var(--muted, var(--mira-muted)) 50%,
+    transparent
+  );
+  border-top: 1px solid var(--border, var(--mira-border));
+  font-weight: 500;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}