@cosmicdrift/kumiko-renderer-web 0.189.0 → 0.190.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.189.0",
+  "version": "0.190.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.189.0",
-    "@cosmicdrift/kumiko-headless": "0.189.0",
-    "@cosmicdrift/kumiko-renderer": "0.189.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.190.0",
+    "@cosmicdrift/kumiko-headless": "0.190.0",
+    "@cosmicdrift/kumiko-renderer": "0.190.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/ui/sheet.tsx

@@ -47,6 +47,7 @@ function SheetOverlay({
 
 function SheetContent({
   className,
+  overlayClassName,
   children,
   side = "right",
   showCloseButton = true,
@@ -54,10 +55,11 @@ function SheetContent({
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  overlayClassName?: string
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay />
+      <SheetOverlay className={overlayClassName} />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
@@ -100,7 +102,13 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      // Matches the card footer convention (primitives/index.tsx cardFooter
+      // + cardFooterBorder) — same padding/border/button-row shape as
+      // SectionCard/DefaultCard so a drawer footer reads like a card footer.
+      className={cn(
+        "mt-auto flex items-center justify-end gap-2 border-t bg-muted/30 px-[var(--card-padding)] py-4",
+        className,
+      )}
       {...props}
     />
   )

package/src/widgets/__tests__/widgets.test.tsx

@@ -42,6 +42,17 @@ describe("ProgressBar", () => {
     render(<ProgressBar value={-3} testId="bar" />);
     expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("0");
   });
+
+  test("Füll-Element bildet den Wert über Breite ab und erbt die Höhe nicht vom Elternteil", () => {
+    render(<ProgressBar value={0.5} testId="bar" />);
+    const bar = screen.getByTestId("bar");
+    const fill = bar.firstElementChild as HTMLElement;
+    expect(fill.style.width).toBe("50%");
+    expect(fill.className).not.toContain("h-full");
+    expect(fill.className).toContain("absolute");
+    expect(fill.className).toContain("inset-y-0");
+    expect(bar.className).toContain("relative");
+  });
 });
 
 describe("ModeSwitch", () => {

package/src/widgets/drawer.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { type ReactNode, useRef, useState } from "react";
+import { cn } from "../lib/cn";
 import {
   Sheet,
   SheetContent,
@@ -17,8 +19,40 @@ export type DrawerProps = {
   readonly footer?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
+  /** Opt-in drag-to-resize + maximize toggle (left/right sides only). */
+  readonly resizable?: boolean;
+  readonly defaultWidthPx?: number;
+  readonly minWidthPx?: number;
+  readonly maxWidthPx?: number;
 };
 
+const DEFAULT_WIDTH_PX = 420;
+const MIN_WIDTH_PX = 320;
+const MAX_WIDTH_PX = 800;
+
+// Floating panel with a clearly visible margin on every edge, rounded on
+// all four corners — replaces the sheet primitive's flush-to-viewport-edge
+// per-side classes. twMerge resolves each utility group against the base
+// (inset/width/height/border/rounding), so this fully overrides rather than
+// stacking with it. 32px margin + 32px radius so the detachment from the
+// viewport edge reads clearly at a glance, not just on close 1:1 inspection.
+function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
+  switch (side) {
+    case "left":
+      return "inset-y-8 left-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+    case "top":
+      return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+    case "bottom":
+      return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+    default:
+      return "inset-y-8 right-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
 /** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
  *  thin wrapper over the Sheet primitive with header/body/footer slots
  *  so screens skip per-route Radix boilerplate. */
@@ -31,10 +65,72 @@ export function Drawer({
   footer,
   children,
   testId,
+  resizable = false,
+  defaultWidthPx = DEFAULT_WIDTH_PX,
+  minWidthPx = MIN_WIDTH_PX,
+  maxWidthPx = MAX_WIDTH_PX,
 }: DrawerProps): ReactNode {
+  const canResize = resizable && (side === "left" || side === "right");
+  const [width, setWidth] = useState(defaultWidthPx);
+  const [maximized, setMaximized] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  const effectiveMaxWidthPx = () =>
+    typeof window === "undefined"
+      ? maxWidthPx
+      : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
+  const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : width;
+
+  const onHandlePointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = { startX: event.clientX, startWidth: effectiveWidthPx };
+    setMaximized(false);
+  };
+  const onHandlePointerMove = (event: React.PointerEvent<HTMLDivElement>): void => {
+    if (dragRef.current === null) return;
+    const deltaX = event.clientX - dragRef.current.startX;
+    const signedDelta = side === "right" ? -deltaX : deltaX;
+    setWidth(clamp(dragRef.current.startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
+  };
+  const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    dragRef.current = null;
+  };
+  const onHandleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    const step = event.shiftKey ? 40 : 16;
+    const grow = side === "right" ? "ArrowLeft" : "ArrowRight";
+    const shrink = side === "right" ? "ArrowRight" : "ArrowLeft";
+    if (event.key !== grow && event.key !== shrink) return;
+    event.preventDefault();
+    setMaximized(false);
+    const delta = event.key === grow ? step : -step;
+    setWidth((current) => clamp(current + delta, minWidthPx, effectiveMaxWidthPx()));
+  };
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side={side} data-testid={testId}>
+      <SheetContent
+        side={side}
+        data-testid={testId}
+        overlayClassName="bg-black/20 backdrop-blur-[2px]"
+        className={floatingSideClass(side)}
+        style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
+      >
+        {canResize && (
+          <button
+            type="button"
+            onClick={() => setMaximized((m) => !m)}
+            aria-pressed={maximized}
+            aria-label={maximized ? "Restore drawer width" : "Maximize drawer width"}
+            className="absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden"
+          >
+            {maximized ? (
+              <Minimize2Icon className="size-4" />
+            ) : (
+              <Maximize2Icon className="size-4" />
+            )}
+          </button>
+        )}
         {(title !== undefined || description !== undefined) && (
           <SheetHeader>
             {title !== undefined && <SheetTitle>{title}</SheetTitle>}
@@ -43,6 +139,26 @@ export function Drawer({
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
         {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
+        {canResize && (
+          // biome-ignore lint/a11y/useSemanticElements: <hr> can't carry pointer/keyboard drag interaction or a live width value — a draggable separator needs a div with the ARIA role.
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize drawer"
+            aria-valuenow={effectiveWidthPx}
+            aria-valuemin={minWidthPx}
+            aria-valuemax={effectiveMaxWidthPx()}
+            tabIndex={0}
+            onPointerDown={onHandlePointerDown}
+            onPointerMove={onHandlePointerMove}
+            onPointerUp={onHandlePointerUp}
+            onKeyDown={onHandleKeyDown}
+            className={cn(
+              "absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border",
+              side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2",
+            )}
+          />
+        )}
       </SheetContent>
     </Sheet>
   );

package/src/widgets/progress-bar.tsx

@@ -19,9 +19,12 @@ export function ProgressBar({
       aria-valuenow={Math.round(pct * 100)}
       aria-valuemin={0}
       aria-valuemax={100}
-      className={cn("h-2 w-full overflow-hidden rounded-full bg-muted", className)}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
     >
-      <div className="h-full rounded-full bg-primary" style={{ width: `${pct * 100}%` }} />
+      <div
+        className="absolute inset-y-0 left-0 rounded-full bg-primary"
+        style={{ width: `${pct * 100}%` }}
+      />
     </div>
   );
 }