astryx-dracula 0.6.2 → 0.7.0

package/templates/table-grouped.tsx

@@ -2,7 +2,7 @@
 // XLE (canonical structure of the tree below; the CLI had no XLE validator
 // after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
 // human drift check — update it with the file, never alone):
-//   L[h=fill] > (LH[divider p=6] > V[g=4] > (H[g=3 a=center wrap] > (SI[fill] > Hd"Night-shift issues"[level=1 t=display-2]) + B.primary"Raise issue"[opens=#raise-issue]) + (H[g=2 a=center] > (SI[fill] > PS"Filter issues…") + (Po > (B.secondary"View options" + (V[g=4] > RL"Group by" > RLI*5))))) + (LC[p=0] > T[hover density=balanced dv=rows] > (TR > THC*7) + ((TR > TC[colSpan=7] > (H[g=2 a=center] > Ic + Tx"In Progress"[t=body] + Bd.neutral"3")) + (TR > TC*7))*4)) + (LP[divider p=4] > V[g=4] > (H[g=2 a=center] > (SI[fill] > Tx[t=supporting]) + B.ghost"Close panel") + (V[g=1] > Hd[level=2] + Tx[t=body]) + (ML > MLI*6) + (D + (V[g=2] > Tx"Labels"[t=label] + (H[g=2] > Tk*2)))) ;; Dlg#raise-issue > L[h=auto] > (DH"Raise issue" + (LC[p=4] > V[g=4] > TI"Title" + SE{Selector}"Status" + SE{Selector}"Priority" + TI"Project") + (LF[divider] > H[g=2 j=end] > B.secondary"Cancel" + B.primary"Raise issue"))
+//   L[h=fill] > (LH[divider p=6] > V[g=4] > (H[g=3 a=center wrap] > (SI[fill] > Hd"Night-shift issues"[level=1 t=display-2]) + B.primary"Raise issue"[opens=#raise-issue]) + (H[g=2 a=center] > (SI[fill] > PS"Filter issues…") + (Po > (B.secondary"View options" + (V[g=4] > RL"Group by" > RLI*5))))) + (LC[p=0] > T[hover density=balanced dv=rows] > (TR > THC*7) + ((TR > TC[colSpan=7] > (H[g=2 a=center] > Ic + Tx"In Progress"[t=body] + Bd.neutral"6")) + (TR > TC*7))*4)) + (LP[divider p=4] > V[g=4] > (H[g=2 a=center] > (SI[fill] > Tx[t=supporting]) + B.ghost"Close panel") + (V[g=1] > Hd[level=2] + Tx[t=body]) + (ML > MLI*6) + (D + (V[g=2] > Tx"Labels"[t=label] + (H[g=2] > Tk*2)))) ;; Dlg#raise-issue > L[h=auto] > (DH"Raise issue" + (LC[p=4] > V[g=4] > TI"Title" + SE{Selector}"Status" + SE{Selector}"Priority" + TI"Project") + (LF[divider] > H[g=2 j=end] > B.secondary"Cancel" + B.primary"Raise issue"))
 
 /**
  * Table Grouped — the night-shift issue tracker: a grouped, collapsible issue table with a PowerSearch bar and a resizable detail inspector. (Frame/responsive/container: see XLE header above.)
@@ -41,7 +41,9 @@ import {
 	proportional,
 	resolveColumnWidths,
 	Table,
+	TableBody,
 	TableCell,
+	TableHeader,
 	TableHeaderCell,
 	TableRow,
 } from "@astryxdesign/core/Table";
@@ -73,6 +75,12 @@ const groupHeaderCell: React.CSSProperties = {
 	padding: "var(--spacing-3) var(--spacing-4)",
 };
 
+// A definite ancestor for the page's `Layout height="fill"`. 100dvh, not
+// minHeight: '100%': a percentage min-height against an indefinite containing
+// block computes to 0 (CSS 2.1 10.5), so the document would keep the scroll
+// instead of the content pane. Same shape as dashboard.tsx.
+const pageStyle: React.CSSProperties = { height: "100dvh" };
+
 // Types
 type TaskStatus = "in_progress" | "todo" | "backlog" | "done";
 type TaskPriority = "urgent" | "high" | "medium" | "low" | "none";
@@ -810,6 +818,7 @@ export default function TableGrouped() {
 	return (
 		<>
 			<Layout
+				style={pageStyle}
 				height="fill"
 				header={
 					<LayoutHeader hasDivider padding={6}>
@@ -884,149 +893,154 @@ export default function TableGrouped() {
                   `columns` so the labels and the widths cannot drift, and as
                   real <th scope="col"> cells so the association reaches
                   assistive tech. */}
-							<TableRow>
-								{columns.map((col) => (
-									<TableHeaderCell key={col.key} scope="col">
-										{col.header}
-									</TableHeaderCell>
-								))}
-							</TableRow>
-							{groupKeys.map((key) => {
-								const tasks = grouped.get(key);
-								if (!tasks || tasks.length === 0) {
-									return null;
-								}
-								const isExpanded = expandedGroups.has(key);
+							<TableHeader>
+								<TableRow>
+									{columns.map((col) => (
+										<TableHeaderCell key={col.key} scope="col">
+											{col.header}
+										</TableHeaderCell>
+									))}
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{groupKeys.map((key) => {
+									const tasks = grouped.get(key);
+									if (!tasks || tasks.length === 0) {
+										return null;
+									}
+									const isExpanded = expandedGroups.has(key);
 
-								return (
-									<React.Fragment key={key}>
-										{groupBy !== "none" && (
-											<TableRow
-												role="button"
-												tabIndex={0}
-												onClick={() => toggleGroup(key)}
-												onKeyDown={(e) => {
-													if (e.key === "Enter" || e.key === " ") {
-														e.preventDefault();
-														toggleGroup(key);
-													}
-												}}
-											>
-												<TableCell colSpan={columns.length} style={groupHeaderCell}>
-													<HStack gap={2} vAlign="center">
-														<Icon
-															icon={isExpanded ? ChevronDown : ChevronRight}
-															size="sm"
-															color="secondary"
-														/>
-														<Text type="body" weight="semibold">
-															{getGroupLabel(groupBy, key)}
-														</Text>
-														<Badge variant="neutral" label={String(tasks.length)} />
-													</HStack>
-												</TableCell>
-											</TableRow>
-										)}
-										{(groupBy === "none" || isExpanded) &&
-											tasks.map((task) => (
-												<TableRow key={task.id} onClick={() => setSelectedTask(task)}>
-													<TableCell>
-														{/* StatusDot paints nothing but an 8px dot — its
-                                label is aria-label on a role="img" span — so
-                                four states here read as hue alone. Same
-                                dot-plus-word pairing as the Status entry in
-                                TaskDetailPanel's MetadataList. */}
-														<HStack gap={1} vAlign="center">
-															<StatusDot
-																variant={STATUS_DOT_VARIANT[task.status]}
-																label={STATUS_LABEL[task.status]}
-																isPulsing={task.status === "in_progress"}
-															/>
-															<Text type="supporting" color="secondary">
-																{STATUS_LABEL[task.status]}
-															</Text>
-														</HStack>
-													</TableCell>
-													<TableCell>
-														<HStack gap={3} vAlign="center" wrap="wrap">
+									return (
+										<React.Fragment key={key}>
+											{groupBy !== "none" && (
+												<TableRow
+													role="button"
+													tabIndex={0}
+													aria-expanded={isExpanded}
+													onClick={() => toggleGroup(key)}
+													onKeyDown={(e) => {
+														if (e.key === "Enter" || e.key === " ") {
+															e.preventDefault();
+															toggleGroup(key);
+														}
+													}}
+												>
+													<TableCell colSpan={columns.length} style={groupHeaderCell}>
+														<HStack gap={2} vAlign="center">
 															<Icon
-																icon={ChartBar}
+																icon={isExpanded ? ChevronDown : ChevronRight}
 																size="sm"
-																color={PRIORITY_COLOR[task.priority]}
+																color="secondary"
 															/>
-															<Text type="supporting" color="secondary">
-																{task.taskId}
+															<Text type="body" weight="semibold">
+																{getGroupLabel(groupBy, key)}
 															</Text>
-															<StackItem size="fill">
-																<Text type="body">
-																	{task.title}
-																	{task.subtitle && (
-																		<Text type="inherit" color="secondary">
-																			{" › "}
-																			{task.subtitle}
-																		</Text>
-																	)}
-																</Text>
-															</StackItem>
+															<Badge variant="neutral" label={String(tasks.length)} />
 														</HStack>
 													</TableCell>
-													<TableCell>
-														{task.project ? (
-															<Text type="body">{task.project}</Text>
-														) : (
+												</TableRow>
+											)}
+											{(groupBy === "none" || isExpanded) &&
+												tasks.map((task) => (
+													<TableRow key={task.id} onClick={() => setSelectedTask(task)}>
+														<TableCell>
+															{/* StatusDot paints nothing but an 8px dot — its
+                                label is aria-label on a role="img" span — so
+                                four states here read as hue alone. Same
+                                dot-plus-word pairing as the Status entry in
+                                TaskDetailPanel's MetadataList. */}
+															<HStack gap={1} vAlign="center">
+																<StatusDot
+																	variant={STATUS_DOT_VARIANT[task.status]}
+																	label={STATUS_LABEL[task.status]}
+																	isPulsing={task.status === "in_progress"}
+																/>
+																<Text type="supporting" color="secondary">
+																	{STATUS_LABEL[task.status]}
+																</Text>
+															</HStack>
+														</TableCell>
+														<TableCell>
+															<HStack gap={3} vAlign="center" wrap="wrap">
+																<Icon
+																	icon={ChartBar}
+																	size="sm"
+																	color={PRIORITY_COLOR[task.priority]}
+																/>
+																<Text type="supporting" color="secondary">
+																	{task.taskId}
+																</Text>
+																<StackItem size="fill">
+																	<Text type="body">
+																		{task.title}
+																		{task.subtitle && (
+																			<Text type="inherit" color="secondary">
+																				{" › "}
+																				{task.subtitle}
+																			</Text>
+																		)}
+																	</Text>
+																</StackItem>
+															</HStack>
+														</TableCell>
+														<TableCell>
+															{task.project ? (
+																<Text type="body">{task.project}</Text>
+															) : (
+																<Text type="supporting" color="secondary">
+																	None
+																</Text>
+															)}
+														</TableCell>
+														<TableCell>
 															<Text type="supporting" color="secondary">
-																None
+																{task.created}
 															</Text>
-														)}
-													</TableCell>
-													<TableCell>
-														<Text type="supporting" color="secondary">
-															{task.created}
-														</Text>
-													</TableCell>
-													<TableCell>
-														<Text type="supporting" color="secondary">
-															{task.updated}
-														</Text>
-													</TableCell>
-													<TableCell>
-														{/* Name beside the avatar: below 1024 the
+														</TableCell>
+														<TableCell>
+															<Text type="supporting" color="secondary">
+																{task.updated}
+															</Text>
+														</TableCell>
+														<TableCell>
+															{/* Name beside the avatar: below 1024 the
                                 inspector is gone, so the avatar alone would
                                 leave the assignee readable by screen reader
                                 but not by eye. */}
-														<HStack gap={2} vAlign="center">
-															<Avatar name={task.assignee} size="sm" />
-															<Text type="supporting" color="secondary">
-																{task.assignee}
-															</Text>
-														</HStack>
-													</TableCell>
-													<TableCell>
-														<DropdownMenu
-															button={{
-																label: "Actions",
-																variant: "ghost",
-																size: "sm",
-																icon: <Icon icon={Ellipsis} size="sm" />,
-																isIconOnly: true,
-															}}
-															hasChevron={false}
-															items={[
-																{ label: "Edit issue", icon: Pencil },
-																{ label: "Assign to...", icon: User },
-																{ label: "Add label", icon: Tag },
-																{ label: "Duplicate", icon: Copy },
-																{ label: "Move to project", icon: ArrowRight },
-																{ type: "divider" as const },
-																{ label: "Delete issue", icon: Trash },
-															]}
-														/>
-													</TableCell>
-												</TableRow>
-											))}
-									</React.Fragment>
-								);
-							})}
+															<HStack gap={2} vAlign="center">
+																<Avatar name={task.assignee} size="sm" />
+																<Text type="supporting" color="secondary">
+																	{task.assignee}
+																</Text>
+															</HStack>
+														</TableCell>
+														<TableCell>
+															<DropdownMenu
+																button={{
+																	label: "Actions",
+																	variant: "ghost",
+																	size: "sm",
+																	icon: <Icon icon={Ellipsis} size="sm" />,
+																	isIconOnly: true,
+																}}
+																hasChevron={false}
+																items={[
+																	{ label: "Edit issue", icon: Pencil },
+																	{ label: "Assign to...", icon: User },
+																	{ label: "Add label", icon: Tag },
+																	{ label: "Duplicate", icon: Copy },
+																	{ label: "Move to project", icon: ArrowRight },
+																	{ type: "divider" as const },
+																	{ label: "Delete issue", icon: Trash },
+																]}
+															/>
+														</TableCell>
+													</TableRow>
+												))}
+										</React.Fragment>
+									);
+								})}
+							</TableBody>
 						</Table>
 					</LayoutContent>
 				}

package/templates/{table-page-shoe-store-heatmap.template.mjs → table-page-shoe-store.template.mjs}

@@ -2,6 +2,6 @@ export default {
 	type: "page",
 	name: "Shoe Store Sales",
 	description: "Revenue chart over shoe order history",
-	keywords: ["table", "heatmap", "store", "retail", "region", "data"],
+	keywords: ["table", "sales", "store", "retail", "revenue", "data"],
 	category: "data",
 };

package/templates/{table-page-shoe-store-heatmap.tsx → table-page-shoe-store.tsx}

@@ -760,7 +760,7 @@ export default function ShoeStoreTable() {
 	return (
 		<OrderDesk
 			title="Midnight Kicks"
-			selfHash="#/templates/table-page-shoe-store-heatmap"
+			selfHash="#/templates/table-page-shoe-store"
 			products={PRODUCTS}
 			orders={orders}
 			revenueData={revenueData}

package/templates/table-page.tsx

@@ -26,6 +26,7 @@ import type { TableColumn } from "@astryxdesign/core/Table";
 import { pixel, proportional, Table } from "@astryxdesign/core/Table";
 import { Heading, Text } from "@astryxdesign/core/Text";
 import { Download, Filter, Plus } from "lucide-react";
+import type { CSSProperties } from "react";
 import { useMemo, useState } from "react";
 
 interface FamiliarRow extends Record<string, unknown> {
@@ -358,6 +359,12 @@ const columns: TableColumn<FamiliarRow>[] = [
 	},
 ];
 
+// A definite ancestor for `Layout height="fill"`. 100dvh, not minHeight: '100%':
+// a percentage min-height against an indefinite containing block computes to 0
+// (CSS 2.1 10.5), so the document would keep the scroll instead of the content
+// pane. Same shape as dashboard.tsx and table-page-heatmap-status.tsx.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
 export default function TablePage() {
 	const [filters, setFilters] = useState<PowerSearchFilter[]>([]);
 	const { config, applyFilters } = usePowerSearchConfig(fieldDefs, "Familiars");
@@ -368,6 +375,7 @@ export default function TablePage() {
 
 	return (
 		<Layout
+			style={pageStyle}
 			height="fill"
 			header={
 				<LayoutHeader hasDivider padding={6}>

package/templates/table-tree.template.mjs

@@ -0,0 +1,16 @@
+export default {
+	type: "page",
+	name: "Tree Table",
+	description: "Expandable collection tree with sibling-scoped sorting and resizable columns",
+	keywords: [
+		"table",
+		"tree",
+		"hierarchy",
+		"expandable",
+		"resizable",
+		"sortable",
+		"data",
+		"inventory",
+	],
+	category: "data",
+};