50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1208,import { TableBody, TableSortButton, type TableSortDirection, } from "@/components/ui/table-motion"; import { cn } from "@/lib/utils"; import type { ComponentProps } from "react"; /* * Table (owner's roadmap, 2026-10-16: "Data in rows and columns, with sortable headers"), with shadcn's parts: * Table (inside a container that scrolls sideways), TableHeader, TableBody, TableFooter, TableRow, TableHead, * TableCell and TableCaption. A real HTML table, so screen readers announce rows, columns and headers. * - Borders: quiet dividers between rows and none round the outside (design.md: few borders). The lines belong * to the cells, with the table's borders kept separate and no spacing between them, so each row carries its * own line when it glides. * - Sorting: give TableHead `sort` and `onSort`. Its label becomes a button, the header gets aria-sort (only the * sorted column has one, as in the WAI-ARIA sortable table), and the arrow turns between up and down. * - When sorting changes the rows' order, they glide to their new places (TableBody, in table-motion.tsx with * the sort button: the two client parts). Give rows a stable `key` so they can. * - Rows: hover is a colour change only, and a selected row (data-state="selected") is muted. A checkbox column * stays as narrow as its checkbox. */ /** Wraps the table in a container that scrolls sideways when the columns don't fit */ function Table({ className, ...props }: ComponentProps<"table">) { return (

); } function TableHeader({ className, ...props }: ComponentProps<"thead">) { return ( ); } function TableFooter({ className, ...props }: ComponentProps<"tfoot">) { return ( tr:first-child>*]:border-t [&>tr:first-child>*]:border-border [&>tr:last-child>*]:border-b-0", className, )} {...props} /> ); } function TableRow({ className, ...props }: ComponentProps<"tr">) { return ( ); } export type TableHeadProps = ComponentProps<"th"> & { /** This column's sort. Sets aria-sort on the sorted column and turns the arrow. */ sort?: TableSortDirection; /** Makes the header a button that sorts the column; called when it's pressed */ onSort?: () => void; }; function TableHead({ className, sort, onSort, children, ...props }: TableHeadProps) { return ( ); } function TableCell({ className, ...props }: ComponentProps<"td">) { return ( { node.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element; }} data-slot="table-body" className={cn("[&>tr:last-child>*]:border-b-0", className)} {...props} /> ); } export type TableSortButtonProps = ComponentProps<"button"> & { /** The column's sort, which turns the arrow */ direction?: TableSortDirection; }; /** * The button inside a sortable TableHead. TableHead renders it for you when you give it `onSort`; use it directly * only to build a header of your own (set aria-sort on the header yourself then). */ function TableSortButton({ direction = "none", className, children, ...props }: TableSortButtonProps) { const reduce = useReducedMotion() ?? false; const sorted = direction !== "none"; return ( ); } export { TableBody, TableSortButton }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.52.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.52.0"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/table.tsx","content":"$52","type":"registry:ui"},{"path":"registry/fewtone/ui/table-motion.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]

); } export type { TableSortButtonProps, TableSortDirection } from "@/components/ui/table-motion"; export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortButton, }; 53:T1c5d,"use client"; import { duration, spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { ArrowUpIcon } from "lucide-react"; import { type AnimationPlaybackControls, animate, type MotionValue, motion, motionValue, useReducedMotion, } from "motion/react"; import { type ComponentProps, useEffect, useRef } from "react"; /* * The client parts of Table: the body, whose rows glide when their order changes, and the sort button with its * arrow. table.tsx re-exports them, so every other part stays a server component. * - Rows glide (FLIP, .agents/rules/motion.md): when sorting reorders the rows, each row starts from where it * was drawn and glides to its new place on spring.snappy. Only a transform moves, and rows stay real `tr`s. * Places are offsets (layout pixels), so a zoomed or scaled page doesn't double the trip. Re-sorting mid-glide * leaves from where each row is now. Rows that are added, removed or resized just take their places: only a * new order glides. With reduced motion nothing moves. * - The sort arrow turns between up and down on spring.snappy. Unsorted, it's hidden until you point at the * header (or focus it); when a column stops being sorted it fades out where it was, then resets. */ export type TableSortDirection = "ascending" | "descending" | "none"; /** A row on its way to its new place: its offset, and the spring taking it there */ type Glide = { y: MotionValue; animation?: AnimationPlaybackControls; stop: () => void }; /** Where a row sits in its body, in layout pixels (offsets: transforms and zoom don't count) */ const placeOf = (row: HTMLTableRowElement, body: HTMLTableSectionElement) => row.offsetTop - body.offsetTop; function TableBody({ className, ref, ...props }: ComponentProps<"tbody">) { const node = useRef(null); const reduce = useReducedMotion() ?? false; // Read by the observer below, which outlives renders const reduceRef = useRef(reduce); useEffect(() => { reduceRef.current = reduce; }, [reduce]); useEffect(() => { const body = node.current; if (!body) return; const glides = new Map(); let order: HTMLTableRowElement[] = []; let places = new Map(); /** Note each row's place, to glide from next time. Rows that left the table let go of their glide. */ const remember = () => { order = Array.from(body.rows); places = new Map(order.map((row) => [row, placeOf(row, body)])); for (const [row, glide] of glides) if (!places.has(row)) glide.stop(); }; // React moves the rows' nodes when their keys change order. The observer runs after it does and before the // browser paints, so each row can be put back where it was drawn, then let go. const onRowsChange = () => { const before = order; const was = places; remember(); if (reduceRef.current) return; const kept = order.filter((row) => was.has(row)); const keptBefore = before.filter((row) => places.has(row)); if (kept.every((row, index) => row === keptBefore[index])) return; for (const row of kept) { let glide = glides.get(row); const from = (was.get(row) ?? 0) - (places.get(row) ?? 0) + (glide?.y.get() ?? 0); // Still and already in place: nothing to do. A row mid-glide is placed again either way. if (from === 0 && !glide) continue; if (!glide) { const y = motionValue(0); const unsubscribe = y.on("change", (value) => { row.style.transform = value === 0 ? "" : `translateY(${value}px)`; }); const created: Glide = { y, stop: () => { created.animation?.stop(); unsubscribe(); row.style.transform = ""; glides.delete(row); }, }; glide = created; glides.set(row, glide); } // Placed with jump(), which resets the speed, so the spring doesn't count the jump as a push glide.animation?.stop(); glide.y.jump(from); glide.animation = animate(glide.y, 0, spring.snappy); } }; remember(); const rows = new MutationObserver(onRowsChange); rows.observe(body, { childList: true }); // Places change when the table reflows (a new width, rows that grow), so note them again const size = new ResizeObserver(remember); size.observe(body); return () => { rows.disconnect(); size.disconnect(); for (const glide of glides.values()) glide.stop(); }; }, []); return (
[role=checkbox]]:flex", className, )} {...props} > {onSort ? ( {children} ) : ( children )}	[role=checkbox]]:flex", className, )} {...props} /> ); } function TableCaption({ className, ...props }: ComponentProps<"caption">) { return (