@heyramzi/ui 2.12.0 → 2.14.0

package/src/components/work-parts/looks.ts

@@ -0,0 +1,55 @@
+/**
+ * The shapes the work organisms (kanban, task list, gantt) put on wrappers they don't render
+ * themselves: a held card's hole, the focus ring around a consumer's card or row. The organism
+ * picks the role, this file owns the radius, so a token edit moves every view at once.
+ */
+export const workLooks = {
+  /** A card-sized hole: a drop slot, the held card's own place, an empty column. */
+  hole: "rounded-xl bg-foreground/[0.03] outline-1 outline-dashed outline-border -outline-offset-1",
+  /** The wrapper around a consumer's card, so its focus ring follows the card's corners. */
+  card: "rounded-xl",
+  /** A list row or a rail entry: control radius. */
+  row: "rounded-lg",
+  /** A one-line row: 32px, 44px on touch (DESIGN.md, Patterns: list rows). The snippet stretches to fill it; a two-line row grows. */
+  rowHeight: "grid min-h-8 any-pointer-coarse:min-h-11",
+  /** A row-sized hole: an empty list group. */
+  rowHole: "rounded-lg outline-1 outline-dashed outline-border -outline-offset-1",
+  /** A link wrapped round a chip: the focus ring takes the chip's corners. */
+  chipLink: "rounded-sm outline-none focus-visible:shadow-(--ring-focus)",
+  /** A quiet grey box inside a card: a command, a quote. Chip radius, no edge. */
+  inset: "rounded-sm bg-muted/50",
+  /** A surface that holds a whole list: the card step, whose shadow draws its own hairline. */
+  panel: "rounded-xl bg-card text-card-foreground shadow-card",
+} as const;
+
+/**
+ * The gantt's marks. A bar is a control-sized shape, a mark inside a row is chip-sized, and
+ * the two round ones are a progress track and today's date number, which DESIGN rule 15
+ * allows as a count.
+ */
+export const ganttLooks = {
+  bar: "rounded-lg",
+  mark: "rounded-sm",
+  /** The readout that follows a dragged bar. */
+  tip: "rounded-sm bg-foreground px-2 py-1 text-[11px] font-medium whitespace-nowrap text-background tabular-nums shadow-raised",
+  /** A title that didn't fit its bar, set beside it. */
+  outsideLabel: "rounded-sm bg-card/90 px-1 text-xs text-muted-foreground",
+  track: "rounded-full",
+  day: "rounded-full",
+} as const;
+
+/**
+ * The doc pages' shapes. Their icon buttons and history button are controls, so they take the
+ * Button atom's radius; the edited chip is a chip; the page's icon tile and the demo's frame are
+ * card-sized.
+ */
+export const docLooks = {
+  /** A 28px icon button or a full-width row button: control radius, as `Button`. */
+  control: "rounded-lg",
+  /** The "Edited" chip that opens the page's history. */
+  chip: "rounded-sm",
+  /** The icon tile above a page title. */
+  tile: "rounded-xl",
+  /** The frame a demo draws round a whole doc page. */
+  frame: "rounded-xl",
+} as const;

package/src/components/work-parts/property-row.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props {
+		label: string;
+		/** A Phosphor icon before the label. */
+		icon?: Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
+		/**
+		 * `responsive`: the label hides in a narrow container (a chip row) and shows as a column
+		 * from `@3xl` up. `row`: always icon, label, value.
+		 */
+		layout?: "row" | "responsive";
+		children: Snippet;
+		class?: string;
+	}
+
+	let { label, icon: Icon, layout = "row", children, class: className }: Props = $props();
+</script>
+
+<!-- One property: icon and label on the left in muted text, the value on the right. -->
+<div
+	role="group"
+	aria-label={label}
+	class={cn(
+		"min-h-8 items-center gap-2",
+		layout === "row"
+			? "grid grid-cols-[minmax(0,7rem)_minmax(0,1fr)]"
+			: "flex @3xl:grid @3xl:grid-cols-[7rem_minmax(0,1fr)]",
+		className,
+	)}
+>
+	<span
+		class={cn(
+			"min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground",
+			layout === "row" ? "flex" : "hidden @3xl:flex",
+		)}
+		aria-hidden="true"
+	>
+		{#if Icon}<Icon class="size-4 shrink-0" aria-hidden="true" />{/if}
+		<span class="truncate">{label}</span>
+	</span>
+	<div class="flex min-w-0 items-center">{@render children()}</div>
+</div>

package/src/components/work-parts/work-card.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../lib/utils.js";
+	import { Card } from "../../shadcn/card/index.js";
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		/** The bottom row: dates, subtasks, time, avatars. */
+		meta?: Snippet;
+		children: Snippet;
+		class?: string;
+	}
+
+	let { meta, children, class: className, ...rest }: Props = $props();
+</script>
+
+<!-- A white card on a grey well: the title, then a quiet meta row. Depth comes from the card
+     step and rises one step on hover, so a held card has somewhere to go. -->
+<Card
+	{...rest}
+	class={cn(
+		"gap-2.5 px-3 py-2.5 transition-shadow duration-quick ease-smooth-out hover:shadow-card-hover",
+		className,
+	)}
+>
+	<div class="text-sm leading-snug text-pretty">{@render children()}</div>
+	{#if meta}
+		<div
+			class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs whitespace-nowrap text-muted-foreground tabular-nums"
+		>
+			{@render meta()}
+		</div>
+	{/if}
+</Card>

package/src/components/work-parts/work-well.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** Any CSS colour. Tints the well only while something is held over it. */
+		hue?: string;
+		/** Something is held over the well. */
+		active?: boolean;
+		children: Snippet;
+		class?: string;
+	}
+
+	let { hue, active = false, children, class: className, ...rest }: Props = $props();
+
+	// A well rests grey. Its hue shows only while a card is held over it.
+	let style = $derived(
+		hue && active
+			? `background: color-mix(in oklch, ${hue} 8%, var(--color-muted)); outline-color: color-mix(in oklch, ${hue} 30%, transparent);`
+			: undefined,
+	);
+</script>
+
+<!-- The grey well white cards sit in. Card radius plus its padding takes the next step up:
+     radius-xl cards, 6px in, a radius-2xl well (DESIGN rule 14). -->
+<div
+	{...rest}
+	class={cn(
+		"flex min-h-0 flex-col gap-1.5 overflow-x-hidden overflow-y-auto rounded-2xl bg-muted/70 p-1.5 outline-1 outline-transparent -outline-offset-1 transition-[background-color,outline-color] duration-quick ease-smooth-out dark:bg-muted/60",
+		className,
+	)}
+	{style}
+>
+	{@render children()}
+</div>

package/src/work/README.md

@@ -81,15 +81,15 @@ isn't a drop target (an Overdue lane, say).
 | `manualTiebreak` | `(a: T, b: T) => number`                               | Settles two cards with the same manual key, or none.        |
 | `getLabel`      | `(item: T) => string`                                   | The screen-reader name of a card. Defaults to a keyboard hint. |
 | `onSelect`      | `(id: string) => void`                                  | Enter or Space on a focused card.                           |
-| `columnFooter`  | `Snippet<[Column, KanbanColumnContext]>`                | Under a column's cards: a "Show all" or an add button.      |
+| `columnFooter`  | `Snippet<[Column, KanbanColumnContext]>`                | Under a column's cards and its fold button, e.g. an add button. |
 | `wrapColumn`    | `Snippet<[Column, Snippet<[props]>]>`                   | Wraps a whole column, for a context menu. Render the inner snippet once with the props you are handed. |
-| `limit`         | `(columnId: string) => number \| undefined`             | Cards a column shows before the rest fold. `expanded` and `onExpandedChange` lift it per column. |
+| `limit`         | `number \| ((columnId: string) => number \| undefined)` | Cards a column shows before the rest fold, 5 by default; `Infinity` for none. A "Show N more" button opens the fold and "Show less" shuts it, both animated. `moreLabel`, `lessLabel`, `expanded` and `onExpandedChange` go with it. A card moved into a shut column stays in view. |
 | `hidden`        | `string[]`                                              | Columns folded into a rail on the right. Fold and unfold animate, and a card dropped on a rail entry brings the column back. `onHiddenChange`, `hiddenLabel`, `showAllLabel` and `hiddenItem` go with it. |
 
 `columns` can be your own type, as long as it extends `KanbanColumn`: the
 header, footer and wrap snippets get it back as you passed it, so a column can
 carry a status or a stage for your own markup. The header and footer context is
-`{ count, active, shown, capped, hide, expand }`.
+`{ count, active, shown, capped, hide, expand, collapse }`.
 
 `onMove` gives `{ columnId, boardOrder?, beforeId?, afterId? }`. On a manual
 drop `beforeId` and `afterId` name the cards above and below the new slot (null