{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"records-table","title":"Records Table","description":"CRM-style grid with tags, sorting and relationship status.","dependencies":[],"registryDependencies":["https://ward.so/r/foundation.json","https://ward.so/r/glide-menu.json"],"files":[{"path":"registry/ward/RecordsTable.tsx","content":"\"use client\";\n/*\n * MIT License\n *\n * Copyright (c) 2026 Shane Levine\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport \"./styles/records-table.css\";\nimport \"./styles/foundation.css\";\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport GlideMenu from \"./GlideMenu\";\n\n/* ─────────────────────────────────────────────────────────\n * RECORDS TABLE — an AI spreadsheet grid. Columns are\n * *properties*: click a header to open its configuration\n * popover (type, tool, grounding, inputs, prompt, run), add\n * a new AI property from the + header, and watch cells\n * resolve row-by-row while it calculates.\n * ───────────────────────────────────────────────────────── */\n\ntype Strength = \"strong\" | \"weak\" | \"veryweak\" | \"none\";\ntype SortKey = \"name\" | \"last\" | \"strength\";\ntype ColumnKey = \"company\" | \"categories\" | \"last\" | \"strength\" | \"links\" | \"ai\";\n\nconst DEFAULT_COLUMN_WIDTHS: Record = {\n company: 270,\n categories: 275,\n last: 190,\n strength: 210,\n links: 175,\n ai: 240,\n};\n\nconst STRENGTH: Record = {\n strong: { label: \"Very strong\", color: \"var(--green)\", rank: 3 },\n weak: { label: \"Weak\", color: \"var(--orange)\", rank: 2 },\n veryweak: { label: \"Very weak\", color: \"var(--red)\", rank: 1 },\n none: { label: \"No communication\", color: \"var(--ink-3)\", rank: 0 },\n};\n\n// A single mid-lightness base hue per tag. Background, text, and border are\n// derived from this via color-mix() against the theme tokens in .records-tag,\n// so the chips adapt to light and dark automatically (same pattern as FilterTable).\ntype TagColor = { base: string };\n\nconst TAG_PALETTE: Record = {\n amber: { base: \"oklch(0.76 0.13 70)\" },\n lime: { base: \"oklch(0.77 0.16 122)\" },\n yellow: { base: \"oklch(0.80 0.15 101)\" },\n purple: { base: \"oklch(0.62 0.18 293)\" },\n orange: { base: \"oklch(0.71 0.16 48)\" },\n cyan: { base: \"oklch(0.72 0.10 221)\" },\n red: { base: \"oklch(0.64 0.19 27)\" },\n magenta: { base: \"oklch(0.66 0.21 323)\" },\n green: { base: \"oklch(0.70 0.13 162)\" },\n pink: { base: \"oklch(0.67 0.19 3)\" },\n};\n\nconst TAG_COLORS: Record = {\n B2B: TAG_PALETTE.amber,\n B2C: TAG_PALETTE.lime,\n Cafe: TAG_PALETTE.red,\n Catering: TAG_PALETTE.magenta,\n \"Dairy-free\": TAG_PALETTE.cyan,\n Brand: TAG_PALETTE.purple,\n Imports: TAG_PALETTE.orange,\n Local: TAG_PALETTE.green,\n Seasonal: TAG_PALETTE.yellow,\n Sorbet: TAG_PALETTE.pink,\n Vegan: TAG_PALETTE.lime,\n Wholesale: TAG_PALETTE.amber,\n};\n\nexport type RecordRow = {\n id: string;\n name: string;\n tags: string[];\n last: string;\n strength: Strength;\n website?: string;\n};\n\nconst INITIAL_ROWS: RecordRow[] = [\n { id: \"aurora\", name: \"Aurora Works — Reykjavík\", tags: [\"Brand\", \"Seasonal\"], last: \"9 days ago\", strength: \"strong\", website: \"aurora-works.example.com\" },\n { id: \"kumo\", name: \"Kumo Studio — Tokyo\", tags: [\"B2C\", \"Cafe\", \"Vegan\"], last: \"3 weeks ago\", strength: \"strong\", website: \"kumo-studio.example.com\" },\n { id: \"sol-nieve\", name: \"Sol y Nieve — Buenos Aires\", tags: [\"Brand\", \"Local\"], last: \"2 months ago\", strength: \"weak\", website: \"sol-y-nieve.example.com\" },\n { id: \"maple-orbit\", name: \"Maple Orbit — Montréal\", tags: [\"B2B\", \"Wholesale\", \"Seasonal\"], last: \"15 days ago\", strength: \"weak\", website: \"maple-orbit.example.com\" },\n { id: \"blue-fig\", name: \"Blue Fig Brand — Florence\", tags: [\"Brand\", \"Cafe\"], last: \"over 1 year ago\", strength: \"veryweak\", website: \"blue-fig.example.com\" },\n { id: \"sahara-swirl\", name: \"Sahara Swirl — Marrakech\", tags: [\"Sorbet\", \"Local\"], last: \"5 months ago\", strength: \"veryweak\" },\n { id: \"cloudberry\", name: \"Cloudberry Asset — Helsinki\", tags: [\"Dairy-free\", \"Seasonal\"], last: \"No contact\", strength: \"none\", website: \"cloudberry-asset.example.com\" },\n { id: \"palm-sugar\", name: \"Palm Sugar Studio — Bangkok\", tags: [\"B2C\", \"Vegan\"], last: \"3 months ago\", strength: \"veryweak\", website: \"palm-sugar.example.com\" },\n { id: \"cape-vanilla\", name: \"Cape Vanilla Co. — Cape Town\", tags: [\"Wholesale\", \"Imports\"], last: \"over 1 year ago\", strength: \"veryweak\", website: \"cape-vanilla.example.com\" },\n { id: \"andes-snow\", name: \"Andes Snow Studio — Quito\", tags: [\"Brand\", \"Catering\"], last: \"almost 2 years ago\", strength: \"veryweak\" },\n { id: \"tasman-sea\", name: \"Tasman Sea Brand — Hobart\", tags: [\"Brand\", \"Local\"], last: \"2 months ago\", strength: \"weak\", website: \"tasman-sea.example.com\" },\n { id: \"silk-road\", name: \"Silk Road Sorbet — Tbilisi\", tags: [\"Sorbet\", \"Imports\"], last: \"about 1 month ago\", strength: \"weak\", website: \"silk-road.example.com\" },\n { id: \"rosewater\", name: \"Rosewater Kulfi — Jaipur\", tags: [\"B2C\", \"Seasonal\"], last: \"2 months ago\", strength: \"veryweak\" },\n { id: \"lumen\", name: \"Lumen Soft Serve — Copenhagen\", tags: [\"Dairy-free\", \"Cafe\"], last: \"8 months ago\", strength: \"weak\", website: \"lumen-soft-serve.example.com\" },\n { id: \"cacao-norte\", name: \"Cacao Norte — Oaxaca\", tags: [\"B2B\", \"Local\", \"Wholesale\"], last: \"about 2 years ago\", strength: \"none\", website: \"cacao-norte.example.com\" },\n { id: \"pine-pistachio\", name: \"Pine & Pistachio — Istanbul\", tags: [\"Brand\", \"Catering\"], last: \"about 1 month ago\", strength: \"veryweak\" },\n { id: \"ember-asset\", name: \"Ember Asset Company — Seoul\", tags: [\"B2C\", \"Vegan\"], last: \"15 days ago\", strength: \"weak\", website: \"ember-asset.example.com\" },\n { id: \"coral-coast\", name: \"Coral Coast Sorbet — Honolulu\", tags: [\"Sorbet\", \"Local\"], last: \"9 days ago\", strength: \"strong\", website: \"coral-coast.example.com\" },\n { id: \"sunbird\", name: \"Sunbird Gelateria — Lisbon\", tags: [\"Brand\", \"Cafe\"], last: \"over 2 years ago\", strength: \"none\", website: \"sunbird.example.com\" },\n { id: \"mooncake\", name: \"Mooncake Design — Singapore\", tags: [\"B2B\", \"Wholesale\"], last: \"about 1 month ago\", strength: \"veryweak\", website: \"mooncake-ice-cream.example.com\" },\n { id: \"juniper\", name: \"Juniper & Cream — Vancouver\", tags: [\"Dairy-free\", \"Catering\"], last: \"No contact\", strength: \"none\" },\n { id: \"mango-moon\", name: \"Mango Moon Brand — Nairobi\", tags: [\"Sorbet\", \"Vegan\"], last: \"almost 2 years ago\", strength: \"veryweak\", website: \"mango-moon.example.com\" },\n { id: \"fjord-fizz\", name: \"Fjord Fizz Ice — Oslo\", tags: [\"Dairy-free\", \"Seasonal\"], last: \"No contact\", strength: \"none\" },\n { id: \"pampa\", name: \"Pampa Studio — Córdoba\", tags: [\"B2C\", \"Local\"], last: \"12 months ago\", strength: \"veryweak\", website: \"pampa-studio.example.com\" },\n { id: \"lotus-leaf\", name: \"Lotus Leaf Works — Hanoi\", tags: [\"Vegan\", \"Cafe\"], last: \"15 days ago\", strength: \"weak\" },\n { id: \"saffron-sky\", name: \"Saffron Sky Kulfi — Dubai\", tags: [\"Imports\", \"Catering\"], last: \"almost 2 years ago\", strength: \"veryweak\", website: \"saffron-sky.example.com\" },\n { id: \"alpine-plan\", name: \"Alpine Plan — Zürich\", tags: [\"B2B\", \"Brand\", \"Wholesale\"], last: \"4 days ago\", strength: \"strong\", website: \"alpine-plan.example.com\" },\n { id: \"monsoon-mango\", name: \"Monsoon Mango — Mumbai\", tags: [\"Sorbet\", \"Vegan\", \"Catering\"], last: \"18 days ago\", strength: \"weak\", website: \"monsoon-mango.example.com\" },\n { id: \"cedar-spoon\", name: \"Cedar Spoon — Beirut\", tags: [\"Cafe\", \"Local\", \"Seasonal\"], last: \"6 days ago\", strength: \"strong\", website: \"cedar-spoon.example.com\" },\n { id: \"baltic-berry\", name: \"Baltic Berry — Tallinn\", tags: [\"Dairy-free\", \"Seasonal\", \"B2C\"], last: \"5 weeks ago\", strength: \"weak\", website: \"baltic-berry.example.com\" },\n { id: \"delta-dairy\", name: \"Delta Dairy Works — New Orleans\", tags: [\"B2B\", \"Wholesale\", \"Local\"], last: \"2 days ago\", strength: \"strong\", website: \"delta-dairy.example.com\" },\n { id: \"yuzu-yard\", name: \"Yuzu Yard — Kyoto\", tags: [\"Sorbet\", \"Cafe\", \"Seasonal\"], last: \"11 days ago\", strength: \"strong\", website: \"yuzu-yard.example.com\" },\n { id: \"copper-asset\", name: \"Copper Asset — Melbourne\", tags: [\"Brand\", \"Cafe\", \"B2C\"], last: \"about 1 month ago\", strength: \"weak\", website: \"copper-asset.example.com\" },\n { id: \"mint-medina\", name: \"Mint Medina — Tunis\", tags: [\"Dairy-free\", \"Vegan\", \"Local\"], last: \"No contact\", strength: \"none\" },\n { id: \"glacier-grove\", name: \"Glacier Grove — Anchorage\", tags: [\"Seasonal\", \"Local\", \"Catering\"], last: \"7 weeks ago\", strength: \"weak\", website: \"glacier-grove.example.com\" },\n { id: \"orchard-cloud\", name: \"Orchard Cloud — Lyon\", tags: [\"Brand\", \"Seasonal\", \"Cafe\"], last: \"5 days ago\", strength: \"strong\", website: \"orchard-cloud.example.com\" },\n { id: \"tamarind-tide\", name: \"Tamarind Tide — Chennai\", tags: [\"Vegan\", \"Sorbet\", \"B2C\"], last: \"9 months ago\", strength: \"veryweak\", website: \"tamarind-tide.example.com\" },\n { id: \"amber-work\", name: \"Amber Work — Prague\", tags: [\"Brand\", \"B2B\"], last: \"over 1 year ago\", strength: \"none\" },\n { id: \"boreal-batch\", name: \"Boreal Batch — Yellowknife\", tags: [\"Dairy-free\", \"Local\", \"Seasonal\"], last: \"8 days ago\", strength: \"strong\", website: \"boreal-batch.example.com\" },\n { id: \"coconut-commons\", name: \"Coconut Commons — Manila\", tags: [\"Vegan\", \"B2C\", \"Cafe\"], last: \"24 days ago\", strength: \"weak\", website: \"coconut-commons.example.com\" },\n { id: \"dolomite-dairy\", name: \"Dolomite Dairy — Bolzano\", tags: [\"Brand\", \"Wholesale\"], last: \"3 days ago\", strength: \"strong\", website: \"dolomite-dairy.example.com\" },\n { id: \"equator-cream\", name: \"Equator Cream — Kampala\", tags: [\"B2B\", \"Catering\", \"Local\"], last: \"10 months ago\", strength: \"veryweak\", website: \"equator-cream.example.com\" },\n { id: \"hibiscus-house\", name: \"Hibiscus House — Accra\", tags: [\"Sorbet\", \"Cafe\"], last: \"6 weeks ago\", strength: \"weak\", website: \"hibiscus-house.example.com\" },\n { id: \"lagoon-ladle\", name: \"Lagoon Ladle — Venice\", tags: [\"Brand\", \"Seasonal\", \"Catering\"], last: \"7 days ago\", strength: \"strong\", website: \"lagoon-ladle.example.com\" },\n { id: \"midnight-milk\", name: \"Midnight Milk — Tromsø\", tags: [\"Dairy-free\", \"Vegan\", \"Wholesale\"], last: \"No contact\", strength: \"none\" },\n { id: \"nomad-nougat\", name: \"Nomad Nougat — Ulaanbaatar\", tags: [\"Imports\", \"B2B\"], last: \"almost 2 years ago\", strength: \"none\", website: \"nomad-nougat.example.com\" },\n { id: \"olive-snow\", name: \"Olive Snow — Athens\", tags: [\"Brand\", \"Cafe\", \"Local\"], last: \"4 days ago\", strength: \"strong\", website: \"olive-snow.example.com\" },\n { id: \"pacific-pear\", name: \"Pacific Pear — Valparaíso\", tags: [\"Sorbet\", \"Seasonal\"], last: \"2 months ago\", strength: \"weak\", website: \"pacific-pear.example.com\" },\n { id: \"quartz-asset\", name: \"Quartz Asset — Denver\", tags: [\"B2C\", \"Wholesale\"], last: \"10 days ago\", strength: \"strong\", website: \"quartz-asset.example.com\" },\n { id: \"red-lantern\", name: \"Red Lantern Studio — Taipei\", tags: [\"Cafe\", \"Vegan\"], last: \"about 1 month ago\", strength: \"weak\", website: \"red-lantern.example.com\" },\n { id: \"salt-silk\", name: \"Salt & Silk — Muscat\", tags: [\"Imports\", \"Catering\", \"Brand\"], last: \"8 months ago\", strength: \"veryweak\", website: \"salt-and-silk.example.com\" },\n { id: \"tropic-plan\", name: \"Tropic Plan — San Juan\", tags: [\"Sorbet\", \"Local\", \"B2C\"], last: \"6 days ago\", strength: \"strong\", website: \"tropic-plan.example.com\" },\n { id: \"umber-cream\", name: \"Umber Cream — Warsaw\", tags: [\"B2B\", \"Wholesale\", \"Cafe\"], last: \"5 weeks ago\", strength: \"weak\", website: \"umber-cream.example.com\" },\n { id: \"vanilla-vale\", name: \"Vanilla Vale — Antananarivo\", tags: [\"Imports\", \"Local\"], last: \"No contact\", strength: \"none\" },\n { id: \"willow-whip\", name: \"Willow Whip — Portland\", tags: [\"Dairy-free\", \"Vegan\", \"Cafe\"], last: \"3 days ago\", strength: \"strong\", website: \"willow-whip.example.com\" },\n { id: \"zenith-brand\", name: \"Zenith Brand — Auckland\", tags: [\"Brand\", \"Seasonal\"], last: \"3 weeks ago\", strength: \"weak\", website: \"zenith-brand.example.com\" },\n { id: \"apricot-atlas\", name: \"Apricot Atlas — Algiers\", tags: [\"Sorbet\", \"Imports\"], last: \"11 months ago\", strength: \"veryweak\", website: \"apricot-atlas.example.com\" },\n { id: \"black-sesame\", name: \"Black Sesame Social — Bandung\", tags: [\"Vegan\", \"Cafe\", \"B2C\"], last: \"9 days ago\", strength: \"strong\", website: \"black-sesame.example.com\" },\n { id: \"crimson-clover\", name: \"Crimson Clover — Brussels\", tags: [\"Brand\", \"Wholesale\", \"Catering\"], last: \"2 months ago\", strength: \"weak\", website: \"crimson-clover.example.com\" },\n { id: \"dragonfruit-dock\", name: \"Dragonfruit Dock — Shenzhen\", tags: [\"Sorbet\", \"B2B\", \"Wholesale\"], last: \"No contact\", strength: \"none\" },\n];\n\n/* the AI column resolves to fictional competitor pairs */\nconst AI_LABEL = \"Competitors\";\nconst COMPETITOR_POOL = [\n \"Frost & Ladle\",\n \"Polar Pint Co.\",\n \"Meltwater Studio\",\n \"Cirrus Works\",\n \"Golden Plan\",\n \"Velvet Freeze\",\n \"North Asset Collective\",\n \"Sundae Syndicate\",\n];\nconst competitorsFor = (index: number) => `${COMPETITOR_POOL[index % 8]}, ${COMPETITOR_POOL[(index + 3) % 8]}`;\n\nfunction Icon({ children, size = 14, strokeWidth = 1.8 }: { children: React.ReactNode; size?: number; strokeWidth?: number }) {\n return (\n \n {children}\n \n );\n}\n\n/* glyph library for property types & tools */\nconst TYPE_GLYPHS: Record = {\n Text: ,\n File: ,\n Collection: ,\n \"Single select\": ,\n \"Multi select\": ,\n URL: ,\n Reference: ,\n JSON: ,\n \"File splitter\": ,\n Date: ,\n};\n\nconst TOOL_GLYPHS: Record = {\n model: ,\n web: ,\n user: ,\n};\n\n/* per-property configuration shown in the popover */\ntype Prompt = { before: string; chip?: string; after?: string };\ntype ToolKind = \"model\" | \"web\" | \"user\";\ntype ColumnMeta = { type: string; tool: string; toolKind: ToolKind; inputs?: string; prompt?: Prompt };\n\nconst COLUMN_META: Record = {\n Company: { type: \"Text\", tool: \"User input\", toolKind: \"user\" },\n Categories: { type: \"Multi select\", tool: \"Sprinkles 5\", toolKind: \"model\", inputs: \"Company\", prompt: { before: \"Tag each \", chip: \"Company\", after: \" with its market categories.\" } },\n \"Last interaction\": { type: \"Date\", tool: \"User input\", toolKind: \"user\" },\n \"Connection strength\": { type: \"Single select\", tool: \"Sprinkles 5\", toolKind: \"model\", inputs: \"Last interaction\", prompt: { before: \"Score the relationship from \", chip: \"Last interaction\", after: \".\" } },\n Links: { type: \"URL\", tool: \"Web search\", toolKind: \"web\", inputs: \"Company\", prompt: { before: \"Find the website for \", chip: \"Company\", after: \".\" } },\n [AI_LABEL]: { type: \"Text\", tool: \"Web search\", toolKind: \"web\", inputs: \"Company\", prompt: { before: \"Find competitors for \", chip: \"Company\" } },\n};\n\nconst NEW_PROPERTY_TYPES = [\"Text\", \"File\", \"Collection\", \"Single select\", \"Multi select\", \"URL\", \"Reference\", \"JSON\", \"File splitter\"];\nconst MODEL_OPTIONS = [\"Sprinkles 5\", \"Sprinkles 4.2\", \"Sprinkles Mini\"];\nconst INPUT_OPTIONS = [\"Company\", \"Categories\", \"Last interaction\", \"Connection strength\", \"Links\"];\n\nfunction Checkbox({ checked, mixed = false, onChange, label }: { checked: boolean; mixed?: boolean; onChange: () => void; label: string }) {\n return (\n \n );\n}\n\nfunction Tag({ name }: { name: string }) {\n const color = TAG_COLORS[name] ?? { base: \"var(--ink-3)\" };\n return (\n \n {name}\n \n );\n}\n\nfunction TagList({ tags }: { tags: string[] }) {\n const containerRef = useRef(null);\n const measureRef = useRef(null);\n const [visibleCount, setVisibleCount] = useState(tags.length);\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n const measure = measureRef.current;\n if (!container || !measure) return;\n\n const update = () => {\n const available = container.clientWidth;\n const tagWidths = Array.from(measure.querySelectorAll(\"[data-tag-measure]\"), (tag) => tag.offsetWidth);\n const moreWidth = measure.querySelector(\"[data-more-measure]\")?.offsetWidth ?? 0;\n let used = 0;\n let count = 0;\n\n for (let index = 0; index < tagWidths.length; index += 1) {\n const nextUsed = used + (count > 0 ? 4 : 0) + tagWidths[index];\n const hiddenAfter = tags.length - (index + 1);\n const totalWithOverflow = nextUsed + (hiddenAfter > 0 ? 4 + moreWidth : 0);\n if (totalWithOverflow > available) break;\n used = nextUsed;\n count += 1;\n }\n\n setVisibleCount(count);\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(container);\n return () => observer.disconnect();\n }, [tags]);\n\n const hiddenCount = tags.length - visibleCount;\n\n return (\n
\n
\n {tags.map((tag) => )}\n +{tags.length}\n
\n {tags.slice(0, visibleCount).map((tag) => )}\n {hiddenCount > 0 && +{hiddenCount}}\n
\n );\n}\n\nfunction CalcCell() {\n return (\n \n Calculating…\n \n \n );\n}\n\nfunction MiniSwitch({ on, onToggle, label }: { on: boolean; onToggle: () => void; label: string }) {\n return (\n \n \n \n );\n}\n\nfunction HeaderCell({ label, icon, sortKey, sort, onSort, onResizeStart, resizing = false, className = \"\", selected = false, onPick }: { label: string; icon: React.ReactNode; sortKey?: SortKey; sort: { key: SortKey; dir: 1 | -1 }; onSort: (key: SortKey) => void; onResizeStart: (event: React.PointerEvent) => void; resizing?: boolean; className?: string; selected?: boolean; onPick?: (event: React.MouseEvent) => void }) {\n return (\n \n {/* header click opens the property config; the arrow sorts */}\n \n \n \n );\n}\n\n/* config row inside the property popover */\nfunction ConfigRow({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n
\n {label}\n {children}\n
\n );\n}\n\nfunction ConfigPicker({\n label,\n options,\n selected,\n onSelect,\n}: {\n label: string;\n options: { label: string; icon: React.ReactNode }[];\n selected: string;\n onSelect: (value: string) => void;\n}) {\n return (\n \n
{label}
\n \n {options.map((option) => (\n onSelect(option.label)}\n className=\"relative z-10 flex h-8 w-full items-center gap-1.5 rounded-[8px] px-1.5 text-left text-[13px] font-medium text-ink\"\n >\n {option.icon}\n {option.label}\n \n \n \n \n ))}\n \n \n );\n}\n\nfunction InputPicker({\n options,\n selected,\n onToggle,\n}: {\n options: string[];\n selected: string[];\n onToggle: (value: string) => void;\n}) {\n return (\n \n
Use values from
\n \n {options.map((option) => {\n const checked = selected.includes(option);\n return (\n onToggle(option)}\n className=\"relative z-10 flex h-8 w-full items-center gap-1.5 rounded-[8px] px-1.5 text-left text-[13px] font-medium text-ink\"\n >\n \n \n \n {option}\n \n );\n })}\n \n \n );\n}\n\nexport default function RecordsTable({ rows = INITIAL_ROWS, fill = false }: { rows?: RecordRow[]; fill?: boolean; variant?: string }) {\n const [selected, setSelected] = useState>(new Set());\n const [sort, setSort] = useState<{ key: SortKey; dir: 1 | -1 }>({ key: \"name\", dir: 1 });\n const [columnWidths, setColumnWidths] = useState(DEFAULT_COLUMN_WIDTHS);\n const [actionColumnWidth, setActionColumnWidth] = useState(100);\n const [columnWidthsLocked, setColumnWidthsLocked] = useState(false);\n const [resizingColumn, setResizingColumn] = useState(null);\n const initialColumnWidthsRef = useRef | null>(null);\n const tableRef = useRef(null);\n\n /* property popover, anchored to the clicked header */\n const [prop, setProp] = useState<{ col: string; x: number; y: number } | null>(null);\n const [grounding, setGrounding] = useState(false);\n const [groundingHelpOpen, setGroundingHelpOpen] = useState(false);\n const [configMenu, setConfigMenu] = useState<\"type\" | \"tool\" | \"inputs\" | null>(null);\n const [columnOverrides, setColumnOverrides] = useState>>({});\n const [inputSelections, setInputSelections] = useState>({});\n const [pinnedColumns, setPinnedColumns] = useState>(new Set());\n const [moreSettingsOpen, setMoreSettingsOpen] = useState(false);\n const [advancedSettings, setAdvancedSettings] = useState({ required: false, allowEmpty: true, confidence: false });\n /* + new-property menu */\n const [addOpen, setAddOpen] = useState<{ x: number; y: number } | null>(null);\n const [tableMenuOpen, setTableMenuOpen] = useState<{ x: number; y: number } | null>(null);\n /* the added AI column and its lifecycle */\n const [aiAdded, setAiAdded] = useState(false);\n const [aiDone, setAiDone] = useState(false);\n const [pendingOpenAi, setPendingOpenAi] = useState(false);\n const aiThRef = useRef(null);\n /* programmatic scrolls (revealing the new column) shouldn't close popovers */\n const ignoreScrollRef = useRef(false);\n /* a running calculation resolves rows one by one */\n const [calc, setCalc] = useState<{ col: string; resolved: number } | null>(null);\n\n /* Let the table fill its available space once, then capture those rendered\n * widths before paint. From that point on every column is explicit, so a\n * resize changes only the dragged column and the table's total width. */\n useLayoutEffect(() => {\n if (columnWidthsLocked || !tableRef.current) return;\n const headers = Array.from(tableRef.current.querySelectorAll(\"thead th\"));\n if (headers.length < 6) return;\n\n const measured: Record = {\n company: headers[0].getBoundingClientRect().width,\n categories: headers[1].getBoundingClientRect().width,\n last: headers[2].getBoundingClientRect().width,\n strength: headers[3].getBoundingClientRect().width,\n links: headers[4].getBoundingClientRect().width,\n ai: DEFAULT_COLUMN_WIDTHS.ai,\n };\n initialColumnWidthsRef.current = measured;\n setColumnWidths(measured);\n setActionColumnWidth(headers[headers.length - 1].getBoundingClientRect().width);\n setColumnWidthsLocked(true);\n }, [columnWidthsLocked]);\n\n const visibleRows = useMemo(() => {\n return [...rows].sort((a, b) => {\n const value = sort.key === \"name\"\n ? a.name.localeCompare(b.name)\n : sort.key === \"last\"\n ? a.last.localeCompare(b.last)\n : STRENGTH[a.strength].rank - STRENGTH[b.strength].rank;\n return value * sort.dir;\n });\n }, [rows, sort]);\n\n /* stagger: one row resolves every beat */\n useEffect(() => {\n if (!calc) return;\n if (calc.resolved > visibleRows.length) {\n const timer = setTimeout(() => {\n if (calc.col === AI_LABEL) setAiDone(true);\n setCalc(null);\n }, 0);\n return () => clearTimeout(timer);\n }\n const t = setTimeout(() => setCalc((current) => (current ? { ...current, resolved: current.resolved + 1 } : current)), 110);\n return () => clearTimeout(t);\n }, [calc, visibleRows.length]);\n\n /* after adding the AI column, scroll it into view and open its config\n * anchored to the new header */\n useEffect(() => {\n if (!pendingOpenAi || !aiThRef.current) return;\n const scroller = aiThRef.current.closest(\".records-scroll\");\n if (scroller) {\n ignoreScrollRef.current = true;\n scroller.scrollLeft = scroller.scrollWidth;\n }\n const rect = aiThRef.current.getBoundingClientRect();\n setProp({ col: AI_LABEL, x: Math.min(rect.left, window.innerWidth - 336), y: rect.bottom + 6 });\n setPendingOpenAi(false);\n }, [pendingOpenAi, aiAdded]);\n\n /* click anywhere else closes popovers */\n useEffect(() => {\n if (!prop && !addOpen && !tableMenuOpen) return;\n const close = (event: PointerEvent) => {\n if (!(event.target as Element).closest(\"[data-recpop]\")) {\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n }\n };\n document.addEventListener(\"pointerdown\", close);\n return () => document.removeEventListener(\"pointerdown\", close);\n }, [prop, addOpen, tableMenuOpen]);\n\n const openProp = (col: string) => (event: React.MouseEvent) => {\n const th = (event.currentTarget as Element).closest(\"th\");\n if (!th) return;\n setAddOpen(null);\n setTableMenuOpen(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setProp((current) => {\n if (current?.col === col) return null;\n const rect = th.getBoundingClientRect();\n return { col, x: Math.min(rect.left, window.innerWidth - 336), y: rect.bottom + 6 };\n });\n };\n\n const isCalc = (col: string, index: number) => !!calc && calc.col === col && index >= calc.resolved;\n\n const allSelected = visibleRows.length > 0 && visibleRows.every((row) => selected.has(row.id));\n const partiallySelected = !allSelected && visibleRows.some((row) => selected.has(row.id));\n\n const toggleSort = (key: SortKey) => setSort((current) => current.key === key ? { key, dir: (current.dir * -1) as 1 | -1 } : { key, dir: 1 });\n const startColumnResize = (key: ColumnKey, minWidth = 120) => (event: React.PointerEvent) => {\n event.preventDefault();\n event.stopPropagation();\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n\n const startX = event.clientX;\n const startWidth = columnWidths[key];\n const previousCursor = document.body.style.cursor;\n const previousSelection = document.body.style.userSelect;\n document.body.style.cursor = \"col-resize\";\n document.body.style.userSelect = \"none\";\n setResizingColumn(key);\n\n const move = (moveEvent: PointerEvent) => {\n const width = Math.max(minWidth, startWidth + moveEvent.clientX - startX);\n setColumnWidths((current) => ({ ...current, [key]: width }));\n };\n const finish = () => {\n window.removeEventListener(\"pointermove\", move);\n window.removeEventListener(\"pointerup\", finish);\n window.removeEventListener(\"pointercancel\", finish);\n document.body.style.cursor = previousCursor;\n document.body.style.userSelect = previousSelection;\n setResizingColumn(null);\n };\n\n window.addEventListener(\"pointermove\", move);\n window.addEventListener(\"pointerup\", finish);\n window.addEventListener(\"pointercancel\", finish);\n };\n const toggleRow = (id: string) => setSelected((current) => {\n const next = new Set(current);\n if (next.has(id)) next.delete(id);\n else next.add(id);\n return next;\n });\n const toggleAll = () => setSelected((current) => {\n const next = new Set(current);\n if (allSelected) visibleRows.forEach((row) => next.delete(row.id));\n else visibleRows.forEach((row) => next.add(row.id));\n return next;\n });\n\n const meta = prop ? { ...COLUMN_META[prop.col], ...columnOverrides[prop.col] } : null;\n const selectedInputs = prop && meta\n ? inputSelections[prop.col] ?? (meta.inputs ? [meta.inputs] : [])\n : [];\n const tableWidth = columnWidths.company + columnWidths.categories + columnWidths.last + columnWidths.strength + columnWidths.links + (aiAdded ? columnWidths.ai : 0) + actionColumnWidth;\n\n return (\n
\n {\n if (ignoreScrollRef.current) {\n ignoreScrollRef.current = false;\n return;\n }\n setProp(null);\n setConfigMenu(null);\n setGroundingHelpOpen(false);\n setMoreSettingsOpen(false);\n setAddOpen(null);\n setTableMenuOpen(null);\n }}\n >\n \n \n \n \n \n \n \n {aiAdded && }\n \n \n \n \n \n {TYPE_GLYPHS[\"Multi select\"]}} />\n {TYPE_GLYPHS.Date}} />\n {TYPE_GLYPHS[\"Single select\"]}} />\n {TYPE_GLYPHS.URL}} />\n {aiAdded && (\n \n )}\n \n \n \n {/* data cells stay silent — the papery link/flick sound is too much when scanning rows */}\n \n {visibleRows.map((row, index) => {\n const selectedRow = selected.has(row.id);\n const strength = STRENGTH[row.strength];\n return \n \n \n \n \n \n {aiAdded && (\n \n )}\n ;\n })}\n \n \n \n \n \n \n \n \n {aiAdded && }\n \n \n
\n
openProp(\"Company\")(event)}>\n \n Company\n
\n \n 		\n \n \n \n
\n {\n setProp(null);\n setTableMenuOpen(null);\n const rect = (event.currentTarget as Element).getBoundingClientRect();\n setAddOpen((current) => (current ? null : { x: Math.min(rect.left, window.innerWidth - 276), y: rect.bottom + 6 }));\n }}\n className=\"flex size-7 items-center justify-center rounded-[7px] text-ink-2 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n {\n setProp(null);\n setAddOpen(null);\n const rect = event.currentTarget.getBoundingClientRect();\n setTableMenuOpen((current) => current ? null : {\n x: Math.max(8, Math.min(rect.right - 220, window.innerWidth - 228)),\n y: rect.bottom + 6,\n });\n }}\n className=\"flex size-7 items-center justify-center rounded-[7px] text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n
\n
{index + 1} toggleRow(row.id)} label={`Select ${row.name}`} />{row.name.slice(0, 1).toUpperCase()} !row.website && event.preventDefault()} title={row.name} className={`records-company-name ${row.website ? \"has-link\" : \"\"}`}>{row.name}{isCalc(\"Categories\", index) ? : }{isCalc(\"Last interaction\", index) ? : row.last}{isCalc(\"Connection strength\", index) ? : {strength.label}}{isCalc(\"Links\", index) ? : row.website ? {row.website} : —}\n {calc?.col === AI_LABEL ? (index < calc.resolved ? competitorsFor(index) : ) : aiDone ? competitorsFor(index) : —}\n \n
\n {rows.length} count\n \n \n —\n {Math.round(rows.reduce((sum, row) => sum + STRENGTH[row.strength].rank, 0) / rows.length / 3 * 100)}% average\n {rows.filter((row) => row.website).length} links{aiDone ? `${rows.length} filled` : \"—\"}\n
\n
\n\n {/* ── property configuration popover ─────────────────── */}\n {prop && meta && (\n \n
{prop.col}
\n\n \n setConfigMenu((current) => current === \"type\" ? null : \"type\")}\n className=\"flex items-center gap-1.5 rounded-[6px] px-1.5 py-1 text-[13px] font-medium text-ink transition-colors duration-100 hover:bg-hover\"\n >\n {TYPE_GLYPHS[meta.type] ?? TYPE_GLYPHS.Text}\n {meta.type}\n \n \n {configMenu === \"type\" && (\n ({ label: type, icon: {TYPE_GLYPHS[type]} }))}\n onSelect={(type) => {\n setColumnOverrides((current) => ({ ...current, [prop.col]: { ...current[prop.col], type } }));\n setConfigMenu(null);\n }}\n />\n )}\n \n \n setConfigMenu((current) => current === \"tool\" ? null : \"tool\")}\n className=\"flex items-center gap-1.5 rounded-[6px] px-1.5 py-1 text-[13px] font-medium text-ink transition-colors duration-100 hover:bg-hover\"\n >\n \n {meta.toolKind === \"model\"\n ? {TOOL_GLYPHS.model}\n : {TOOL_GLYPHS[meta.toolKind]}}\n \n {meta.tool}\n \n \n {configMenu === \"tool\" && (\n ({\n label: model,\n icon: {TOOL_GLYPHS.model},\n }))}\n onSelect={(tool) => {\n setColumnOverrides((current) => ({ ...current, [prop.col]: { ...current[prop.col], tool, toolKind: \"model\" } }));\n setConfigMenu(null);\n }}\n />\n )}\n \n \n \n setGrounding((current) => !current)} />\n setGroundingHelpOpen((open) => !open)}\n className=\"flex size-6 items-center justify-center rounded-[6px] text-ink-3 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n \n \n \n {groundingHelpOpen && (\n
\n Grounding lets the model verify generated values against connected sources.\n
\n )}\n \n \n setConfigMenu((current) => current === \"inputs\" ? null : \"inputs\")}\n className=\"flex max-w-[220px] items-center gap-1.5 rounded-[6px] px-1.5 py-1 text-[13px] text-ink-2 transition-colors duration-100 hover:bg-hover hover:text-ink\"\n >\n {selectedInputs.length ? (\n \n {selectedInputs.slice(0, 2).map((input) => (\n {input}\n ))}\n {selectedInputs.length > 2 && +{selectedInputs.length - 2}}\n \n ) : (\n Select inputs\n )}\n \n \n {configMenu === \"inputs\" && (\n input !== prop.col)}\n onToggle={(input) => {\n setInputSelections((current) => {\n const existing = current[prop.col] ?? (meta.inputs ? [meta.inputs] : []);\n const next = existing.includes(input) ? existing.filter((item) => item !== input) : [...existing, input];\n return { ...current, [prop.col]: next };\n });\n }}\n />\n )}\n \n\n {/* prompt — @-mention chips inline */}\n \n {meta.prompt ? (\n \n {meta.prompt.before}\n {meta.prompt.chip && {meta.prompt.chip}}\n {meta.prompt.after}\n \n ) : (\n Set a prompt (press @ to mention an input)\n )}\n \n\n {\n setCalc({ col: prop.col, resolved: 0 });\n setProp(null);\n }}\n className=\"mt-2.5 flex h-9 w-full items-center justify-center gap-2 rounded-[9px] text-[12.5px] font-medium text-ink shadow-btn transition-[background-color,transform] duration-150 hover:bg-hover active:scale-[0.98] disabled:opacity-60\"\n >\n \n Go calculate\n \n\n \n setPinnedColumns((current) => {\n const next = new Set(current);\n if (next.has(prop.col)) next.delete(prop.col);\n else next.add(prop.col);\n return next;\n })}\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n {pinnedColumns.has(prop.col) ? \"Unpin\" : \"Pin\"}\n \n setMoreSettingsOpen((open) => !open)}\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n More settings\n \n \n {prop.col === AI_LABEL && (\n {\n setAiAdded(false);\n setAiDone(false);\n setProp(null);\n }}\n className=\"relative z-10 -mx-1.5 flex h-8 items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] leading-none text-ink transition-transform duration-150 active:scale-[0.96]\"\n >\n \n Hide from view\n \n )}\n \n\n {moreSettingsOpen && (\n
\n
Behavior
\n \n setAdvancedSettings((current) => ({ ...current, required: !current.required }))} />\n \n \n setAdvancedSettings((current) => ({ ...current, allowEmpty: !current.allowEmpty }))} />\n \n \n setAdvancedSettings((current) => ({ ...current, confidence: !current.confidence }))} />\n \n
\n )}\n \n )}\n\n {/* ── new property type menu ─────────────────────────── */}\n {addOpen && (\n \n
New property
\n \n {NEW_PROPERTY_TYPES.map((type) => (\n {\n setAddOpen(null);\n setAiDone(false);\n setAiAdded(true);\n setPendingOpenAi(true);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n {TYPE_GLYPHS[type]}\n {type}\n \n ))}\n \n \n )}\n\n {/* ── table options menu ─────────────────────────────── */}\n {tableMenuOpen && (\n \n
Table options
\n \n {\n const position = tableMenuOpen;\n setTableMenuOpen(null);\n setAddOpen({ x: Math.min(position.x, window.innerWidth - 276), y: position.y });\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n Add property\n \n {\n setColumnWidths({ company: 220, categories: 220, last: 155, strength: 180, links: 160, ai: 200 });\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n Compact columns\n \n {\n setColumnWidths({ ...(initialColumnWidthsRef.current ?? DEFAULT_COLUMN_WIDTHS) });\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n Reset column widths\n \n
\n {\n setSelected(new Set());\n setTableMenuOpen(null);\n }}\n className=\"relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[8px] px-2 text-left text-[13px] text-ink\"\n >\n \n Clear selection\n \n \n
\n )}\n \n );\n}\n","type":"registry:component","target":"components/ward/RecordsTable.tsx"},{"path":"registry/ward/styles/records-table.css","content":"/*\n * MIT License\n *\n * Copyright (c) 2026 Shane Levine\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/* ══════════════════════════════════════════════════════════\n * COMPONENT-SPECIFIC — RecordsTable\n * The full CRM grid, spreadsheet gutter, and AI column (~800 lines).\n * Copy this block only alongside RecordsTable; it is not part of the\n * generic foundation above.\n * ══════════════════════════════════════════════════════════ */\n.records-shell {\n width: 100%;\n min-width: 0;\n overflow: hidden;\n border: 1px solid var(--line);\n border-radius: 10px;\n background: var(--card);\n box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);\n}\n\n/* fill mode: the shell stretches to fill its container and drops its own\n * border/radius/shadow so it reads as part of the surrounding card rather\n * than a container-in-a-container. The grid body flexes to fill height. */\n.records-shell.is-fill {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n height: 100%;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n}\n\n.records-shell.is-fill .records-scroll {\n max-height: none;\n flex: 1;\n}\n\n.records-toolbar {\n display: flex;\n min-height: 52px;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 10px;\n border-bottom: 1px solid var(--line-strong);\n background: var(--card);\n}\n\n.records-toolbar-left,\n.records-toolbar-right,\n.records-company-header,\n.records-quiet-button,\n.records-secondary-button,\n.records-primary-button,\n.records-select-button,\n.records-strength,\n.records-link,\n.records-add-calculation {\n display: inline-flex;\n align-items: center;\n}\n\n.records-toolbar-left,\n.records-toolbar-right {\n gap: 4px;\n}\n\n.records-toolbar-right {\n flex-shrink: 0;\n}\n\n.records-select-button,\n.records-quiet-button,\n.records-secondary-button,\n.records-primary-button {\n height: 32px;\n gap: 7px;\n border-radius: var(--radius-control);\n padding: 0 10px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n transition: background-color 140ms var(--ease-out-strong), color 140ms var(--ease-out-strong), transform 140ms var(--ease-out-strong), box-shadow 140ms var(--ease-out-strong);\n}\n\n.records-select-button {\n gap: 8px;\n color: var(--ink);\n border: 1px solid var(--line);\n background: var(--card);\n}\n\n.records-select-button:hover,\n.records-quiet-button:hover,\n.records-secondary-button:hover {\n background: var(--hover);\n color: var(--ink);\n}\n\n.records-quiet-button {\n color: var(--ink-2);\n}\n\n.records-quiet-button.is-active {\n background: var(--highlight-tint);\n color: var(--highlight-ink);\n}\n\n.records-secondary-button {\n border: 1px solid var(--tooltip-border);\n color: var(--ink-2);\n box-shadow: none;\n}\n\n.records-primary-button {\n margin-left: 3px;\n background: var(--highlight);\n color: oklch(1 0 0);\n box-shadow: none;\n}\n\n.records-primary-button:hover {\n filter: saturate(0.9) brightness(1.04);\n}\n\n.records-quiet-button:active,\n.records-secondary-button:active,\n.records-primary-button:active,\n.records-select-button:active,\n.records-add-calculation:active {\n transform: scale(0.96);\n}\n\n.records-database-icon {\n display: inline-flex;\n color: var(--green);\n}\n\n.records-filter-wrap {\n position: relative;\n}\n\n.records-filter-dot {\n width: 5px;\n height: 5px;\n margin-left: -2px;\n border-radius: 99px;\n background: var(--highlight);\n}\n\n.records-filter-menu {\n position: absolute;\n z-index: 30;\n top: calc(100% + 7px);\n left: 0;\n width: 190px;\n padding: 6px;\n border: 1px solid var(--line-strong);\n border-radius: var(--radius-card);\n background: var(--card);\n box-shadow: var(--shadow-overlay);\n animation: pop-in 160ms var(--ease-out-strong) both;\n transform-origin: top left;\n}\n\n.records-sort-menu {\n left: -48px;\n}\n\n.records-filter-label {\n padding: 5px 8px 6px;\n color: var(--ink-3);\n font-size: 10.5px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.records-filter-menu button {\n display: flex;\n width: 100%;\n align-items: center;\n gap: 7px;\n border-radius: var(--radius-chip);\n padding: 7px 8px;\n color: var(--ink-2);\n font-size: 12px;\n text-align: left;\n transition: background-color 120ms ease-out, color 120ms ease-out;\n}\n\n.records-filter-menu button:hover,\n.records-filter-menu button.is-selected {\n background: var(--hover);\n color: var(--ink);\n}\n\n.records-menu-check {\n width: 13px;\n color: var(--highlight-ink);\n font-size: 12px;\n font-weight: 500;\n text-align: center;\n}\n\n.records-scroll {\n max-height: 438px;\n overflow: auto;\n overscroll-behavior: none;\n scrollbar-color: var(--line-strong) transparent;\n scrollbar-gutter: stable;\n}\n\n.records-scroll:focus-visible {\n outline: 2px solid var(--highlight);\n outline-offset: -2px;\n}\n\n.records-table {\n width: 100%;\n min-width: 990px;\n border-collapse: separate;\n border-spacing: 0;\n color: var(--ink);\n font-size: 13px;\n font-weight: 500;\n table-layout: fixed;\n}\n\n.records-company-col { width: 270px; }\n.records-category-col { width: 275px; }\n.records-last-col { width: 190px; }\n.records-strength-col { width: 210px; }\n.records-link-col { width: 175px; }\n\n.records-table th,\n.records-table td {\n border-right: 1px solid color-mix(in srgb, var(--line) 78%, transparent);\n border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);\n text-align: left;\n vertical-align: middle;\n}\n\n.records-table tr > :last-child {\n border-right: 0;\n}\n\n.records-table thead th {\n position: sticky;\n z-index: 5;\n top: 0;\n height: 35px;\n background: var(--card);\n color: var(--ink-2);\n font-size: 12.5px;\n font-weight: 500;\n}\n\n.records-header-cell {\n padding: 0;\n}\n\n.records-resize-handle {\n position: absolute;\n z-index: 12;\n top: 0;\n right: -6px;\n width: 12px;\n height: 100%;\n cursor: col-resize;\n touch-action: none;\n}\n\n.records-resize-handle::after {\n position: absolute;\n top: 7px;\n bottom: 7px;\n left: 5px;\n width: 2px;\n border-radius: 99px;\n background: var(--highlight);\n content: \"\";\n opacity: 0;\n transform: scaleY(0.65);\n transition: opacity 120ms ease-out, transform 150ms var(--ease-out-strong);\n}\n\n.records-resize-handle:hover::after,\n.records-resize-handle.is-resizing::after {\n opacity: 1;\n transform: scaleY(1);\n}\n\n.records-header-cell.records-sticky-cell {\n z-index: 7;\n}\n\n.records-header-button,\n.records-company-header {\n width: 100%;\n height: 35px;\n gap: 8px;\n padding: 0 12px;\n}\n\n.records-company-header {\n padding-left: 6px;\n}\n\n.records-header-button {\n display: flex;\n align-items: center;\n color: var(--ink-2);\n text-align: left;\n transition: background-color 120ms ease-out, color 120ms ease-out;\n}\n\n.records-header-button:hover {\n background: var(--hover);\n color: var(--ink);\n}\n\n.records-header-icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--ink-3);\n}\n\n.records-sort {\n display: inline-flex;\n flex-shrink: 0;\n margin-left: auto;\n opacity: 0;\n transition: opacity 120ms ease-out, transform 160ms var(--ease-out-strong);\n}\n\n.records-header-button:hover .records-sort,\n.records-sort.is-visible {\n opacity: 1;\n}\n\n.records-company-header {\n display: flex;\n}\n\n.records-company-header > span:not(.records-checkbox-box) {\n white-space: nowrap;\n}\n\n.records-add-field {\n display: inline-flex;\n margin-left: auto;\n color: var(--ink-3);\n opacity: 0;\n transition: opacity 120ms ease-out, color 120ms ease-out;\n}\n\n.records-company-header:hover .records-add-field,\n.records-add-field:focus-visible {\n opacity: 1;\n}\n\n.records-add-field:hover {\n color: var(--ink);\n}\n\n.records-checkbox {\n position: relative;\n display: inline-flex;\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-chip);\n}\n\n.records-checkbox input {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n}\n\n.records-checkbox-box {\n display: inline-flex;\n width: 18px;\n height: 18px;\n align-items: center;\n justify-content: center;\n border: 1px solid oklch(0.845 0.011 247.953);\n border-radius: 6px;\n color: oklch(0.446 0.018 251.343);\n background: oklch(1 0 0);\n transition: border-color 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms var(--ease-out-strong);\n}\n\n.records-checkbox:hover .records-checkbox-box {\n border-color: oklch(0.773 0.016 251.194);\n background: oklch(0.966 0.003 228.784);\n}\n\n.records-checkbox:active .records-checkbox-box {\n transform: scale(0.96);\n}\n\n.records-checkbox input:focus-visible + .records-checkbox-box {\n outline: 2px solid var(--highlight);\n outline-offset: 2px;\n}\n\n.records-checkbox-box.is-active {\n border-color: var(--highlight);\n color: oklch(1 0 0);\n background: var(--highlight);\n box-shadow: none;\n}\n\n.records-checkbox-dash {\n width: 8px;\n height: 1.5px;\n border-radius: 99px;\n background: oklch(1 0 0);\n}\n\n:is(.dark, [data-theme=\"dark\"]) .records-checkbox-box {\n border-color: oklch(0.45 0.017 254.711);\n color: oklch(0.917 0.007 247.901);\n background: oklch(0.346 0.015 252.294);\n}\n\n:is(.dark, [data-theme=\"dark\"]) .records-checkbox:hover .records-checkbox-box {\n border-color: oklch(0.521 0.019 254);\n background: oklch(0.391 0.016 251.761);\n}\n\n:is(.dark, [data-theme=\"dark\"]) .records-checkbox-box.is-active {\n border-color: var(--highlight);\n color: oklch(1 0 0);\n background: var(--highlight);\n}\n\n:is(.dark, [data-theme=\"dark\"]) .records-checkbox-dash {\n background: oklch(1 0 0);\n}\n\n.records-cell {\n height: 35px;\n padding: 0 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.records-sticky-cell {\n position: sticky;\n left: 0;\n z-index: 2;\n background: var(--card);\n box-shadow: 5px 0 8px -10px oklch(0 0 0 / 0.4);\n}\n\n.records-company-cell {\n display: flex;\n align-items: center;\n gap: 4px;\n padding-left: 6px;\n overflow: visible;\n}\n\n.records-row > .records-cell {\n transition: background-color 120ms ease-out, color 120ms ease-out;\n}\n\n.records-row:hover > .records-cell {\n background: var(--hover);\n}\n\n.records-row.is-selected > .records-cell {\n background: color-mix(in srgb, var(--highlight) 7%, var(--card));\n}\n\n/* ── spreadsheet gutter ──────────────────────────────────\n * Row numbers at rest; the checkbox takes their place on\n * hover or once the row is selected. */\n.records-rownum {\n display: inline-flex;\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n align-items: center;\n justify-content: center;\n color: var(--ink-3);\n font-size: 11.5px;\n font-variant-numeric: tabular-nums;\n}\n\n.records-row .records-checkbox {\n display: none;\n}\n\n.records-row:hover .records-rownum,\n.records-row.is-selected .records-rownum {\n display: none;\n}\n\n.records-row:hover .records-checkbox,\n.records-row.is-selected .records-checkbox {\n display: inline-flex;\n}\n\n/* ── selected column — the property being configured ───── */\n.records-table th.is-colsel {\n background: color-mix(in srgb, var(--highlight) 8%, var(--card));\n box-shadow: inset 0 2px 0 var(--highlight);\n}\n\nth.is-colsel .records-header-button,\nth.is-colsel .records-company-header,\nth.is-colsel .records-header-icon {\n color: var(--highlight-ink);\n}\n\n.records-table td.is-colsel {\n background: color-mix(in srgb, var(--highlight) 4%, var(--card));\n}\n\n.records-row:hover > td.is-colsel {\n background: color-mix(in srgb, var(--highlight) 8%, var(--card));\n}\n\n.records-row.is-selected > td.is-colsel {\n background: color-mix(in srgb, var(--highlight) 10%, var(--card));\n}\n\n/* ── AI column calculating state ─────────────────────────── */\n.records-calc {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.records-pulse {\n width: 8px;\n height: 8px;\n flex: 0 0 8px;\n border-radius: 50%;\n background: var(--highlight);\n animation: records-pulse 1.1s ease-in-out infinite;\n}\n\n@keyframes records-pulse {\n 0%,\n 100% {\n opacity: 0.35;\n transform: scale(0.8);\n }\n 50% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* agent-screen — a static decorative cursor sitting on the capture (for show) */\n.agent-cursor {\n position: absolute;\n pointer-events: none;\n filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));\n}\n\n.records-company-mark {\n display: inline-flex;\n width: 20px;\n height: 20px;\n flex: 0 0 20px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 6px;\n color: var(--ink-2);\n background: var(--field);\n font-size: 10px;\n font-weight: 500;\n}\n\n.records-company-name {\n min-width: 0;\n overflow: hidden;\n color: var(--ink);\n font-size: 13px;\n font-weight: 500;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-company-name.has-link:hover,\n.records-company-name.has-link:focus-visible {\n color: var(--highlight-ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n}\n\n.records-tags {\n position: relative;\n display: flex;\n width: 100%;\n min-width: 0;\n align-items: center;\n gap: 4px;\n overflow: hidden;\n}\n\n.records-tags-measure {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: max-content;\n gap: 4px;\n pointer-events: none;\n visibility: hidden;\n}\n\n.records-tags-measure > span {\n display: inline-flex;\n}\n\n.records-tag {\n display: inline-flex;\n height: 23px;\n max-width: 115px;\n align-items: center;\n flex-shrink: 0;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid color-mix(in srgb, var(--tag-base) 32%, var(--card));\n border-radius: 8px;\n padding: 0 7px;\n color: color-mix(in srgb, var(--tag-base) 92%, var(--ink));\n background: color-mix(in srgb, var(--tag-base) 18%, var(--card));\n font-size: 13px;\n font-weight: 500;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-more-tag {\n display: inline-flex;\n height: 23px;\n align-items: center;\n flex-shrink: 0;\n border: 1px solid var(--line-strong);\n border-radius: 6px;\n padding: 0 7px;\n color: var(--ink-3);\n background: var(--inset);\n font-size: 11px;\n font-weight: 500;\n}\n\n.records-more-tag {\n border-color: var(--line-strong);\n color: var(--ink-3);\n background: var(--inset);\n}\n\n.records-muted {\n color: var(--ink-3);\n}\n\n.records-strength {\n gap: 8px;\n color: var(--ink-2);\n}\n\n.records-strength-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n flex: 0 0 8px;\n border-radius: 50%;\n}\n\n.records-link {\n max-width: 100%;\n gap: 5px;\n overflow: hidden;\n color: var(--highlight-ink);\n text-overflow: ellipsis;\n text-decoration: underline;\n text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);\n text-underline-offset: 3px;\n transition: color 120ms ease-out, text-decoration-color 120ms ease-out;\n}\n\n.records-link-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-link svg {\n flex-shrink: 0;\n}\n\n.records-link:hover,\n.records-link:focus-visible {\n color: var(--ink);\n text-decoration-color: currentColor;\n}\n\n.records-table tfoot td {\n position: sticky;\n z-index: 4;\n bottom: 0;\n height: 35px;\n background: var(--inset);\n color: var(--ink-2);\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n}\n\n.records-table tfoot .records-sticky-cell {\n z-index: 6;\n background: var(--inset);\n}\n\n.records-calculation-label {\n color: var(--ink-2);\n font-weight: 500;\n}\n\n.records-footer-value {\n display: inline-flex;\n height: 35px;\n align-items: center;\n vertical-align: middle;\n}\n\n.records-calculation-number {\n margin-right: 3px;\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n}\n\n.records-add-calculation {\n height: 35px;\n gap: 6px;\n color: var(--ink-3);\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n transition: color 120ms ease-out, transform 140ms var(--ease-out-strong);\n}\n\n.records-add-calculation:hover {\n color: var(--ink);\n}\n\n.records-average {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n color: var(--ink-2);\n}\n\n.records-calculation-row-secondary td {\n position: sticky;\n bottom: 35px;\n background: color-mix(in srgb, var(--inset) 70%, var(--card));\n}\n\n.records-calculation-row-secondary .records-sticky-cell {\n position: sticky;\n background: color-mix(in srgb, var(--inset) 70%, var(--card));\n}\n\n.records-footer {\n display: flex;\n min-height: 35px;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 0 12px;\n color: var(--ink-3);\n font-size: 11.5px;\n}\n\n.records-footer strong {\n color: var(--ink-2);\n font-weight: 500;\n}\n\n.records-footer-hint {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n opacity: 0;\n transition: opacity 160ms ease-out;\n}\n\n.records-shell:hover .records-footer-hint {\n opacity: 1;\n}\n\n.records-scroll-cue {\n display: inline-flex;\n color: var(--ink-3);\n}\n\n@media (max-width: 640px) {\n .records-toolbar {\n align-items: flex-start;\n flex-direction: column;\n }\n\n .records-toolbar-left,\n .records-toolbar-right {\n width: 100%;\n }\n\n .records-toolbar-right {\n justify-content: flex-end;\n }\n\n}\n","type":"registry:file","target":"components/ward/styles/records-table.css"}],"meta":{"variants":["Default"],"version":"1.1.0","source":"https://github.com/slev12397/beautiful-ui/blob/44a274e598395ab61e7c96c26fda2758780253b7/components/primitives/RecordsTable.tsx","access":"free"},"categories":["data"],"type":"registry:component"}