@umriss-ui/schedule 0.3.5 → 0.3.7

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/schedule 0.3.5
+# @umriss-ui/schedule 0.3.7
 
 > React Gantt-style schedule for data-dense applications - work on lanes over time, with dependencies, blocked time, findings and controlled editing.
 
@@ -214,6 +214,9 @@ const WINDOW_CLOSES = new Map(
   TOURS.flatMap((tour) => tour.stops.map((stop) => [stop.id, stop.window[1] + DAY] as const)),
 );
 
+/* A plate is one word, and so is its tie to the type: a lane header that
+   takes two lines must not tear "FP 377" from its "K". */
+const plate = (text: string) => text.replaceAll(" ", "\u00a0");
 const plateOf = (vehicle: string) => VEHICLES.find((one) => one.id === vehicle)?.plate ?? vehicle;
 const driverOf = (driver: string) => DRIVERS.find((one) => one.id === driver)?.name ?? driver;
 
@@ -254,7 +257,7 @@ export default function TourPlan() {
           {DEPOTS.map((depot) => (
             <LaneGroup key={depot.id} id={depot.id} label={depot.name}>
               {VEHICLES.filter((one) => one.depot === depot.id).map((vehicle) => (
-                <Lane key={vehicle.id} id={vehicle.id} label={`${vehicle.plate} · ${vehicle.type}`} />
+                <Lane key={vehicle.id} id={vehicle.id} label={`${plate(vehicle.plate)}\u00a0· ${vehicle.type}`} />
               ))}
             </LaneGroup>
           ))}
@@ -847,7 +850,7 @@ export default function LaneHeaders() {
       <Lane
         id="v1"
         label={
-          <Stack direction="row" gap={2} align="center">
+          <Stack direction="row" gap={1} align="center">
             <Text size="sm">Van</Text>
             <Text size="xs" tone="muted" mono>
               FP 214 K
@@ -858,7 +861,7 @@ export default function LaneHeaders() {
       <Lane
         id="v2"
         label={
-          <Stack direction="row" gap={2} align="center">
+          <Stack direction="row" gap={1} align="center" wrap>
             <Text size="sm">E-van</Text>
             <Text size="xs" tone="muted" mono>
               FP 377 K
@@ -980,7 +983,7 @@ const WORK: Subtask[] = [
 
 export default function AGroup() {
   return (
-    <Schedule ariaLabel="Two developers in a team, a designer and a tester outside it" initialDomain={[at(6), at(15)]} height={240}>
+    <Schedule ariaLabel="Two developers in a team, a designer and a tester outside it" initialDomain={[at(6), at(15)]} height={240} headerWidth={200}>
       <LaneGroup id="developers" label="Developers">
         <Lane id="arjun" label="Arjun Mehta" />
         <Lane id="chloe" label="Chloe Durand" />
@@ -1003,6 +1006,10 @@ import type { Subtask, Task } from "@umriss-ui/schedule";
 
 const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
 
+/* A plate is one word: a lane header that takes two lines must not tear it
+   apart ("FP 214" / "K"). */
+const plate = (text: string) => text.replaceAll(" ", "\u00a0");
+
 const TOURS: Task[] = [
   { id: "t-01", name: "T-01 Harbour", color: "light-dark(#2563eb, #6b9bff)" },
   { id: "t-03", name: "T-03 Old Town", color: "light-dark(#c2410c, #f08a52)" },
@@ -1021,13 +1028,13 @@ export default function Nesting() {
     <Schedule ariaLabel="North depot with its vans and a truck, and a van from Riverside" initialDomain={[at(6), at(15)]} height={330} headerWidth={200}>
       <LaneGroup id="north" label="North depot">
         <LaneGroup id="vans" label="Vans">
-          <Lane id="fp-214" label="Van FP 214 K" />
-          <Lane id="fp-377" label="E-van FP 377 K" />
-          <Lane id="fp-290" label="Van FP 290 E" />
+          <Lane id="fp-214" label={`Van ${plate("FP 214 K")}`} />
+          <Lane id="fp-377" label={`E-van ${plate("FP 377 K")}`} />
+          <Lane id="fp-290" label={`Van ${plate("FP 290 E")}`} />
         </LaneGroup>
-        <Lane id="fp-118" label="Truck FP 118 R" />
+        <Lane id="fp-118" label={`Truck ${plate("FP 118 R")}`} />
       </LaneGroup>
-      <Lane id="fp-402" label="Van FP 402 R" />
+      <Lane id="fp-402" label={`Van ${plate("FP 402 R")}`} />
       <Subtasks data={LEGS} tasks={TOURS} />
     </Schedule>
   );
@@ -1115,6 +1122,10 @@ import type { Subtask, Task, Dependency } from "@umriss-ui/schedule";
    folded or not. */
 
 const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
+
+/* A plate is one word: a lane header that takes two lines must not tear it
+   apart ("FP 214" / "K"). */
+const plate = (text: string) => text.replaceAll(" ", "\u00a0");
 const min = (n: number) => n * 60_000;
 
 const TOURS: Task[] = [
@@ -1160,12 +1171,12 @@ export default function TheMiniature() {
           setLast(`${intent.subtask}: ${intent.kind}`);
         }}
       >
-        <Lane id="truck" label="Truck FP 118 R" />
+        <Lane id="truck" label={`Truck ${plate("FP 118 R")}`} />
         <LaneGroup id="north" label="North depot">
-          <Lane id="van-1" label="Van FP 214 K" />
-          <Lane id="van-2" label="E-van FP 377 K" />
+          <Lane id="van-1" label={`Van ${plate("FP 214 K")}`} />
+          <Lane id="van-2" label={`E-van ${plate("FP 377 K")}`} />
         </LaneGroup>
-        <Lane id="van-3" label="Van FP 402 R" />
+        <Lane id="van-3" label={`Van ${plate("FP 402 R")}`} />
         <Dependencies data={HANDOVERS} />
         <Subtasks data={legs} tasks={TOURS} />
       </Schedule>
@@ -3222,7 +3233,7 @@ Set `tooltip={false}` when a panel of your own shows the item under the pointer,
 
 ```tsx
 import { useState } from "react";
-import { Badge, Card, Stack, Text } from "@umriss-ui/core";
+import { Badge, Card, CardBody, Stack, Text } from "@umriss-ui/core";
 import { Lane, Schedule, Subtasks } from "@umriss-ui/schedule";
 import type { ScheduleInteraction } from "@umriss-ui/schedule";
 import { PEOPLE, PROJECTS, WORK } from "./planning";
@@ -3257,24 +3268,26 @@ export default function DetailPanelInstead() {
         <Subtasks data={WEB_WORK} tasks={PROJECTS} />
       </Schedule>
       <Card data-detail-panel>
-        {item === null ? (
-          <Text size="sm" tone="secondary">
-            Rest the pointer on a work item to see its details.
-          </Text>
-        ) : (
-          <Stack gap={1}>
-            <Stack direction="row" gap={2} align="center">
-              <Text size="sm" weight="semibold">
-                {item.name}
+        <CardBody>
+          {item === null ? (
+            <Text size="sm" tone="secondary">
+              Rest the pointer on a work item to see its details.
+            </Text>
+          ) : (
+            <Stack gap={1}>
+              <Stack direction="row" gap={2} align="center">
+                <Text size="sm" weight="semibold">
+                  {item.name}
+                </Text>
+                <Badge tone={item.status === "done" ? "success" : "neutral"}>{item.status}</Badge>
+              </Stack>
+              <Text size="xs" tone="secondary">
+                {PROJECTS.find((project) => project.id === item.task)?.name} · {PEOPLE.find((person) => person.id === item.lane)?.name} ·{" "}
+                {item.estimate} h estimated
               </Text>
-              <Badge tone={item.status === "done" ? "success" : "neutral"}>{item.status}</Badge>
             </Stack>
-            <Text size="xs" tone="secondary">
-              {PROJECTS.find((project) => project.id === item.task)?.name} · {PEOPLE.find((person) => person.id === item.lane)?.name} ·{" "}
-              {item.estimate} h estimated
-            </Text>
-          </Stack>
-        )}
+          )}
+        </CardBody>
       </Card>
     </Stack>
   );
@@ -3532,7 +3545,7 @@ export default function PlaceAMark() {
     <Stack gap={2}>
       <div ref={host} style={{ position: "relative", height: 12 }}>
         {pin !== null && (
-          <Text size="xs" tone="muted" style={{ position: "absolute", top: -4, left: pin, transform: "translateX(-50%)" }} data-pin>
+          <Text size="xs" tone="muted" style={{ position: "absolute", top: -4, left: pin, transform: "translateX(-50%)", whiteSpace: "nowrap" }} data-pin>
             Same-day cut-off
           </Text>
         )}
@@ -4115,7 +4128,7 @@ export default function DragFromTheBacklog() {
 
   return (
     <Stack gap={3}>
-      <Stack direction="row" gap={2}>
+      <Stack direction="row" gap={2} wrap>
         {BACKLOG.map((entry) => (
           <Card key={entry.item}>
             <div
@@ -4127,7 +4140,7 @@ export default function DragFromTheBacklog() {
                 setPlacing(entry);
               }}
               onDragEnd={() => setPlacing(null)}
-              style={{ cursor: "grab" }}
+              style={{ cursor: "grab", padding: "var(--u-space-2) var(--u-space-3)" }}
             >
               <Text size="sm">{entry.label}</Text>
             </div>
@@ -4190,6 +4203,10 @@ import type { Intent, Subtask, Task } from "@umriss-ui/schedule";
 
 const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
 
+/* A plate is one word: a lane header that takes two lines must not tear it
+   apart ("FP 214" / "K"). */
+const plate = (text: string) => text.replaceAll(" ", "\u00a0");
+
 const GOODS: Task[] = [
   { id: "dry", name: "Dry goods", color: "light-dark(#2563eb, #6b9bff)" },
   { id: "chilled", name: "Chilled goods", color: "light-dark(#c2410c, #f08a52)" },
@@ -4228,9 +4245,9 @@ export default function LanesThatFit() {
         canMoveTo={mayGo}
         onIntent={onIntent}
       >
-        <Lane id="cool-1" label="Cooled van FP 377 K" />
-        <Lane id="cool-2" label="Cooled van FP 455 R" />
-        <Lane id="dry" label="Van FP 214 K" />
+        <Lane id="cool-1" label={`Cooled van ${plate("FP 377 K")}`} />
+        <Lane id="cool-2" label={`Cooled van ${plate("FP 455 R")}`} />
+        <Lane id="dry" label={`Van ${plate("FP 214 K")}`} />
         <Subtasks data={work} tasks={GOODS} />
       </Schedule>
       <Text size="sm" mono tone="secondary" data-last-move>
@@ -4253,6 +4270,10 @@ import type { Intent, PlacingItem, Subtask, Task } from "@umriss-ui/schedule";
 
 const at = (hours: number, minutes = 0) => new Date(2026, 2, 17, hours, minutes).getTime();
 
+/* A plate is one word: a lane header that takes two lines must not tear it
+   apart ("FP 214" / "K"). */
+const plate = (text: string) => text.replaceAll(" ", "\u00a0");
+
 const GOODS: Task[] = [
   { id: "dry", name: "Dry goods", color: "light-dark(#2563eb, #6b9bff)" },
   { id: "chilled", name: "Chilled goods", color: "light-dark(#c2410c, #f08a52)" },
@@ -4297,7 +4318,7 @@ export default function DraggedIn() {
             setPlacing(WAITING);
           }}
           onDragEnd={() => setPlacing(null)}
-          style={{ cursor: "grab" }}
+          style={{ cursor: "grab", padding: "var(--u-space-2) var(--u-space-3)" }}
         >
           <Text size="sm">{WAITING.label}</Text>
         </div>
@@ -4311,9 +4332,9 @@ export default function DraggedIn() {
         canMoveTo={mayGo}
         onIntent={onIntent}
       >
-        <Lane id="cool-1" label="Cooled van FP 377 K" />
-        <Lane id="cool-2" label="Cooled van FP 455 R" />
-        <Lane id="dry" label="Van FP 214 K" />
+        <Lane id="cool-1" label={`Cooled van ${plate("FP 377 K")}`} />
+        <Lane id="cool-2" label={`Cooled van ${plate("FP 455 R")}`} />
+        <Lane id="dry" label={`Van ${plate("FP 214 K")}`} />
         <Subtasks data={work} tasks={GOODS} />
       </Schedule>
       <Text size="sm" mono tone="secondary" data-last-place>
@@ -5485,7 +5506,7 @@ export interface AlertType {
 
 export const ALERT_TYPES: readonly AlertType[] = [
   { id: "checkout-latency", label: "Checkout · p95 latency above 300 ms", priority: "high" },
-  { id: "checkout-errors", label: "Checkout · error rate above 2 %", priority: "high" },
+  { id: "checkout-errors", label: "Checkout · error rate above 2\u00a0%", priority: "high" },
   { id: "webhooks-queue", label: "Webhooks · queue older than 5 min", priority: "medium" },
   { id: "search-latency", label: "Search · p95 latency above 250 ms", priority: "medium" },
   { id: "images-disk", label: "Image service · disk 85 % full", priority: "low" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umriss-ui/schedule",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "React Gantt-style schedule for data-dense applications - work on lanes over time, with dependencies, blocked time, findings and controlled editing.",
   "license": "MIT",
   "author": "Roman Händler",
@@ -50,8 +50,8 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@umriss-ui/charts": "^0.8.1",
-    "@umriss-ui/core": "^0.14.1"
+    "@umriss-ui/charts": "^0.8.2",
+    "@umriss-ui/core": "^0.16.0"
   },
   "devDependencies": {
     "@fontsource/geist-mono": "^5.3.0",
@@ -65,9 +65,9 @@
     "typescript": "^5.6.3",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
-    "@umriss-ui/demo": "0.0.0",
-    "@umriss-ui/charts": "0.8.1",
-    "@umriss-ui/core": "0.14.1"
+    "@umriss-ui/charts": "0.8.2",
+    "@umriss-ui/core": "0.16.0",
+    "@umriss-ui/demo": "0.0.0"
   },
   "scripts": {
     "props": "node --disable-warning=ExperimentalWarning --experimental-strip-types demo/props.ts",