@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/dist/lib/browser/index.mjs

@@ -46,11 +46,12 @@ var cardMinBlockSize = 18;
 var cardMaxBlockSize = 30;
 
 // src/fragments/density.ts
-var coarseBlockSize = "min-h-[2.5rem]";
-var coarseDimensions = `${coarseBlockSize} px-3`;
 var fineBlockSize = "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
+var coarseBlockSize = "min-h-[2.5rem]";
 var fineDimensions = `${fineBlockSize} px-2`;
-var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
+var coarseDimensions = `${coarseBlockSize} px-3`;
+var densityDimensions = (density = "fine") => density === "fine" ? fineDimensions : coarseDimensions;
+var densityBlockSize = (density = "fine") => density === "fine" ? fineBlockSize : coarseBlockSize;
 
 // src/fragments/disabled.ts
 var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
@@ -68,7 +69,6 @@ var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opa
 var hoverableControlItem = "opacity-(--controls-opacity)";
 
 // src/fragments/text.ts
-var descriptionTextPrimary = "text-sm font-normal text-base-surface-text";
 var descriptionMessage = "text-description border border-dashed border-separator rounded-sm p-4";
 
 // src/util/elevation.ts
@@ -341,12 +341,7 @@ function slottable(render) {
           warn = true;
           log.warn("slot child is not composable; create it with composable() or slottable()", {
             child: child.type.displayName ?? child.type.name
-          }, {
-            F: __dxlog_file,
-            L: 125,
-            S: this,
-            C: (f, a) => f(...a)
-          });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 100, S: this });
         }
       } catch {
       }
@@ -628,12 +623,14 @@ var cardAction = (_props, ...etc) => mx("dx-card__acztion col-span-3 !grid grid-
 var cardActionLabel = (_props, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
 var cardLink = (_props, ...etc) => mx("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
 var cardLinkLabel = (_props, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
+var cardRow = (_, ...etc) => mx("dx-card__row col-span-3 grid grid-cols-subgrid", ...etc);
 var cardIconBlock = ({ padding }, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", padding && "[&>*]:p-1", ...etc);
 var cardTheme = {
   root: cardRoot,
   toolbar: cardToolbar,
   title: cardTitle,
   content: cardContent,
+  row: cardRow,
   heading: cardHeading,
   text: cardText,
   "text-span": cardTextSpan,
@@ -662,6 +659,35 @@ var buttonTheme = {
   group: buttonGroup
 };
 
+// src/theme/primitives/column.ts
+var withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => "[grid-column:var(--dx-col,auto)]",
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+  *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => "[--dx-col:auto]"
+};
+var columnRoot = (_, ...etc) => {
+  return mx("dx-column-root grid", ...etc);
+};
+var columnRow = (_, ...etc) => {
+  return mx("col-span-3 grid grid-cols-subgrid", ...etc);
+};
+var columnBleed = (_, ...etc) => {
+  return mx("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
+};
+var columnCenter = (_, ...etc) => {
+  return mx(withColumn.center(), "min-h-0", ...etc);
+};
+var columnTheme = {
+  root: columnRoot,
+  row: columnRow,
+  bleed: columnBleed,
+  center: columnCenter
+};
+
 // src/theme/components/dialog.ts
 var sizeMap2 = {
   sm: "md:max-w-[24rem]",
@@ -673,9 +699,9 @@ var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
 var dialogContent = ({ inOverlayLayout, size = "md" }, ...etc) => {
   return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap2[size], ...etc);
 };
-var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", ...etc);
-var dialogBody = (_props, ...etc) => mx("dx-dialog__body", ...etc);
-var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", ...etc);
+var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
+var dialogBody = (_props, ...etc) => mx("dx-dialog__body dx-expander", withColumn.propagate(), ...etc);
+var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", withColumn.center(), ...etc);
 var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
 var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
 var dialogTheme = {
@@ -704,8 +730,8 @@ var iconTheme = {
 };
 
 // src/theme/components/icon-button.ts
-var iconButtonRoot = ({ iconOnly }, ...etc) => {
-  return mx("px-1.5", !iconOnly && "gap-2", ...etc);
+var iconButtonRoot = ({ iconOnly, square }, ...etc) => {
+  return mx("px-1.5", !iconOnly && "gap-2", square && "aspect-square", ...etc);
 };
 var iconButtonTheme = {
   root: iconButtonRoot
@@ -730,22 +756,22 @@ var inputValence = (valence) => {
   }
 };
 var sharedSubduedInputStyles = (props) => [
-  "py-0 w-full bg-transparent text-current placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === "fine" ? fineBlockSize : coarseBlockSize,
+  "py-0 w-full bg-transparent text-current placeholder-placeholder",
   "dx-focus-subdued",
+  densityDimensions(props.density),
   props.disabled && staticDisabled
 ];
 var sharedDefaultInputStyles = (props) => [
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
-  props.density === "fine" ? fineDimensions : coarseDimensions,
+  densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover
 ];
 var sharedStaticInputStyles = (props) => [
-  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  "py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder",
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && "bg-attention-surface",
@@ -855,19 +881,19 @@ var menuTheme = {
 
 // src/theme/components/message.ts
 var messageRoot = ({ valence }, etc) => {
-  return mx("grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm", messageValence(valence), etc);
+  return mx("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence), etc);
 };
 var messageHeader = (_, etc) => {
-  return mx("col-span-2 grid grid-cols-subgrid items-center", etc);
+  return mx("col-span-full grid grid-cols-subgrid items-center", etc);
 };
 var messageTitle = (_, etc) => {
-  return mx("col-start-2 gap-trim-sm [&>svg]:inline-block", etc);
+  return mx("col-start-2 truncate", etc);
 };
 var messageIcon = (_, etc) => {
-  return mx("col-start-1", etc);
+  return mx("col-start-1 grid place-items-center", etc);
 };
 var messageContent = (_, etc) => {
-  return mx("grid grid-cols-subgrid col-start-2 first:font-medium", etc);
+  return mx("col-start-2 grid grid-cols-subgrid first:font-medium", etc);
 };
 var messageTheme = {
   root: messageRoot,
@@ -884,7 +910,7 @@ var popoverContent = ({ elevation }, ...etc) => mx("dx-modal-surface border bord
   elevation,
   level: "menu"
 }), "dx-focus-ring", ...etc);
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("flex flex-col min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
+var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
 var popoverArrow = (_props, ...etc) => mx("fill-separator", ...etc);
 var popoverTheme = {
   content: popoverContent,
@@ -909,14 +935,17 @@ var scrollAreaRoot = ({ orientation }, ...etc) => mx(
   orientation === "vertical" && "group/scroll-v flex flex-col",
   orientation === "horizontal" && "group/scroll-h flex",
   orientation === "all" && "group/scroll-all",
-  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-  "[.dx-column_&]:col-span-full",
+  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+  "[.dx-column-root_&]:col-span-full",
   ...etc
 );
-var scrollAreaViewport = ({ orientation, centered, padding, snap, thin, autoHide }, ...etc) => {
+var scrollAreaViewport = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
   return mx(
-    "h-full w-full",
-    orientation === "vertical" && "flex flex-col overflow-y-scroll",
+    "flex-1 min-h-0 w-full",
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+    orientation === "vertical" && "overflow-y-scroll",
     orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain",
     orientation === "all" && "overflow-scroll",
     "[&::-webkit-scrollbar-corner]:bg-transparent",
@@ -1107,26 +1136,6 @@ var treegridTheme = {
   cell: treegridCell
 };
 
-// src/theme/primitives/column.ts
-var columnRoot = (_, ...etc) => {
-  return mx("dx-column grid", ...etc);
-};
-var columnContent = (_, ...etc) => {
-  return mx("col-span-full grid grid-cols-subgrid min-h-0 [&>:not(.dx-container)]:col-start-2", ...etc);
-};
-var columnViewport = (_, ...etc) => {
-  return mx(...etc);
-};
-var columnRow = ({ fullWidth, center }, ...etc) => {
-  return mx("col-span-3 grid grid-cols-subgrid", fullWidth ? "col-span-3" : center && "col-start-2 col-span-1", ...etc);
-};
-var columnTheme = {
-  root: columnRoot,
-  content: columnContent,
-  viewport: columnViewport,
-  row: columnRow
-};
-
 // src/theme/primitives/panel.ts
 var sizes = {
   lg: "h-(--dx-topbar-size)",
@@ -1223,8 +1232,6 @@ export {
   cardMinBlockSize,
   cardMinInlineSize,
   cardTheme,
-  coarseBlockSize,
-  coarseDimensions,
   columnTheme,
   composable,
   composableProps,
@@ -1233,8 +1240,8 @@ export {
   defaultTheme,
   defaultTx,
   densityBlockSize,
+  densityDimensions,
   descriptionMessage,
-  descriptionTextPrimary,
   dialogActionBar,
   dialogBody,
   dialogContent,
@@ -1243,8 +1250,6 @@ export {
   dialogOverlay,
   dialogTheme,
   dialogTitle,
-  fineBlockSize,
-  fineDimensions,
   focusTheme,
   getHashHue,
   getHashStyles,
@@ -1361,6 +1366,7 @@ export {
   treegridCell,
   treegridRoot,
   treegridRow,
-  treegridTheme
+  treegridTheme,
+  withColumn
 };
 //# sourceMappingURL=index.mjs.map