@lapis-notes/bases 0.2.0 → 0.3.0

package/dist/styles.css

@@ -2,10 +2,9 @@
 .bases-table,
 .bases-card-grid {
   --ui-bases-surface-background: var(--background-primary, var(--background));
-  --ui-bases-surface-background-alt: var(--background-primary-alt, var(--muted));
-  --ui-bases-card-background: var(
-    --card,
-    var(--background-primary, var(--background))
+  --ui-bases-surface-background-alt: var(
+    --background-primary-alt,
+    var(--muted)
   );
   --ui-bases-card-color: var(
     --card-foreground,
@@ -19,7 +18,9 @@
   --ui-bases-surface-hover: var(--background-modifier-hover, var(--muted));
   --ui-bases-table-cell-background: var(--ui-bases-surface-background);
   --ui-bases-table-cell-background-hover: var(--ui-bases-surface-hover);
-  --ui-bases-table-cell-background-active: var(--ui-bases-surface-background-alt);
+  --ui-bases-table-cell-background-active: var(
+    --ui-bases-surface-background-alt
+  );
   --ui-bases-table-header-z-index: 1;
   --ui-bases-normal-color: var(--text-normal, var(--foreground));
   --ui-bases-muted-color: var(--text-muted, var(--muted-foreground));
@@ -124,9 +125,7 @@
   line-height: 1rem;
 }
 
-.filter-group
-  [data-ui-component="bases-query-editor"]
-  .cm-editor.cm-focused {
+.filter-group [data-ui-component="bases-query-editor"] .cm-editor.cm-focused {
   outline: none;
 }
 
@@ -188,6 +187,55 @@
   align-self: stretch;
 }
 
+.bases-embed {
+  position: relative;
+  width: 100%;
+  height: min(24rem, 70svh);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.bases-view__toolbar-controls {
+  margin-inline-start: auto;
+  justify-content: flex-end;
+}
+
+.bases-embed .bases-view__toolbar {
+  padding-block: 0.5rem;
+}
+
+.bases-embed .bases-list__record {
+  padding-inline-start: 0.75rem;
+}
+
+.bases-embed .bases-list__group-toggle {
+  padding-inline-start: 0.75rem;
+}
+
+.bases-embed__file-chip {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  max-width: 100%;
+  border-radius: var(--radius) 0 0 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms;
+}
+
+.bases-embed:hover .bases-embed__file-chip,
+.bases-embed:focus-within .bases-embed__file-chip {
+  opacity: 1;
+}
+
+.bases-embed__file-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .bases-view__renderer {
   position: absolute;
   inset: 0;
@@ -226,13 +274,11 @@
   padding-inline: 0.75rem;
 }
 
-.bases-view__toolbar
-  [data-ui-component="button"][data-size="sm"]:has(svg) {
+.bases-view__toolbar [data-ui-component="button"][data-size="sm"]:has(svg) {
   padding-inline: 0.625rem;
 }
 
-.bases-view__toolbar
-  [data-ui-component="button"][data-variant="outline"] {
+.bases-view__toolbar [data-ui-component="button"][data-variant="outline"] {
   box-shadow: none;
 }
 
@@ -278,7 +324,7 @@
 
 .bases-table-view {
   --ui-bases-table-scrollbar-size: 0.625rem;
-  --ui-bases-table-scrollbar-track: var(--ui-bases-surface-background-alt);
+  --ui-bases-table-scrollbar-track: var(--ui-bases-surface-background);
   --ui-bases-table-scrollbar-thumb: var(--ui-bases-muted-color);
   position: relative;
   min-width: 0;
@@ -532,15 +578,12 @@
   box-shadow: none;
 }
 
-.bases-table__header-cell
-  [data-ui-component="button"][data-size="xs"] {
+.bases-table__header-cell [data-ui-component="button"][data-size="xs"] {
   width: 1rem;
   height: 1rem;
 }
 
-.bases-table__header-cell
-  [data-ui-component="button"][data-size="xs"]
-  svg {
+.bases-table__header-cell [data-ui-component="button"][data-size="xs"] svg {
   width: 1rem;
   height: 1rem;
 }
@@ -578,7 +621,10 @@
 .bases-card,
 .bases-card-placeholder {
   border-color: var(--ui-bases-surface-border);
-  background: var(--ui-bases-card-background);
+  background: var(
+    --ui-bases-card-background,
+    var(--ui-bases-surface-background)
+  );
   color: var(--ui-bases-card-color);
   box-shadow: var(--ui-bases-shadow);
 }
@@ -597,7 +643,8 @@
  * required by consumers. */
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties;
-:root, :host {
+:root,
+:host {
   --spacing: 0.25rem;
   --container-md: 28rem;
   --container-5xl: 64rem;
@@ -1021,7 +1068,8 @@
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 .transform {
-  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
+    var(--tw-skew-x,) var(--tw-skew-y,);
 }
 .bases-style-cursor-col-resize-1ee417 {
   cursor: col-resize;
@@ -1103,18 +1151,30 @@
 }
 :where(.bases-style-space-y-2-6f7e01 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(
+    calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
+  );
+  margin-block-end: calc(
+    calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
+  );
 }
 :where(.bases-style-space-y-3-6ed543 > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(
+    calc(var(--spacing) * 3) * var(--tw-space-y-reverse)
+  );
+  margin-block-end: calc(
+    calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))
+  );
 }
 :where(.bases-style-space-y-6-b3542e > :not(:last-child)) {
   --tw-space-y-reverse: 0;
-  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  margin-block-start: calc(
+    calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
+  );
+  margin-block-end: calc(
+    calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
+  );
 }
 .bases-style-self-stretch-18069a {
   align-self: stretch;
@@ -1460,7 +1520,9 @@
 }
 .ordinal {
   --tw-ordinal: ordinal;
-  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,)
+    var(--tw-numeric-figure,) var(--tw-numeric-spacing,)
+    var(--tw-numeric-fraction,);
 }
 .underline {
   text-decoration-line: underline;
@@ -1484,24 +1546,33 @@
   opacity: 100%;
 }
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+    0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .bases-style-shadow-none-ad47d1 {
   --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .shadow-sm {
-  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+    0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .bases-style-ring-0-866dcc {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .bases-style-ring-1-3daca9 {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .outline {
   outline-style: var(--tw-outline-style);
@@ -1516,39 +1587,96 @@
 }
 .blur {
   --tw-blur: blur(8px);
-  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
+    var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
+    var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
 .filter {
-  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
+    var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
+    var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur,)
+    var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
+    var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
+    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
+    var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
+    var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+    var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
+    var(--tw-backdrop-sepia,);
 }
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(var(--blur-sm));
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur,)
+    var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
+    var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
+    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
+    var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
+    var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+    var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
+    var(--tw-backdrop-sepia,);
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    outline-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    --tw-gradient-from,
+    --tw-gradient-via,
+    --tw-gradient-to,
+    opacity,
+    box-shadow,
+    transform,
+    translate,
+    scale,
+    rotate,
+    filter,
+    -webkit-backdrop-filter,
+    backdrop-filter,
+    display,
+    content-visibility,
+    overlay,
+    pointer-events;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .bases-style-transition-color-box-shadow-c8598b {
-  transition-property: color,box-shadow;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-property: color, box-shadow;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .bases-style-transition-all-0fe7d7 {
   transition-property: all;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .bases-style-transition-colors-ceb69a {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-property: color, background-color, border-color, outline-color,
+    text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
+    --tw-gradient-to;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
 .bases-style-duration-300-789055 {
@@ -1561,7 +1689,8 @@
 }
 .contain-layout {
   --tw-contain-layout: layout;
-  contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+  contain: var(--tw-contain-size,) var(--tw-contain-layout,)
+    var(--tw-contain-paint,) var(--tw-contain-style,);
 }
 .bases-style-outline-none-df37b1 {
   --tw-outline-style: none;
@@ -1581,7 +1710,9 @@
   status: draft;
 }
 @media (hover: hover) {
-  .bases-style-group-64292b-hover\:visible:is(:where(.bases-style-group-64292b):hover *) {
+  .bases-style-group-64292b-hover\:visible:is(
+      :where(.bases-style-group-64292b):hover *
+    ) {
     visibility: visible;
   }
 }
@@ -1620,7 +1751,11 @@
   }
   @supports (color: color-mix(in lab, red, red)) {
     .bases-style-hover-bg-color-mix-in-srgb-var-interactive-4e3e8a:hover {
-      background-color: color-mix(in srgb,var(--interactive-accent) 20%,transparent);
+      background-color: color-mix(
+        in srgb,
+        var(--interactive-accent) 20%,
+        transparent
+      );
     }
   }
   .bases-style-hover-bg-transparent-de520d:hover {
@@ -1639,12 +1774,16 @@
     opacity: 100%;
   }
   .hover\:ring:hover {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .bases-style-hover-ring-2-8a0edf:hover {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
 .bases-style-focus-visible-border-transparent-917fe2:focus-visible {
@@ -1655,22 +1794,28 @@
 }
 .bases-style-focus-visible-shadow-none-1697ce:focus-visible {
   --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .bases-style-focus-visible-ring-0-464a99:focus-visible {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+    calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .focus-visible\:ring-\[3px\]:focus-visible {
-  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+    calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .bases-style-focus-visible-ring-transparent-4358b1:focus-visible {
   --tw-ring-color: transparent;
 }
 .bases-style-focus-visible-ring-offset-0-63ff32:focus-visible {
   --tw-ring-offset-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 }
 .active\:scale-75:active {
   --tw-scale-x: 75%;
@@ -1704,7 +1849,7 @@
 }
 @media (width >= 64rem) {
   .lg\:grid-cols-\[minmax\(0\,420px\)_minmax\(0\,1fr\)\] {
-    grid-template-columns: minmax(0,420px) minmax(0,1fr);
+    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
   }
 }
 .\[\&_svg\]\:pointer-events-none svg {
@@ -1716,30 +1861,41 @@
 .\[\&_svg\]\:shrink-0 svg {
   flex-shrink: 0;
 }
-.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
+.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
-.bases-style-data-scroll-area-viewport-max-h-55svh-15dd46 > [data-scroll-area-viewport] {
+.bases-style-data-scroll-area-viewport-max-h-55svh-15dd46
+  > [data-scroll-area-viewport] {
   max-height: 55svh;
 }
-.bases-style-data-slot-command-input-wrapper-h-full-7c1764 > [data-slot=command-input-wrapper] {
+.bases-style-data-slot-command-input-wrapper-h-full-7c1764
+  > [data-slot="command-input-wrapper"] {
   height: 100%;
 }
-.bases-style-data-slot-command-input-wrapper-border-non-3e6b83 > [data-slot=command-input-wrapper] {
+.bases-style-data-slot-command-input-wrapper-border-non-3e6b83
+  > [data-slot="command-input-wrapper"] {
   --tw-border-style: none;
   border-style: none;
 }
-.bases-style-data-slot-command-input-wrapper-p-0-a95879 > [data-slot=command-input-wrapper] {
+.bases-style-data-slot-command-input-wrapper-p-0-a95879
+  > [data-slot="command-input-wrapper"] {
   padding: 0px;
 }
-.bases-style-data-slot-command-input-wrapper-svg-hidden-a990ff > [data-slot=command-input-wrapper] > svg {
+.bases-style-data-slot-command-input-wrapper-svg-hidden-a990ff
+  > [data-slot="command-input-wrapper"]
+  > svg {
   display: none;
 }
-.bases-style-data-slot-command-input-wrapper-svg-h-auto-0dda33 > [data-slot=command-input-wrapper] > svg {
+.bases-style-data-slot-command-input-wrapper-svg-h-auto-0dda33
+  > [data-slot="command-input-wrapper"]
+  > svg {
   height: auto;
 }
-:is(.bases-style-th-td-last-border-r-0-7a1990 > th, .bases-style-th-td-last-border-r-0-7a1990 td):last-child {
+:is(
+    .bases-style-th-td-last-border-r-0-7a1990 > th,
+    .bases-style-th-td-last-border-r-0-7a1990 td
+  ):last-child {
   border-right-style: var(--tw-border-style);
   border-right-width: 0px;
 }
@@ -2019,8 +2175,12 @@
   initial-value: 1;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
+    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *,
+    ::before,
+    ::after,
+    ::backdrop {
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -2162,3 +2322,264 @@
 .bases-style-ring-ring-3e1868 {
   --tw-ring-color: var(--ring);
 }
+
+/* Record views own one bounded viewport;
+  summaries stay outside sticky groups. */
+.bases-record-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+.bases-record-view__scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+}
+.bases-card-grid__content {
+  padding: 1rem 1.25rem 1.25rem;
+}
+.bases-card__body {
+  height: 100%;
+}
+.bases-list__groups {
+  width: 100cqw;
+  max-width: 100%;
+  padding: 0 0 1rem;
+}
+.bases-list .bases-record-view__scroll {
+  container-type: inline-size;
+}
+.bases-list__summary {
+  flex: none;
+  padding: 0.75rem 0;
+}
+.bases-list__group-header {
+  position: sticky;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100cqw;
+  max-width: 100%;
+  z-index: 1;
+  border-bottom: 1px solid var(--ui-bases-surface-border);
+  background: var(--ui-bases-surface-background);
+}
+.bases-list__group-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.875rem 0;
+  padding-inline-end: 0.75rem;
+  text-align: left;
+  font-size: 0.8125rem;
+}
+.bases-list__group-toggle svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.bases-list__count {
+  flex: none;
+  margin-inline-start: auto;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  color: var(--ui-bases-muted-color);
+}
+.bases-list__records {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.bases-list__record {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--ui-bases-surface-border);
+  font-size: 0.875rem;
+}
+.bases-list__identity {
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.bases-list__properties {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+  gap: 0.5rem 1.5rem;
+  margin: 0;
+}
+.bases-list__property {
+  display: flex;
+  flex: 0 1 auto;
+  width: max-content;
+  max-width: 100%;
+  align-items: first baseline;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.bases-list__property dt {
+  flex: none;
+  white-space: nowrap;
+  max-width: min(12rem, 40cqw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ui-bases-muted-color);
+  font-size: 0.75rem;
+}
+.bases-list__property dd {
+  margin: 0;
+  width: max-content;
+  flex: 0 1 auto;
+  min-width: 8rem;
+  max-width: 16rem;
+}
+.bases-cell__activate {
+  display: block;
+  width: 100%;
+  min-width: 4rem;
+  max-width: 100%;
+  min-height: 1.5rem;
+  padding: 0 0.25rem;
+  margin: 0 -0.25rem;
+  border-radius: 0.25rem;
+  color: inherit;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.bases-cell__activate:hover {
+  background: var(--ui-bases-surface-hover);
+}
+.bases-cell__activate:focus-visible {
+  outline: 2px solid var(--ui-bases-surface-border-focus);
+  outline-offset: 2px;
+}
+.bases-unknown-view__empty {
+  min-height: 100%;
+}
+
+.bases-map-view__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1.25rem 1rem;
+  font-size: 0.875rem;
+}
+
+.bases-list__property [data-type="number"] .bases-cell__activate {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.bases-list__property:has([data-type="number"]) dd {
+  min-width: 4rem;
+  max-width: 8rem;
+}
+.bases-list .bases-cell__display {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow-wrap: anywhere;
+}
+.bases-list [data-type="number"] .bases-cell__display {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bases-list__record-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.bases-list__property .bases-file-link {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow-wrap: anywhere;
+}
+.bases-list__group[data-grouped="true"] .bases-list__record {
+  padding-inline-start: 1.25rem;
+}
+.bases-embed .bases-list__group[data-grouped="true"] .bases-list__record {
+  padding-inline-start: 2rem;
+}
+.bases-list__bullet {
+  flex: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-top: 0.4rem;
+  color: var(--ui-bases-link-color);
+  fill: currentColor;
+}
+
+.bases-list__group-header .bases-card-grid__group-value {
+  font-weight: 700;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bases-list__group-toggle > span:first-of-type {
+  min-width: 0;
+  max-width: 35%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bases-cell__tags {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 16rem;
+  max-width: 100%;
+}
+.bases-cell__tag-list {
+  flex: 1;
+  min-width: 0;
+}
+
+.bases-file-link {
+  color: var(--ui-bases-link-color);
+  text-decoration: none;
+  text-underline-offset: 0.15em;
+}
+.bases-file-link:hover,
+.bases-file-link:focus-visible {
+  text-decoration: underline;
+}
+[data-ui-component="hover-card"][data-ui-part="hover-card-content"].bases-file-preview {
+  width: min(26rem, calc(100vw - 2rem));
+  padding: 0;
+}
+.bases-file-preview__title {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--ui-bases-surface-border, var(--border));
+}
+.bases-file-preview__scroll {
+  height: min(22rem, 65vh);
+  min-height: 0;
+}
+.bases-file-preview__surface {
+  padding: 0.75rem 1rem;
+  min-width: 0;
+}
+
+@container (max-width: 20rem) {
+  .bases-list__property dd {
+    min-width: 0;
+  }
+}