@domicile-desktop/manganese-bar 1.0.0 → 1.1.2

package/package.json

@@ -1,14 +1,14 @@
 {
   "dependencies": {
-    "@domicile-desktop/component-library": "1.0.0",
-    "@domicile-desktop/manganese-host": "1.0.0",
+    "@domicile-desktop/component-library": "2.1.0",
+    "@domicile-desktop/manganese-host": "2.0.2",
     "@pandacss/dev": "^1.12.1",
     "react": "^19.2.8"
   },
   "description": "Manganese's top bar: three columns of items over a scrim, and the context each item reads.",
   "devDependencies": {
     "@cprussin/tsconfig": "^5.0.0",
-    "@domicile-desktop/test-support": "0.0.1",
+    "@domicile-desktop/test-support": "0.0.2",
     "@pandacss/preset-panda": "^1.12.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -19,8 +19,7 @@
     "typescript": "^7.0.2"
   },
   "engines": {
-    "bun": ">=1.4.2",
-    "node": ">=24"
+    "bun": ">=1.4.2"
   },
   "exports": {
     "./bar-context": "./src/bar-context.ts",
@@ -51,5 +50,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "1.0.0"
+  "version": "1.1.2"
 }

package/src/TopBar.tsx

@@ -42,9 +42,13 @@ export const TOP_BAR = 32;
  */
 export const TopBar = memo(({ layout }: { layout: BarLayout }) => (
   <header className={barStyles} style={{ blockSize: `${TOP_BAR}px` }}>
-    <div className={startStyles}>{fluid(layout.left, "wide", "start")}</div>
-    <div className={centerStyles}>{fluid(layout.center, "none", "start")}</div>
-    <div className={endStyles}>{fluid(layout.right, "wide", "end")}</div>
+    <div className={startStyles}>
+      {fluid(layout.left, "wide", "start", layout.left.length - 1)}
+    </div>
+    <div className={centerStyles}>
+      {fluid(layout.center, "none", "start", undefined)}
+    </div>
+    <div className={endStyles}>{fluid(layout.right, "wide", "end", 0)}</div>
   </header>
 ));
 
@@ -101,10 +105,22 @@ const centerStyles = css({ justifySelf: "center" });
 // Most items are 28px buttons around a 15px icon, so icons sit 29px apart.
 const endStyles = hstack({ gap: 0, justify: "flex-end", marginInline: -2 });
 
-/** `items`, each in a `FluidItem`, keeping their keys. */
-const fluid = (items: readonly ReactNode[], gap: Gap, anchor: Anchor) =>
-  Children.map(items, (item) => (
-    <FluidItem anchor={anchor} gap={gap}>
+/**
+ * `items`, each in a `FluidItem`, keeping their keys. The one at `open`, beside
+ * the bar's empty middle, may spill into it while it resizes.
+ */
+const fluid = (
+  items: readonly ReactNode[],
+  gap: Gap,
+  anchor: Anchor,
+  open: number | undefined,
+) =>
+  Children.map(items, (item, index) => (
+    <FluidItem
+      anchor={anchor}
+      gap={gap}
+      overflow={index === open ? "visible" : "clip"}
+    >
       {item}
     </FluidItem>
   ));

package/styled-system/patterns/aspect-ratio.mjs

@@ -3,11 +3,11 @@ import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
 transform(props, { map }) {
-  const { ratio = 4 / 3, ...rest } = props;
+  const { ratio = 1.3333333333333333, ...rest } = props;
   return {
     position: "relative",
     _before: {
-      content: `""`,
+      content: '""',
       display: "block",
       height: "0",
       paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)

package/styled-system/patterns/bleed.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const bleedConfig = {
 transform(props, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props;
-  const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+  const { inline, block, ...rest } = props, valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
     "--bleed-x": map(inline, valueFn),
     "--bleed-y": map(block, valueFn),

package/styled-system/patterns/float.mjs

@@ -11,28 +11,22 @@ transform(props, { map }) {
     position: "absolute",
     insetBlockStart: map(placement, (v) => {
       const [side] = v.split("-");
-      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
-      return map2[side];
+      return { top: offsetY, middle: "50%", bottom: "auto" }[side];
     }),
     insetBlockEnd: map(placement, (v) => {
       const [side] = v.split("-");
-      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
-      return map2[side];
+      return { top: "auto", middle: "50%", bottom: offsetY }[side];
     }),
     insetInlineStart: map(placement, (v) => {
       const [, align] = v.split("-");
-      const map2 = { start: offsetX, center: "50%", end: "auto" };
-      return map2[align];
+      return { start: offsetX, center: "50%", end: "auto" }[align];
     }),
     insetInlineEnd: map(placement, (v) => {
       const [, align] = v.split("-");
-      const map2 = { start: "auto", center: "50%", end: offsetX };
-      return map2[align];
+      return { start: "auto", center: "50%", end: offsetX }[align];
     }),
     translate: map(placement, (v) => {
-      const [side, align] = v.split("-");
-      const mapX = { start: "-50%", center: "-50%", end: "50%" };
-      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      const [side, align] = v.split("-"), mapX = { start: "-50%", center: "-50%", end: "50%" }, mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
       return `${mapX[align]} ${mapY[side]}`;
     }),
     ...rest

package/styled-system/patterns/grid-item.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
 transform(props, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
-  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props, spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
     gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,

package/styled-system/patterns/grid.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const gridConfig = {
 transform(props, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
-  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props, getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
     gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,

package/styled-system/patterns/link-overlay.mjs

@@ -9,7 +9,7 @@ transform(props) {
       position: "absolute",
       inset: "0",
       zIndex: "0",
-      ...props["_before"]
+      ...props._before
     },
     ...props
   };

package/styled-system/patterns/spacer.mjs

@@ -8,9 +8,9 @@ transform(props, { map, isCssUnit, isCssVar }) {
     alignSelf: "stretch",
     justifySelf: "stretch",
     flex: map(size, (v) => {
-      if (v == null) return "1";
-      const val = isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
-      return `0 0 ${val}`;
+      if (v == null)
+        return "1";
+      return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
     }),
     ...rest
   };

package/styled-system/patterns/visually-hidden.mjs

@@ -4,7 +4,7 @@ import { css } from '../css/index.mjs';
 const visuallyHiddenConfig = {
 transform(props) {
   return {
-    srOnly: true,
+    srOnly: !0,
     ...props
   };
 }}

package/styled-system/types/prop-type.d.ts

@@ -169,7 +169,7 @@ export interface UtilityValues {
 	transitionProperty: "common" | "colors" | "size" | "position" | "background";
 	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "bounce" | "iconArcRipple" | "iconArcSearch" | "iconArmReach" | "iconArmSwing" | "iconArrowWind" | "iconBellClapper" | "iconBellNudge" | "iconBellSwing" | "iconBoltStrike" | "iconBubbleTip" | "iconCapsuleBob" | "iconCheckDraw" | "iconCoreIn" | "iconCoreOut" | "iconDotBlink" | "iconDownloadDrop" | "iconGearTurn" | "iconKeyholePulse" | "iconKeyPress" | "iconLineWrite" | "iconMoonIn" | "iconMoonOut" | "iconMoonRock" | "iconPartSpread" | "iconPupilGlance" | "iconRayIn" | "iconRayOut" | "iconRayPulse" | "iconShackleLift" | "iconShackleShut" | "iconTrayGive" | "iconWavePull" | "iconWavePush" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "ping" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
+	animationName: "bounce" | "iconArcRipple" | "iconArcSearch" | "iconArmReach" | "iconArmSwing" | "iconArrowWind" | "iconBellClapper" | "iconBellNudge" | "iconBellSwing" | "iconBoltStrike" | "iconBubbleTip" | "iconCapsuleBob" | "iconCheckDraw" | "iconCoreIn" | "iconCoreOut" | "iconDotBlink" | "iconDownloadDrop" | "iconGearTurn" | "iconKeyholePulse" | "iconKeyPress" | "iconLineWrite" | "iconMoonIn" | "iconMoonOut" | "iconMoonRock" | "iconPartSpread" | "iconPupilGlance" | "iconRayIn" | "iconRayOut" | "iconRayPulse" | "iconShackleLift" | "iconShackleShut" | "iconSparkleTwinkle" | "iconSparkleWink" | "iconTrayGive" | "iconWavePull" | "iconWavePush" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "ping" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];