@heyramzi/ui 2.0.1 → 2.2.0

package/src/components/list-page/detail-panel.svelte

@@ -1,72 +1,64 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import SectionLabel from "./section-label.svelte";
-import { cn } from "../../lib/utils.js";
-import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../section-header/section-label.svelte";
+	import { cn } from "../../lib/utils.js";
+	import { panelHeaderClass, panelShellClass } from "../../lib/panel.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// One panel per idea in a detail pane. Hand-rolled copies drifted between
-	// 8px and 12px corners, so rounded-xl lives here once.
-	label?: string;
-	labelIcon?: PhosphorIcon;
-	// A mark the icon set does not carry (a platform logo), drawn ahead of the
-	// label at the same optical size.
-	labelLead?: Snippet;
-	// The right side of the header bar: a count, a hint, a button cluster.
-	actions?: Snippet;
-	// WHY: a panel whose body is a media grid or a full-bleed list supplies its
-	// own padding, so the shell must be able to step out of the way.
-	pad?: boolean;
-	// Takes the height the panels above it did not use, inside a `fill` stack.
-	// One panel per stack, and it is the one the reader works in.
-	grow?: boolean;
-	children: Snippet;
-	class?: string;
-	bodyClass?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// One panel per idea in a detail pane. Hand-rolled copies drifted between
+		// 8px and 12px corners, so rounded-xl lives here once.
+		label?: string;
+		labelIcon?: PhosphorIcon;
+		// A mark the icon set does not carry (a platform logo), drawn ahead of the
+		// label at the same optical size.
+		labelLead?: Snippet;
+		// The right side of the header bar: a count, a hint, a button cluster.
+		actions?: Snippet;
+		// WHY: a panel whose body is a media grid or a full-bleed list supplies its
+		// own padding, so the shell must be able to step out of the way.
+		pad?: boolean;
+		// Takes the height the panels above it did not use, inside a `fill` stack.
+		// One panel per stack, and it is the one the reader works in.
+		grow?: boolean;
+		children: Snippet;
+		class?: string;
+		bodyClass?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	label,
-	labelIcon,
-	labelLead,
-	actions,
-	pad = true,
-	grow = false,
-	children,
-	class: className,
-	bodyClass,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		labelIcon,
+		labelLead,
+		actions,
+		pad = true,
+		grow = false,
+		children,
+		class: className,
+		bodyClass,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let hasHeader = $derived(Boolean(label || labelLead || actions));
+	// =========================
+	// DERIVED
+	// =========================
+	let hasHeader = $derived(Boolean(label || labelLead || actions));
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<section
-	class={cn(
-		panelShellClass,
-		grow && "flex min-h-0 flex-1 flex-col",
-		className,
-	)}
->
+<section class={cn(panelShellClass, grow && "flex min-h-0 flex-1 flex-col", className)}>
 	{#if hasHeader}
-		<div
-			class={panelHeaderClass}
-		>
+		<div class={panelHeaderClass}>
 			{#if label || labelLead}
 				<SectionLabel icon={labelIcon}>
 					{#if labelLead}

package/src/components/list-page/detail-row.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// A hairline band inside `DetailHeader` or `DetailPanel` for the record's
-	// own facts, so the page never nests cards inside cards.
-	muted?: boolean;
-	children: Snippet;
-	class?: string;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// A hairline band inside `DetailHeader` or `DetailPanel` for the record's
+		// own facts, so the page never nests cards inside cards.
+		muted?: boolean;
+		children: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { muted = false, children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { muted = false, children, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/components/list-page/detail-stack.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// A flat stack of panels at one gap. `xl:pr-1` keeps the top panel's
-	// corner clear of the shell's scrollbar.
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// A flat stack of panels at one gap. `xl:pr-1` keeps the top panel's
+		// corner clear of the shell's scrollbar.
 
-	// `fill` makes the stack at least as tall as its scroller, so a `grow`
-	// panel (like a writing box) takes the empty bottom third back.
-	fill?: boolean;
-	children: Snippet;
-	class?: string;
-};
+		// `fill` makes the stack at least as tall as its scroller, so a `grow`
+		// panel (like a writing box) takes the empty bottom third back.
+		fill?: boolean;
+		children: Snippet;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { fill = false, children, class: className }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { fill = false, children, class: className }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/components/list-page/empty-state.svelte

@@ -1,36 +1,36 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Button } from "../../shadcn/button/index.js";
-import * as Empty from "../../shadcn/empty/index.js";
-import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Button } from "../../shadcn/button/index.js";
+	import * as Empty from "../../shadcn/empty/index.js";
+	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	icon?: PhosphorIcon;
-	iconWeight?: IconWeight;
-	title: string;
-	description?: string;
-	actionLabel?: string;
-	actionHref?: string;
-	onAction?: () => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		icon?: PhosphorIcon;
+		iconWeight?: IconWeight;
+		title: string;
+		description?: string;
+		actionLabel?: string;
+		actionHref?: string;
+		onAction?: () => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	icon: Icon,
-	iconWeight,
-	title,
-	description,
-	actionLabel,
-	actionHref,
-	onAction,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		icon: Icon,
+		iconWeight,
+		title,
+		description,
+		actionLabel,
+		actionHref,
+		onAction,
+	}: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/components/list-page/filter-item.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { Checkbox } from "../../shadcn/checkbox/index.js";
-import { Check } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { Checkbox } from "../../shadcn/checkbox/index.js";
+	import { Check } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	checked: boolean;
-	onclick: () => void;
-	variant?: "checkbox" | "radio";
-	children: Snippet;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		checked: boolean;
+		onclick: () => void;
+		variant?: "checkbox" | "radio";
+		children: Snippet;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { checked, onclick, variant = "checkbox", children }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { checked, onclick, variant = "checkbox", children }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/components/list-page/filter-popover.svelte

@@ -1,62 +1,62 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import * as Popover from "../../shadcn/popover/index.js";
-import { Funnel as FunnelIcon } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { toolbarTriggerClass } from "./toolbar-trigger.js";
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import * as Popover from "../../shadcn/popover/index.js";
+	import { Funnel as FunnelIcon } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
-// Component generics. The cast bridges that type-only gap.
-const DefaultFunnelIcon = FunnelIcon as unknown as PhosphorIcon;
+	// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
+	// Component generics. The cast bridges that type-only gap.
+	const DefaultFunnelIcon = FunnelIcon as unknown as PhosphorIcon;
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	label: string;
-	icon?: PhosphorIcon;
-	count?: number;
-	active?: boolean;
-	onClear?: () => void;
-	align?: "start" | "center" | "end";
-	width?: `w-${string}`;
-	open?: boolean;
-	clearLabel?: string;
-	triggerClass?: string;
-	contentClass?: string;
-	children: Snippet;
-	trailing?: Snippet;
-};
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		label: string;
+		icon?: PhosphorIcon;
+		count?: number;
+		active?: boolean;
+		onClear?: () => void;
+		align?: "start" | "center" | "end";
+		width?: `w-${string}`;
+		open?: boolean;
+		clearLabel?: string;
+		triggerClass?: string;
+		contentClass?: string;
+		children: Snippet;
+		trailing?: Snippet;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	label,
-	icon: IconComponent = DefaultFunnelIcon,
-	count = 0,
-	active,
-	onClear,
-	align = "start",
-	width = "w-52",
-	open = $bindable(false),
-	clearLabel = "Clear",
-	triggerClass,
-	contentClass,
-	children,
-	trailing,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		icon: IconComponent = DefaultFunnelIcon,
+		count = 0,
+		active,
+		onClear,
+		align = "start",
+		width = "w-52",
+		open = $bindable(false),
+		clearLabel = "Clear",
+		triggerClass,
+		contentClass,
+		children,
+		trailing,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let hasCount = $derived(count > 0);
-let isActive = $derived(active ?? hasCount);
+	// =========================
+	// DERIVED
+	// =========================
+	let hasCount = $derived(count > 0);
+	let isActive = $derived(active ?? hasCount);
 </script>
 
 <!-- =========================== -->
@@ -80,7 +80,12 @@ let isActive = $derived(active ?? hasCount);
 	<Popover.Content class={cn("p-2", width, contentClass)} {align}>
 		{@render children()}
 		{#if onClear && hasCount}
-			<Button variant="ghost" size="sm" class="mt-2 w-full text-xs text-muted-foreground" onclick={onClear}>
+			<Button
+				variant="ghost"
+				size="sm"
+				class="mt-2 w-full text-xs text-muted-foreground"
+				onclick={onClear}
+			>
 				{clearLabel}
 			</Button>
 		{/if}

package/src/components/list-page/grouped-list.svelte

@@ -26,7 +26,7 @@
 		onGroupDragOver?: (e: DragEvent, group: TGroup) => void;
 		onGroupDragLeave?: (e: DragEvent) => void;
 		onGroupDrop?: (e: DragEvent, group: TGroup) => void;
-	};
+	}
 
 	// =========================
 	// PROPS
@@ -77,7 +77,9 @@
 			ondragleave={onGroupDragLeave}
 			ondrop={onGroupDrop ? (e) => onGroupDrop(e, group) : undefined}
 		>
-			<div class="group/header flex items-center gap-1 rounded-lg transition-colors hover:bg-muted/60">
+			<div
+				class="group/header flex items-center gap-1 rounded-lg transition-colors hover:bg-muted/60"
+			>
 				<button
 					type="button"
 					class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left"

package/src/components/list-page/index.ts

@@ -12,7 +12,7 @@ export { default as RailBody } from "./rail-body.svelte";
 export { default as RailEmpty } from "./rail-empty.svelte";
 export { default as RailHead } from "./rail-head.svelte";
 export { default as RailRow } from "./rail-row.svelte";
-export { default as SectionLabel } from "./section-label.svelte";
+export { default as SectionLabel } from "../section-header/section-label.svelte";
 export { queueRailClass, queueRailWidth } from "./queue-rail.js";
 export { default as FilterPopover } from "./filter-popover.svelte";
 export { filterSectionClass } from "./filter-section.js";
@@ -21,8 +21,12 @@ export { default as ListPageShell } from "./list-page-shell.svelte";
 export { default as MasterDetail } from "./master-detail.svelte";
 // The segmented control isn't re-exported here. Two import paths drifted, so
 // its one home is `@heyramzi/ui/components/segmented`.
-export { default as ToolbarSearch } from "./toolbar-search.svelte";
-export { toolbarTriggerClass } from "./toolbar-trigger.js";
+export { default as ToolbarSearch } from "../toolbar/toolbar-search.svelte";
+export { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 export { listTable } from "./list-table.js";
 export type { ViewMode } from "./types.js";
-export { getSectionHost, setSectionHost, type SectionHost } from "./section-host.js";
+export {
+  getSectionHost,
+  setSectionHost,
+  type SectionHost,
+} from "./section-host.js";

package/src/components/list-page/list-page-shell.svelte

@@ -39,7 +39,7 @@
 		content?: Snippet;
 		empty?: Snippet;
 		extra?: Snippet;
-	};
+	}
 
 	// =========================
 	// PROPS
@@ -105,10 +105,7 @@
 	let innerClass = $derived(
 		maxWidth === false
 			? cn("flex min-w-0 flex-1 flex-col gap-4", fillHeight && "min-h-0")
-			: cn(
-					"mx-auto flex w-full min-w-0 flex-1 flex-col gap-4",
-					fillHeight && "min-h-0",
-				),
+			: cn("mx-auto flex w-full min-w-0 flex-1 flex-col gap-4", fillHeight && "min-h-0"),
 	);
 	let innerStyle = $derived(maxWidth ? `max-width: ${maxWidth}` : undefined);
 </script>