From 7cddc142cbdc19b9006aa0bcecf7e4e69e84e92f Mon Sep 17 00:00:00 2001 From: Oseer Williams Date: Tue, 3 Mar 2026 09:10:58 -0500 Subject: [PATCH] feat(): SW-1431: Refactor code structure and enhance theme management across components build: refactor code structure and remove redundant sections for improved readability, maintainability, and build times feat: removing sample express app build: update vulnerable packages fix storybook main use npx for github action to match other actions simplify dts plugin config feat: add viteFinal configuration to omit 'vite:dts' plugin for Storybook build fix: reorder imports for consistency in Storybook configuration fix: update browser configuration to use instances for Playwright Refactor code structure for improved readability and maintainability fix: update story titles for TdpSearch components for consistency feat: add CodeEditor component with styling and stories - Implemented CodeEditor component with support for multiple languages and themes. - Added SCSS styling for CodeEditor. - Created stories for CodeEditor showcasing various use cases including default, light mode, and interactive examples. - Introduced TDPLink component for navigation with context provider and utility functions for constructing TDP URLs. - Updated existing stories for AlertDialog, Dialog, Drawer, and Sheet to enhance documentation parameters. - Refactored index.ts to include new components and removed unused exports. - Adjusted tsconfig.json to remove isolatedModules setting. adding augment skills feat: add usePlotlyTheme hook for dynamic theme management - Implemented a new hook `usePlotlyTheme` to manage Plotly theme colors based on the document's dark mode class. - Removed the old CSS file `index.css` and replaced it with a more modular approach. - Updated component imports in `index.ts` to reflect new paths. - Deleted unused `main.tsx` and SCSS files to streamline the codebase. - Adjusted Tailwind CSS variables for dark mode to improve color contrast. - Removed the old theme provider and related types to simplify theming. - Cleaned up TypeScript configuration by removing obsolete path aliases. feat: update Tetra Science dark theme and add ComponentExample story - Changed appPreviewBg color in the dark theme from #11183D to #212948. - Introduced a new story for ComponentExample showcasing various UI components. - Removed the old ComponentExample implementation. - Updated TdpSearch styles to use new color variables and removed unnecessary font-family declarations. - Refactored TdpSearchServer story to align with new design tokens. - Deleted unused example and chart components. - Removed global styles from index.scss and adjusted index.ts exports for better organization. - Updated tailwind.css to use oklch color values for improved color management. feat: update styles and structure for improved theme management and component consistency feat: refactor AssistantModal story and enhance PythonEditorModal with description fix: example vite app imports SW-1188: initial interactive scatter implementation SW-1188: allow 0 in size mapping check SW-1188: fix matching between plotly selected and component sets SW-1188: fix effect deps SW-1188: move config template to constants SW-1188: add more stories SW-1888: rename tests SW-1188: PR comments SW-1188: lint SW-1188: fix downsampling story data generation issues SW-1188: reduce downsampling result data count SW-1188: fix logarithmic axis min/max calculation chore: add Zephyr test case IDs to stories SW-1188: minor stories fixes SW-1188: add file input for downsampling example SW-1251: kv example endpoints implementation SW-1251: fix secured flag, upd readme SW-1251: upd readme and add demo ui fix: example vite app imports build: refactor code structure and remove redundant sections for improved readability, maintainability, and build times feat: removing sample express app build: update vulnerable packages fix storybook main use npx for github action to match other actions simplify dts plugin config feat: add viteFinal configuration to omit 'vite:dts' plugin for Storybook build fix: reorder imports for consistency in Storybook configuration fix: update browser configuration to use instances for Playwright refactor: update package.json paths and remove alias configuration from vite.config.ts Update README.md Co-authored-by: Brennon Lee <150060927+blee-tetrascience@users.noreply.github.com> refactor: update paths in package.json and add @storybook/builder-vite dependency ignore flaky test refactor: downgrade @storybook/builder-vite dependency to version 10.2.15 fix: restore zephyr screenshot generation feat: add missing @fontsource-variable/inter dependency in package.json fix: reorganize imports and improve component structure across multiple files - Added missing imports for components in various story files. - Moved imports to maintain consistency and readability in component files. - Removed redundant imports and ensured proper usage of React and utility functions. - Updated state initialization in the useIsMobile hook for better clarity. - Adjusted Vite configuration for improved plugin management. fixing lint fix storybook build yarn lint fix removine augment skills and example pages Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Refactor components to remove styled-components and replace with Tailwind CSS classes - Updated Navbar component to use Tailwind CSS for styling instead of styled-components. - Refactored ProtocolConfiguration component to utilize Tailwind CSS for layout and styling. - Modified ProtocolYamlCard to replace styled-components with Tailwind CSS classes. - Adjusted PythonEditorModal and its story to remove styled-components in favor of Tailwind CSS. - Refactored Sidebar component to eliminate styled-components and implement Tailwind CSS. - Updated TDPLink component to remove styled-components and use Tailwind CSS for styling. - Refactored CodeEditor component to replace styled-components with Tailwind CSS classes. - Removed unused styled-components from input-group and sidebar components. - Updated yarn.lock to reflect changes in dependencies and versions. updated yarn lock Refactor theme handling by replacing next-themes with a custom useTheme hook and update related components Remove unused SCSS files and associated imports from chart components and UI elements Remove unused SCSS import from ChromatogramChart component Refactor theme handling by introducing useIsDark hook and replacing useTheme with useCodeEditorTheme in CodeEditor and Toaster components Fix formatting in registry.json for code-editor component entry chore: add Zephyr test case IDs to stories refactor: improve folder naming and structure in Zephyr sync script test: update layer toggling tests to use data-variant attributes for button states refactor: update styles to use new color variables and remove unused SCSS files refactor: replace DialogTrigger with direct Button usage and update AssistantModal and PythonEditorModal to handle open state feat: add Inter Variable font with italic style to index.css refactor: simplify renderDialog function and update DialogFooter to use args for showCloseButton refactor: rename 'direction' to 'orientation' in Resizable stories for consistency fix: pass contentProps to ComboboxContent in renderCombobox function chore: update version to 0.5.0 in package.json feat(): SW-1431: Refactor code structure and enhance theme management across components build: refactor code structure and remove redundant sections for improved readability, maintainability, and build times feat: removing sample express app build: update vulnerable packages fix storybook main use npx for github action to match other actions simplify dts plugin config feat: add viteFinal configuration to omit 'vite:dts' plugin for Storybook build fix: reorder imports for consistency in Storybook configuration fix: update browser configuration to use instances for Playwright Refactor code structure for improved readability and maintainability fix: update story titles for TdpSearch components for consistency feat: add CodeEditor component with styling and stories - Implemented CodeEditor component with support for multiple languages and themes. - Added SCSS styling for CodeEditor. - Created stories for CodeEditor showcasing various use cases including default, light mode, and interactive examples. - Introduced TDPLink component for navigation with context provider and utility functions for constructing TDP URLs. - Updated existing stories for AlertDialog, Dialog, Drawer, and Sheet to enhance documentation parameters. - Refactored index.ts to include new components and removed unused exports. - Adjusted tsconfig.json to remove isolatedModules setting. adding augment skills feat: add usePlotlyTheme hook for dynamic theme management - Implemented a new hook `usePlotlyTheme` to manage Plotly theme colors based on the document's dark mode class. - Removed the old CSS file `index.css` and replaced it with a more modular approach. - Updated component imports in `index.ts` to reflect new paths. - Deleted unused `main.tsx` and SCSS files to streamline the codebase. - Adjusted Tailwind CSS variables for dark mode to improve color contrast. - Removed the old theme provider and related types to simplify theming. - Cleaned up TypeScript configuration by removing obsolete path aliases. feat: update Tetra Science dark theme and add ComponentExample story - Changed appPreviewBg color in the dark theme from #11183D to #212948. - Introduced a new story for ComponentExample showcasing various UI components. - Removed the old ComponentExample implementation. - Updated TdpSearch styles to use new color variables and removed unnecessary font-family declarations. - Refactored TdpSearchServer story to align with new design tokens. - Deleted unused example and chart components. - Removed global styles from index.scss and adjusted index.ts exports for better organization. - Updated tailwind.css to use oklch color values for improved color management. feat: update styles and structure for improved theme management and component consistency feat: refactor AssistantModal story and enhance PythonEditorModal with description fix: example vite app imports SW-1188: initial interactive scatter implementation SW-1188: allow 0 in size mapping check SW-1188: fix matching between plotly selected and component sets SW-1188: fix effect deps SW-1188: move config template to constants SW-1188: add more stories SW-1888: rename tests SW-1188: PR comments SW-1188: lint SW-1188: fix downsampling story data generation issues SW-1188: reduce downsampling result data count SW-1188: fix logarithmic axis min/max calculation chore: add Zephyr test case IDs to stories SW-1188: minor stories fixes SW-1188: add file input for downsampling example SW-1251: kv example endpoints implementation SW-1251: fix secured flag, upd readme SW-1251: upd readme and add demo ui fix: example vite app imports build: refactor code structure and remove redundant sections for improved readability, maintainability, and build times feat: removing sample express app build: update vulnerable packages fix storybook main use npx for github action to match other actions simplify dts plugin config feat: add viteFinal configuration to omit 'vite:dts' plugin for Storybook build fix: reorder imports for consistency in Storybook configuration fix: update browser configuration to use instances for Playwright refactor: update package.json paths and remove alias configuration from vite.config.ts Update README.md Co-authored-by: Brennon Lee <150060927+blee-tetrascience@users.noreply.github.com> refactor: update paths in package.json and add @storybook/builder-vite dependency ignore flaky test refactor: downgrade @storybook/builder-vite dependency to version 10.2.15 fix: restore zephyr screenshot generation feat: add missing @fontsource-variable/inter dependency in package.json fix: reorganize imports and improve component structure across multiple files - Added missing imports for components in various story files. - Moved imports to maintain consistency and readability in component files. - Removed redundant imports and ensured proper usage of React and utility functions. - Updated state initialization in the useIsMobile hook for better clarity. - Adjusted Vite configuration for improved plugin management. fixing lint fix storybook build yarn lint fix removine augment skills and example pages Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Refactor components to remove styled-components and replace with Tailwind CSS classes - Updated Navbar component to use Tailwind CSS for styling instead of styled-components. - Refactored ProtocolConfiguration component to utilize Tailwind CSS for layout and styling. - Modified ProtocolYamlCard to replace styled-components with Tailwind CSS classes. - Adjusted PythonEditorModal and its story to remove styled-components in favor of Tailwind CSS. - Refactored Sidebar component to eliminate styled-components and implement Tailwind CSS. - Updated TDPLink component to remove styled-components and use Tailwind CSS for styling. - Refactored CodeEditor component to replace styled-components with Tailwind CSS classes. - Removed unused styled-components from input-group and sidebar components. - Updated yarn.lock to reflect changes in dependencies and versions. updated yarn lock Refactor theme handling by replacing next-themes with a custom useTheme hook and update related components Remove unused SCSS files and associated imports from chart components and UI elements Remove unused SCSS import from ChromatogramChart component Refactor theme handling by introducing useIsDark hook and replacing useTheme with useCodeEditorTheme in CodeEditor and Toaster components Fix formatting in registry.json for code-editor component entry chore: add Zephyr test case IDs to stories refactor: improve folder naming and structure in Zephyr sync script test: update layer toggling tests to use data-variant attributes for button states refactor: update styles to use new color variables and remove unused SCSS files refactor: replace DialogTrigger with direct Button usage and update AssistantModal and PythonEditorModal to handle open state feat: add Inter Variable font with italic style to index.css refactor: simplify renderDialog function and update DialogFooter to use args for showCloseButton refactor: rename 'direction' to 'orientation' in Resizable stories for consistency fix: pass contentProps to ComboboxContent in renderCombobox function chore: update version to 0.5.0 in package.json --- .agents/skills/shadcn/SKILL.md | 240 + .agents/skills/shadcn/agents/openai.yml | 5 + .agents/skills/shadcn/assets/shadcn-small.png | Bin 0 -> 1049 bytes .agents/skills/shadcn/assets/shadcn.png | Bin 0 -> 3852 bytes .agents/skills/shadcn/cli.md | 255 + .agents/skills/shadcn/customization.md | 194 + .agents/skills/shadcn/evals/evals.json | 47 + .agents/skills/shadcn/mcp.md | 94 + .agents/skills/shadcn/rules/base-vs-radix.md | 306 + .agents/skills/shadcn/rules/composition.md | 195 + .agents/skills/shadcn/rules/forms.md | 192 + .agents/skills/shadcn/rules/icons.md | 101 + .agents/skills/shadcn/rules/styling.md | 162 + .storybook/font.css | 15 - .storybook/main.ts | 3 +- .storybook/manager.ts | 24 + .storybook/preview.ts | 36 +- .storybook/public/favicon.ico | Bin 0 -> 4286 bytes .storybook/theme/index.css | 58 + .storybook/theme/tetra-science.dark.theme.ts | 31 + .storybook/theme/tetra-science.light.theme.ts | 40 + .storybook/theme/tetrascience-logo.svg | 18 + .storybook/theme/tetrascience-white-logo.svg | 4 + CONTRIBUTING.md | 13 +- components.json | 25 + eslint.config.js | 7 + package.json | 29 +- public/logo.png | Bin 3361 -> 0 bytes public/vite.svg | 1 - registry.json | 331 + scripts/zephyr/sync-storybook-zephyr.ts | 44 +- skills-lock.json | 10 + src/assets/icon/Bars3BottomLeft.tsx | 34 - src/assets/icon/Building.tsx | 28 - src/assets/icon/BulkCheck.tsx | 34 - src/assets/icon/Check.tsx | 28 - src/assets/icon/CheckCircle.tsx | 28 - src/assets/icon/CheckSquare.tsx | 30 - src/assets/icon/ChevronDown.tsx | 28 - src/assets/icon/Close.tsx | 29 - src/assets/icon/Code.tsx | 28 - src/assets/icon/Computer.tsx | 28 - src/assets/icon/Copy.tsx | 30 - src/assets/icon/Cube.tsx | 26 - src/assets/icon/Database.tsx | 28 - src/assets/icon/ExclamationCircle.tsx | 28 - src/assets/icon/ExclamationTriangle.tsx | 28 - src/assets/icon/Gear.tsx | 28 - src/assets/icon/Globe.tsx | 28 - src/assets/icon/Hashtag.tsx | 26 - src/assets/icon/Home.tsx | 28 - src/assets/icon/Inbox.tsx | 29 - src/assets/icon/InformationCircle.tsx | 26 - src/assets/icon/InformationCircleMicro.tsx | 28 - src/assets/icon/Lamp.tsx | 26 - src/assets/icon/LockOpen.tsx | 26 - src/assets/icon/Minus.tsx | 26 - src/assets/icon/PaperPlane.tsx | 26 - src/assets/icon/Pencil.tsx | 26 - src/assets/icon/PieChart.tsx | 30 - src/assets/icon/Pipeline.tsx | 28 - src/assets/icon/Plus.tsx | 26 - src/assets/icon/Profile.tsx | 26 - src/assets/icon/QuestionCircle.tsx | 28 - src/assets/icon/RocketLaunch.tsx | 34 - src/assets/icon/Search.tsx | 36 - src/assets/icon/SearchDocument.tsx | 32 - src/assets/icon/SearchSQL.tsx | 32 - src/assets/icon/Sitemap.tsx | 57 - src/assets/icon/Text.tsx | 36 - src/assets/icon/Trash.tsx | 26 - src/assets/icon/ViewfinderCircle.tsx | 42 - src/colors.css | 60 - src/colors.scss | 162 - src/components/atoms/Badge/Badge.scss | 53 - src/components/atoms/Badge/Badge.stories.tsx | 188 - src/components/atoms/Badge/Badge.tsx | 99 - src/components/atoms/Badge/index.ts | 2 - src/components/atoms/Button/Button.scss | 146 - .../atoms/Button/Button.stories.tsx | 508 -- src/components/atoms/Button/Button.tsx | 172 - src/components/atoms/Button/index.ts | 2 - .../atoms/ButtonControl/ButtonControl.scss | 53 - .../ButtonControl/ButtonControl.stories.tsx | 81 - .../atoms/ButtonControl/ButtonControl.tsx | 74 - src/components/atoms/ButtonControl/index.ts | 2 - src/components/atoms/Card/Card.scss | 68 - src/components/atoms/Card/Card.stories.tsx | 293 - src/components/atoms/Card/Card.tsx | 102 - src/components/atoms/Card/index.ts | 2 - src/components/atoms/Checkbox/Checkbox.scss | 57 - .../atoms/Checkbox/Checkbox.stories.tsx | 147 - src/components/atoms/Checkbox/Checkbox.tsx | 115 - src/components/atoms/Checkbox/index.ts | 2 - .../atoms/CodeEditor/CodeEditor.scss | 48 - .../atoms/CodeEditor/CodeEditor.tsx | 208 - src/components/atoms/CodeEditor/index.ts | 2 - src/components/atoms/Dropdown/Dropdown.scss | 186 - .../atoms/Dropdown/Dropdown.stories.tsx | 217 - src/components/atoms/Dropdown/Dropdown.tsx | 425 -- src/components/atoms/Dropdown/index.ts | 2 - .../atoms/ErrorAlert/ErrorAlert.scss | 155 - .../atoms/ErrorAlert/ErrorAlert.stories.tsx | 290 - .../atoms/ErrorAlert/ErrorAlert.tsx | 328 - src/components/atoms/ErrorAlert/index.ts | 2 - src/components/atoms/Icon/Icon.stories.tsx | 97 - src/components/atoms/Icon/Icon.tsx | 237 - src/components/atoms/Icon/index.ts | 3 - src/components/atoms/Input/Input.scss | 136 - src/components/atoms/Input/Input.stories.tsx | 155 - src/components/atoms/Input/Input.tsx | 165 - src/components/atoms/Input/index.ts | 2 - src/components/atoms/Label/Label.scss | 26 - src/components/atoms/Label/Label.stories.tsx | 51 - src/components/atoms/Label/Label.tsx | 61 - src/components/atoms/Label/index.ts | 2 - .../MarkdownDisplay/MarkdownDisplay.scss | 37 - .../MarkdownDisplay.stories.tsx | 109 - .../atoms/MarkdownDisplay/MarkdownDisplay.tsx | 125 - src/components/atoms/MarkdownDisplay/index.ts | 2 - src/components/atoms/MenuItem/MenuItem.scss | 57 - .../atoms/MenuItem/MenuItem.stories.tsx | 161 - src/components/atoms/MenuItem/MenuItem.tsx | 111 - src/components/atoms/MenuItem/index.ts | 2 - src/components/atoms/Modal/Modal.scss | 186 - src/components/atoms/Modal/Modal.stories.tsx | 300 - src/components/atoms/Modal/Modal.tsx | 334 - src/components/atoms/Modal/index.ts | 2 - .../atoms/PopConfirm/PopConfirm.scss | 246 - .../atoms/PopConfirm/PopConfirm.stories.tsx | 123 - .../atoms/PopConfirm/PopConfirm.tsx | 389 -- src/components/atoms/PopConfirm/index.ts | 2 - .../atoms/SupportiveText/SupportiveText.scss | 14 - .../SupportiveText/SupportiveText.stories.tsx | 39 - .../atoms/SupportiveText/SupportiveText.tsx | 41 - src/components/atoms/SupportiveText/index.ts | 2 - src/components/atoms/TDPLink/index.ts | 2 - src/components/atoms/Tab/Tab.scss | 75 - src/components/atoms/Tab/Tab.stories.tsx | 117 - src/components/atoms/Tab/Tab.tsx | 94 - src/components/atoms/Tab/index.ts | 2 - .../atoms/TableCell/TableCell.stories.tsx | 108 - src/components/atoms/TableCell/TableCell.tsx | 55 - src/components/atoms/TableCell/index.ts | 2 - .../TableHeaderCell.stories.tsx | 216 - .../atoms/TableHeaderCell/TableHeaderCell.tsx | 151 - src/components/atoms/TableHeaderCell/index.ts | 2 - src/components/atoms/Textarea/Textarea.scss | 100 - .../atoms/Textarea/Textarea.stories.tsx | 107 - src/components/atoms/Textarea/Textarea.tsx | 124 - src/components/atoms/Textarea/index.ts | 2 - src/components/atoms/Toast/Toast.scss | 87 - src/components/atoms/Toast/Toast.stories.tsx | 88 - src/components/atoms/Toast/Toast.tsx | 140 - src/components/atoms/Toast/index.ts | 2 - src/components/atoms/Toggle/Toggle.scss | 66 - .../atoms/Toggle/Toggle.stories.tsx | 67 - src/components/atoms/Toggle/Toggle.tsx | 86 - src/components/atoms/Toggle/index.ts | 2 - src/components/atoms/Tooltip/Tooltip.scss | 109 - .../atoms/Tooltip/Tooltip.stories.tsx | 113 - src/components/atoms/Tooltip/Tooltip.tsx | 180 - src/components/atoms/Tooltip/index.ts | 2 - .../AreaGraph/AreaGraph.stories.tsx | 2 +- .../AreaGraph/AreaGraph.tsx | 33 +- .../{organisms => charts}/AreaGraph/index.ts | 0 .../BarGraph/BarGraph.stories.tsx | 2 +- .../BarGraph/BarGraph.tsx | 31 +- .../{organisms => charts}/BarGraph/index.ts | 0 .../Boxplot/Boxplot.stories.tsx | 2 +- .../{organisms => charts}/Boxplot/Boxplot.tsx | 33 +- .../{organisms => charts}/Boxplot/index.ts | 0 .../Chromatogram/Chromatogram.scss | 10 +- .../Chromatogram/Chromatogram.stories.tsx | 8 +- .../Chromatogram/Chromatogram.tsx | 11 +- .../Chromatogram/index.ts | 0 .../ChromatogramChart.stories.tsx | 2 +- .../ChromatogramChart/ChromatogramChart.tsx | 37 +- .../ChromatogramChart/annotations.ts | 0 .../ChromatogramChart/boundaryMarkers.ts | 0 .../ChromatogramChart/constants.ts | 0 .../ChromatogramChart/dataProcessing.ts | 0 .../ChromatogramChart/index.ts | 0 .../ChromatogramChart/peakDetection.ts | 0 .../ChromatogramChart/types.ts | 0 .../DotPlot/DotPlot.stories.tsx | 2 +- .../{organisms => charts}/DotPlot/DotPlot.tsx | 36 +- .../{organisms => charts}/DotPlot/index.ts | 0 .../Heatmap/Heatmap.stories.tsx | 2 +- .../{organisms => charts}/Heatmap/Heatmap.tsx | 0 .../{organisms => charts}/Heatmap/index.ts | 0 .../Histogram/Histogram.scss | 15 +- .../Histogram/Histogram.stories.tsx | 2 +- .../Histogram/Histogram.tsx | 29 +- .../{organisms => charts}/Histogram/index.ts | 0 .../InteractiveScatter.stories.tsx | 5 +- .../InteractiveScatter/InteractiveScatter.tsx | 1 - .../__tests__/utils.test.ts | 0 .../InteractiveScatter/constants.ts | 0 .../InteractiveScatter/index.ts | 0 .../InteractiveScatter/types.ts | 0 .../InteractiveScatter/utils.ts | 0 .../LineGraph/LineGraph.stories.tsx | 2 +- .../LineGraph/LineGraph.tsx | 30 +- .../{organisms => charts}/LineGraph/index.ts | 0 .../PieChart/PieChart.stories.tsx | 2 +- .../PieChart/PieChart.tsx | 11 +- .../{organisms => charts}/PieChart/index.ts | 0 .../PlateMap/PlateMap.scss | 27 - .../PlateMap/PlateMap.stories.tsx | 28 +- .../PlateMap/PlateMap.tsx | 27 +- .../PlateMap/constants.ts | 0 .../{organisms => charts}/PlateMap/index.ts | 0 .../{organisms => charts}/PlateMap/types.ts | 0 .../{organisms => charts}/PlateMap/utils.ts | 0 .../ScatterGraph/ScatterGraph.stories.tsx | 2 +- .../ScatterGraph/ScatterGraph.tsx | 34 +- .../ScatterGraph/index.ts | 0 .../AppHeader/AppHeader.stories.tsx | 2 +- .../composed/AppHeader/AppHeader.tsx | 63 + .../AppHeader/index.ts | 0 .../AppLayout/AppLayout.scss | 6 - .../AppLayout/AppLayout.stories.tsx | 4 +- .../AppLayout/AppLayout.tsx | 45 +- .../AppLayout/index.ts | 0 .../AssistantModal/AssistantModal.stories.tsx | 14 +- .../AssistantModal/AssistantModal.tsx | 98 + .../AssistantModal/index.ts | 0 .../CodeScriptEditorButton.stories.tsx | 5 +- .../CodeScriptEditorButton.tsx | 91 +- .../CodeScriptEditorButton/index.ts | 0 .../LaunchContent/LaunchContent.stories.tsx | 2 +- .../composed/LaunchContent/LaunchContent.tsx | 113 + .../LaunchContent/index.ts | 0 .../composed/Main/LaunchContentPanel.tsx | 94 + .../Main/Main.stories.tsx | 2 +- src/components/composed/Main/Main.tsx | 392 ++ src/components/composed/Main/MainHeader.tsx | 62 + src/components/composed/Main/MainNavbar.tsx | 44 + src/components/composed/Main/MainSidebar.tsx | 29 + src/components/composed/Main/MainTabBar.tsx | 26 + .../Main/ProtocolConfigurationPanel.tsx | 38 + .../composed/Main/TemplateSidebarCard.tsx | 92 + .../{organisms => composed}/Main/index.ts | 0 .../Navbar/Navbar.stories.tsx | 2 +- src/components/composed/Navbar/Navbar.tsx | 72 + .../{molecules => composed}/Navbar/index.ts | 0 .../ProtocolConfiguration.stories.tsx | 4 +- .../ProtocolConfiguration.tsx | 55 + .../ProtocolConfiguration/index.ts | 0 .../ProtocolYamlCard.stories.tsx | 6 +- .../ProtocolYamlCard/ProtocolYamlCard.tsx | 73 + .../ProtocolYamlCard/index.ts | 0 .../PythonEditorModal.stories.tsx | 50 +- .../PythonEditorModal/PythonEditorModal.tsx | 69 + .../PythonEditorModal/index.ts | 0 .../Sidebar/Sidebar.stories.tsx | 50 +- src/components/composed/Sidebar/Sidebar.tsx | 75 + src/components/composed/Sidebar/index.ts | 2 + .../TdpSearch/TdpSearch.mocks.ts | 0 .../TdpSearch/TdpSearch.scss | 21 +- .../TdpSearch/TdpSearch.tsx | 11 +- .../TdpSearch/TdpSearchServer.stories.tsx | 39 +- .../TdpSearch/TdpSearchStandalone.stories.tsx | 2 +- .../TdpSearch/components/DefaultFilters.tsx | 59 + .../TdpSearch/components/DefaultResults.tsx | 154 + .../TdpSearch/components/DefaultSearchBar.tsx | 44 + .../TdpSearch/constants.ts | 0 .../TdpSearch/hooks/useSearch.ts | 0 .../TdpSearch/hooks/useTdpCredentials.ts | 0 .../TdpSearch/index.ts | 0 .../TdpSearch/types.ts | 3 +- .../TdpSearch/utils.ts | 0 .../tdp-link.stories.tsx} | 4 +- .../TDPLink.tsx => composed/tdp-link.tsx} | 28 +- .../tdp-url.test.ts} | 2 +- .../TDPLink/tdpUrl.ts => composed/tdp-url.ts} | 0 .../molecules/AppHeader/AppHeader.scss | 84 - .../molecules/AppHeader/AppHeader.tsx | 162 - .../AssistantModal/AssistantModal.scss | 76 - .../AssistantModal/AssistantModal.tsx | 228 - .../ButtonControlGroup.scss | 49 - .../ButtonControlGroup.stories.tsx | 132 - .../ButtonControlGroup/ButtonControlGroup.tsx | 88 - .../molecules/ButtonControlGroup/index.ts | 2 - .../molecules/CardSidebar/CardSidebar.scss | 91 - .../CardSidebar/CardSidebar.stories.tsx | 241 - .../molecules/CardSidebar/CardSidebar.tsx | 201 - src/components/molecules/CardSidebar/index.ts | 2 - .../CodeScriptEditorButton.scss | 22 - .../molecules/FormField/FormField.scss | 14 - .../molecules/FormField/FormField.stories.tsx | 190 - .../molecules/FormField/FormField.tsx | 51 - src/components/molecules/FormField/index.ts | 2 - .../LaunchContent/LaunchContent.scss | 50 - .../molecules/LaunchContent/LaunchContent.tsx | 206 - src/components/molecules/Menu/Menu.scss | 30 - .../molecules/Menu/Menu.stories.tsx | 160 - src/components/molecules/Menu/Menu.tsx | 87 - src/components/molecules/Menu/index.ts | 2 - src/components/molecules/Navbar/Navbar.scss | 92 - src/components/molecules/Navbar/Navbar.tsx | 164 - .../ProtocolConfiguration.scss | 72 - .../ProtocolConfiguration.tsx | 130 - .../ProtocolYamlCard/ProtocolYamlCard.scss | 52 - .../ProtocolYamlCard/ProtocolYamlCard.tsx | 121 - .../PythonEditorModal/PythonEditorModal.scss | 8 - .../PythonEditorModal/PythonEditorModal.tsx | 57 - .../molecules/SelectField/SelectField.scss | 14 - .../SelectField/SelectField.stories.tsx | 151 - .../molecules/SelectField/SelectField.tsx | 51 - src/components/molecules/SelectField/index.ts | 2 - src/components/molecules/Sidebar/Sidebar.scss | 50 - src/components/molecules/Sidebar/Sidebar.tsx | 108 - src/components/molecules/Sidebar/index.ts | 2 - .../molecules/TabGroup/TabGroup.scss | 15 - .../molecules/TabGroup/TabGroup.stories.tsx | 138 - .../molecules/TabGroup/TabGroup.tsx | 67 - src/components/molecules/TabGroup/index.ts | 2 - .../molecules/Table/Table.stories.tsx | 392 -- src/components/molecules/Table/Table.tsx | 476 -- src/components/molecules/Table/index.ts | 2 - .../molecules/ToastManager/ToastManager.scss | 53 - .../ToastManager/ToastManager.stories.scss | 53 - .../ToastManager/ToastManager.stories.tsx | 127 - .../molecules/ToastManager/ToastManager.tsx | 217 - .../molecules/ToastManager/index.ts | 2 - .../organisms/AreaGraph/AreaGraph.scss | 9 - .../organisms/BarGraph/BarGraph.scss | 7 - src/components/organisms/Boxplot/Boxplot.scss | 8 - .../ChromatogramChart/ChromatogramChart.scss | 8 - src/components/organisms/DotPlot/DotPlot.scss | 6 - src/components/organisms/Heatmap/Heatmap.scss | 9 - .../InteractiveScatter.scss | 6 - .../organisms/LineGraph/LineGraph.scss | 7 - src/components/organisms/Main/Main.scss | 136 - src/components/organisms/Main/Main.tsx | 516 -- .../organisms/PieChart/PieChart.scss | 78 - .../organisms/ScatterGraph/ScatterGraph.scss | 8 - .../organisms/TaskScripts/TaskScriptList.tsx | 203 - .../TaskScripts/TaskScriptReadme.tsx | 29 - src/components/organisms/TaskScripts/index.ts | 2 - .../TdpSearch/components/DefaultFilters.tsx | 19 - .../TdpSearch/components/DefaultResults.tsx | 36 - .../TdpSearch/components/DefaultSearchBar.tsx | 38 - src/components/ui/accordion.stories.tsx | 61 + src/components/ui/accordion.tsx | 80 + src/components/ui/alert-dialog.stories.tsx | 72 + src/components/ui/alert-dialog.tsx | 197 + src/components/ui/alert.stories.tsx | 70 + src/components/ui/alert.tsx | 76 + src/components/ui/aspect-ratio.stories.tsx | 54 + src/components/ui/aspect-ratio.tsx | 11 + src/components/ui/avatar.stories.tsx | 91 + src/components/ui/avatar.tsx | 110 + src/components/ui/badge.stories.tsx | 84 + src/components/ui/badge.tsx | 49 + src/components/ui/breadcrumb.stories.tsx | 75 + src/components/ui/breadcrumb.tsx | 123 + src/components/ui/button-group.stories.tsx | 67 + src/components/ui/button-group.tsx | 83 + src/components/ui/button.stories.tsx | 89 + src/components/ui/button.tsx | 67 + src/components/ui/calendar.stories.tsx | 77 + src/components/ui/calendar.tsx | 220 + src/components/ui/card.stories.tsx | 67 + src/components/ui/card.tsx | 103 + src/components/ui/carousel.stories.tsx | 71 + src/components/ui/carousel.tsx | 242 + src/components/ui/checkbox.stories.tsx | 48 + src/components/ui/checkbox.tsx | 32 + .../code-editor.stories.tsx} | 24 +- src/components/ui/code-editor.tsx | 159 + src/components/ui/collapsible.stories.tsx | 55 + src/components/ui/collapsible.tsx | 33 + src/components/ui/combobox.stories.tsx | 99 + src/components/ui/combobox.tsx | 300 + src/components/ui/command.stories.tsx | 105 + src/components/ui/command.tsx | 196 + src/components/ui/context-menu.stories.tsx | 80 + src/components/ui/context-menu.tsx | 262 + src/components/ui/dialog.stories.tsx | 79 + src/components/ui/dialog.tsx | 163 + src/components/ui/drawer.stories.tsx | 97 + src/components/ui/drawer.tsx | 131 + src/components/ui/dropdown-menu.stories.tsx | 65 + src/components/ui/dropdown-menu.tsx | 268 + src/components/ui/field.stories.tsx | 114 + src/components/ui/field.tsx | 236 + src/components/ui/hover-card.stories.tsx | 83 + src/components/ui/hover-card.tsx | 42 + src/components/ui/input-group.stories.tsx | 116 + src/components/ui/input-group.tsx | 160 + src/components/ui/input-otp.stories.tsx | 58 + src/components/ui/input-otp.tsx | 88 + src/components/ui/input.stories.tsx | 53 + src/components/ui/input.tsx | 19 + src/components/ui/item.stories.tsx | 135 + src/components/ui/item.tsx | 196 + src/components/ui/kbd.stories.tsx | 39 + src/components/ui/kbd.tsx | 26 + src/components/ui/label.stories.tsx | 42 + src/components/ui/label.tsx | 24 + src/components/ui/menubar.stories.tsx | 88 + src/components/ui/menubar.tsx | 279 + src/components/ui/navigation-menu.stories.tsx | 100 + src/components/ui/navigation-menu.tsx | 165 + src/components/ui/radio-group.stories.tsx | 70 + src/components/ui/radio-group.tsx | 44 + src/components/ui/resizable.stories.tsx | 69 + src/components/ui/resizable.tsx | 48 + src/components/ui/scroll-area.stories.tsx | 79 + src/components/ui/scroll-area.tsx | 55 + src/components/ui/select.stories.tsx | 64 + src/components/ui/select.tsx | 193 + src/components/ui/separator.stories.tsx | 52 + src/components/ui/separator.tsx | 26 + src/components/ui/sheet.stories.tsx | 97 + src/components/ui/sheet.tsx | 144 + src/components/ui/sidebar.stories.tsx | 230 + src/components/ui/sidebar.tsx | 704 ++ src/components/ui/skeleton.stories.tsx | 39 + src/components/ui/skeleton.tsx | 13 + src/components/ui/slider.stories.tsx | 68 + src/components/ui/slider.tsx | 57 + src/components/ui/sonner.stories.tsx | 81 + src/components/ui/sonner.tsx | 50 + src/components/ui/spinner.stories.tsx | 31 + src/components/ui/spinner.tsx | 11 + src/components/ui/switch.stories.tsx | 60 + src/components/ui/switch.tsx | 33 + src/components/ui/table.stories.tsx | 81 + src/components/ui/table.tsx | 114 + src/components/ui/tabs.stories.tsx | 70 + src/components/ui/tabs.tsx | 90 + .../ui/tetrascience-icon.tsx} | 35 +- src/components/ui/textarea.stories.tsx | 43 + src/components/ui/textarea.tsx | 18 + src/components/ui/toggle-group.stories.tsx | 114 + src/components/ui/toggle-group.tsx | 87 + src/components/ui/toggle.stories.tsx | 78 + src/components/ui/toggle.tsx | 44 + src/components/ui/tooltip.stories.tsx | 84 + src/components/ui/tooltip.tsx | 57 + src/hooks/use-code-editor-theme.ts | 66 + src/hooks/use-is-dark.ts | 40 + src/hooks/use-mobile.ts | 19 + src/hooks/use-plotly-theme.ts | 74 + src/index.css | 359 +- src/index.scss | 174 - src/index.ts | 259 +- src/lib/utils.ts | 6 + src/styles/README.md | 56 - src/styles/index.scss | 52 - src/styles/variables.scss | 126 - src/theme/ThemeProvider.tsx | 101 - src/theme/index.ts | 4 - src/theme/types.ts | 55 - src/vite-env.d.ts | 1 - tsconfig.json | 10 +- vite.config.ts | 43 +- yarn.lock | 6180 +++++++++++++---- 462 files changed, 19565 insertions(+), 19415 deletions(-) create mode 100644 .agents/skills/shadcn/SKILL.md create mode 100644 .agents/skills/shadcn/agents/openai.yml create mode 100644 .agents/skills/shadcn/assets/shadcn-small.png create mode 100644 .agents/skills/shadcn/assets/shadcn.png create mode 100644 .agents/skills/shadcn/cli.md create mode 100644 .agents/skills/shadcn/customization.md create mode 100644 .agents/skills/shadcn/evals/evals.json create mode 100644 .agents/skills/shadcn/mcp.md create mode 100644 .agents/skills/shadcn/rules/base-vs-radix.md create mode 100644 .agents/skills/shadcn/rules/composition.md create mode 100644 .agents/skills/shadcn/rules/forms.md create mode 100644 .agents/skills/shadcn/rules/icons.md create mode 100644 .agents/skills/shadcn/rules/styling.md delete mode 100644 .storybook/font.css create mode 100644 .storybook/manager.ts create mode 100644 .storybook/public/favicon.ico create mode 100644 .storybook/theme/index.css create mode 100644 .storybook/theme/tetra-science.dark.theme.ts create mode 100644 .storybook/theme/tetra-science.light.theme.ts create mode 100644 .storybook/theme/tetrascience-logo.svg create mode 100644 .storybook/theme/tetrascience-white-logo.svg create mode 100644 components.json delete mode 100644 public/logo.png delete mode 100644 public/vite.svg create mode 100644 registry.json create mode 100644 skills-lock.json delete mode 100644 src/assets/icon/Bars3BottomLeft.tsx delete mode 100644 src/assets/icon/Building.tsx delete mode 100644 src/assets/icon/BulkCheck.tsx delete mode 100644 src/assets/icon/Check.tsx delete mode 100644 src/assets/icon/CheckCircle.tsx delete mode 100644 src/assets/icon/CheckSquare.tsx delete mode 100644 src/assets/icon/ChevronDown.tsx delete mode 100644 src/assets/icon/Close.tsx delete mode 100644 src/assets/icon/Code.tsx delete mode 100644 src/assets/icon/Computer.tsx delete mode 100644 src/assets/icon/Copy.tsx delete mode 100644 src/assets/icon/Cube.tsx delete mode 100644 src/assets/icon/Database.tsx delete mode 100644 src/assets/icon/ExclamationCircle.tsx delete mode 100644 src/assets/icon/ExclamationTriangle.tsx delete mode 100644 src/assets/icon/Gear.tsx delete mode 100644 src/assets/icon/Globe.tsx delete mode 100644 src/assets/icon/Hashtag.tsx delete mode 100644 src/assets/icon/Home.tsx delete mode 100644 src/assets/icon/Inbox.tsx delete mode 100644 src/assets/icon/InformationCircle.tsx delete mode 100644 src/assets/icon/InformationCircleMicro.tsx delete mode 100644 src/assets/icon/Lamp.tsx delete mode 100644 src/assets/icon/LockOpen.tsx delete mode 100644 src/assets/icon/Minus.tsx delete mode 100644 src/assets/icon/PaperPlane.tsx delete mode 100644 src/assets/icon/Pencil.tsx delete mode 100644 src/assets/icon/PieChart.tsx delete mode 100644 src/assets/icon/Pipeline.tsx delete mode 100644 src/assets/icon/Plus.tsx delete mode 100644 src/assets/icon/Profile.tsx delete mode 100644 src/assets/icon/QuestionCircle.tsx delete mode 100644 src/assets/icon/RocketLaunch.tsx delete mode 100644 src/assets/icon/Search.tsx delete mode 100644 src/assets/icon/SearchDocument.tsx delete mode 100644 src/assets/icon/SearchSQL.tsx delete mode 100644 src/assets/icon/Sitemap.tsx delete mode 100644 src/assets/icon/Text.tsx delete mode 100644 src/assets/icon/Trash.tsx delete mode 100644 src/assets/icon/ViewfinderCircle.tsx delete mode 100644 src/colors.css delete mode 100644 src/colors.scss delete mode 100644 src/components/atoms/Badge/Badge.scss delete mode 100644 src/components/atoms/Badge/Badge.stories.tsx delete mode 100644 src/components/atoms/Badge/Badge.tsx delete mode 100644 src/components/atoms/Badge/index.ts delete mode 100644 src/components/atoms/Button/Button.scss delete mode 100644 src/components/atoms/Button/Button.stories.tsx delete mode 100644 src/components/atoms/Button/Button.tsx delete mode 100644 src/components/atoms/Button/index.ts delete mode 100644 src/components/atoms/ButtonControl/ButtonControl.scss delete mode 100644 src/components/atoms/ButtonControl/ButtonControl.stories.tsx delete mode 100644 src/components/atoms/ButtonControl/ButtonControl.tsx delete mode 100644 src/components/atoms/ButtonControl/index.ts delete mode 100644 src/components/atoms/Card/Card.scss delete mode 100644 src/components/atoms/Card/Card.stories.tsx delete mode 100644 src/components/atoms/Card/Card.tsx delete mode 100644 src/components/atoms/Card/index.ts delete mode 100644 src/components/atoms/Checkbox/Checkbox.scss delete mode 100644 src/components/atoms/Checkbox/Checkbox.stories.tsx delete mode 100644 src/components/atoms/Checkbox/Checkbox.tsx delete mode 100644 src/components/atoms/Checkbox/index.ts delete mode 100644 src/components/atoms/CodeEditor/CodeEditor.scss delete mode 100644 src/components/atoms/CodeEditor/CodeEditor.tsx delete mode 100644 src/components/atoms/CodeEditor/index.ts delete mode 100644 src/components/atoms/Dropdown/Dropdown.scss delete mode 100644 src/components/atoms/Dropdown/Dropdown.stories.tsx delete mode 100644 src/components/atoms/Dropdown/Dropdown.tsx delete mode 100644 src/components/atoms/Dropdown/index.ts delete mode 100644 src/components/atoms/ErrorAlert/ErrorAlert.scss delete mode 100644 src/components/atoms/ErrorAlert/ErrorAlert.stories.tsx delete mode 100644 src/components/atoms/ErrorAlert/ErrorAlert.tsx delete mode 100644 src/components/atoms/ErrorAlert/index.ts delete mode 100644 src/components/atoms/Icon/Icon.stories.tsx delete mode 100644 src/components/atoms/Icon/Icon.tsx delete mode 100644 src/components/atoms/Icon/index.ts delete mode 100644 src/components/atoms/Input/Input.scss delete mode 100644 src/components/atoms/Input/Input.stories.tsx delete mode 100644 src/components/atoms/Input/Input.tsx delete mode 100644 src/components/atoms/Input/index.ts delete mode 100644 src/components/atoms/Label/Label.scss delete mode 100644 src/components/atoms/Label/Label.stories.tsx delete mode 100644 src/components/atoms/Label/Label.tsx delete mode 100644 src/components/atoms/Label/index.ts delete mode 100644 src/components/atoms/MarkdownDisplay/MarkdownDisplay.scss delete mode 100644 src/components/atoms/MarkdownDisplay/MarkdownDisplay.stories.tsx delete mode 100644 src/components/atoms/MarkdownDisplay/MarkdownDisplay.tsx delete mode 100644 src/components/atoms/MarkdownDisplay/index.ts delete mode 100644 src/components/atoms/MenuItem/MenuItem.scss delete mode 100644 src/components/atoms/MenuItem/MenuItem.stories.tsx delete mode 100644 src/components/atoms/MenuItem/MenuItem.tsx delete mode 100644 src/components/atoms/MenuItem/index.ts delete mode 100644 src/components/atoms/Modal/Modal.scss delete mode 100644 src/components/atoms/Modal/Modal.stories.tsx delete mode 100644 src/components/atoms/Modal/Modal.tsx delete mode 100644 src/components/atoms/Modal/index.ts delete mode 100644 src/components/atoms/PopConfirm/PopConfirm.scss delete mode 100644 src/components/atoms/PopConfirm/PopConfirm.stories.tsx delete mode 100644 src/components/atoms/PopConfirm/PopConfirm.tsx delete mode 100644 src/components/atoms/PopConfirm/index.ts delete mode 100644 src/components/atoms/SupportiveText/SupportiveText.scss delete mode 100644 src/components/atoms/SupportiveText/SupportiveText.stories.tsx delete mode 100644 src/components/atoms/SupportiveText/SupportiveText.tsx delete mode 100644 src/components/atoms/SupportiveText/index.ts delete mode 100644 src/components/atoms/TDPLink/index.ts delete mode 100644 src/components/atoms/Tab/Tab.scss delete mode 100644 src/components/atoms/Tab/Tab.stories.tsx delete mode 100644 src/components/atoms/Tab/Tab.tsx delete mode 100644 src/components/atoms/Tab/index.ts delete mode 100644 src/components/atoms/TableCell/TableCell.stories.tsx delete mode 100644 src/components/atoms/TableCell/TableCell.tsx delete mode 100644 src/components/atoms/TableCell/index.ts delete mode 100644 src/components/atoms/TableHeaderCell/TableHeaderCell.stories.tsx delete mode 100644 src/components/atoms/TableHeaderCell/TableHeaderCell.tsx delete mode 100644 src/components/atoms/TableHeaderCell/index.ts delete mode 100644 src/components/atoms/Textarea/Textarea.scss delete mode 100644 src/components/atoms/Textarea/Textarea.stories.tsx delete mode 100644 src/components/atoms/Textarea/Textarea.tsx delete mode 100644 src/components/atoms/Textarea/index.ts delete mode 100644 src/components/atoms/Toast/Toast.scss delete mode 100644 src/components/atoms/Toast/Toast.stories.tsx delete mode 100644 src/components/atoms/Toast/Toast.tsx delete mode 100644 src/components/atoms/Toast/index.ts delete mode 100644 src/components/atoms/Toggle/Toggle.scss delete mode 100644 src/components/atoms/Toggle/Toggle.stories.tsx delete mode 100644 src/components/atoms/Toggle/Toggle.tsx delete mode 100644 src/components/atoms/Toggle/index.ts delete mode 100644 src/components/atoms/Tooltip/Tooltip.scss delete mode 100644 src/components/atoms/Tooltip/Tooltip.stories.tsx delete mode 100644 src/components/atoms/Tooltip/Tooltip.tsx delete mode 100644 src/components/atoms/Tooltip/index.ts rename src/components/{organisms => charts}/AreaGraph/AreaGraph.stories.tsx (98%) rename src/components/{organisms => charts}/AreaGraph/AreaGraph.tsx (92%) rename src/components/{organisms => charts}/AreaGraph/index.ts (100%) rename src/components/{organisms => charts}/BarGraph/BarGraph.stories.tsx (98%) rename src/components/{organisms => charts}/BarGraph/BarGraph.tsx (90%) rename src/components/{organisms => charts}/BarGraph/index.ts (100%) rename src/components/{organisms => charts}/Boxplot/Boxplot.stories.tsx (99%) rename src/components/{organisms => charts}/Boxplot/Boxplot.tsx (89%) rename src/components/{organisms => charts}/Boxplot/index.ts (100%) rename src/components/{organisms => charts}/Chromatogram/Chromatogram.scss (74%) rename src/components/{organisms => charts}/Chromatogram/Chromatogram.stories.tsx (96%) rename src/components/{organisms => charts}/Chromatogram/Chromatogram.tsx (96%) rename src/components/{organisms => charts}/Chromatogram/index.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/ChromatogramChart.stories.tsx (99%) rename src/components/{organisms => charts}/ChromatogramChart/ChromatogramChart.tsx (89%) rename src/components/{organisms => charts}/ChromatogramChart/annotations.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/boundaryMarkers.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/constants.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/dataProcessing.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/index.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/peakDetection.ts (100%) rename src/components/{organisms => charts}/ChromatogramChart/types.ts (100%) rename src/components/{organisms => charts}/DotPlot/DotPlot.stories.tsx (99%) rename src/components/{organisms => charts}/DotPlot/DotPlot.tsx (89%) rename src/components/{organisms => charts}/DotPlot/index.ts (100%) rename src/components/{organisms => charts}/Heatmap/Heatmap.stories.tsx (99%) rename src/components/{organisms => charts}/Heatmap/Heatmap.tsx (100%) rename src/components/{organisms => charts}/Heatmap/index.ts (100%) rename src/components/{organisms => charts}/Histogram/Histogram.scss (69%) rename src/components/{organisms => charts}/Histogram/Histogram.stories.tsx (99%) rename src/components/{organisms => charts}/Histogram/Histogram.tsx (93%) rename src/components/{organisms => charts}/Histogram/index.ts (100%) rename src/components/{organisms => charts}/InteractiveScatter/InteractiveScatter.stories.tsx (99%) rename src/components/{organisms => charts}/InteractiveScatter/InteractiveScatter.tsx (99%) rename src/components/{organisms => charts}/InteractiveScatter/__tests__/utils.test.ts (100%) rename src/components/{organisms => charts}/InteractiveScatter/constants.ts (100%) rename src/components/{organisms => charts}/InteractiveScatter/index.ts (100%) rename src/components/{organisms => charts}/InteractiveScatter/types.ts (100%) rename src/components/{organisms => charts}/InteractiveScatter/utils.ts (100%) rename src/components/{organisms => charts}/LineGraph/LineGraph.stories.tsx (99%) rename src/components/{organisms => charts}/LineGraph/LineGraph.tsx (94%) rename src/components/{organisms => charts}/LineGraph/index.ts (100%) rename src/components/{organisms => charts}/PieChart/PieChart.stories.tsx (99%) rename src/components/{organisms => charts}/PieChart/PieChart.tsx (92%) rename src/components/{organisms => charts}/PieChart/index.ts (100%) rename src/components/{organisms => charts}/PlateMap/PlateMap.scss (71%) rename src/components/{organisms => charts}/PlateMap/PlateMap.stories.tsx (97%) rename src/components/{organisms => charts}/PlateMap/PlateMap.tsx (97%) rename src/components/{organisms => charts}/PlateMap/constants.ts (100%) rename src/components/{organisms => charts}/PlateMap/index.ts (100%) rename src/components/{organisms => charts}/PlateMap/types.ts (100%) rename src/components/{organisms => charts}/PlateMap/utils.ts (100%) rename src/components/{organisms => charts}/ScatterGraph/ScatterGraph.stories.tsx (98%) rename src/components/{organisms => charts}/ScatterGraph/ScatterGraph.tsx (90%) rename src/components/{organisms => charts}/ScatterGraph/index.ts (100%) rename src/components/{molecules => composed}/AppHeader/AppHeader.stories.tsx (98%) create mode 100644 src/components/composed/AppHeader/AppHeader.tsx rename src/components/{molecules => composed}/AppHeader/index.ts (100%) rename src/components/{organisms => composed}/AppLayout/AppLayout.scss (77%) rename src/components/{organisms => composed}/AppLayout/AppLayout.stories.tsx (96%) rename src/components/{organisms => composed}/AppLayout/AppLayout.tsx (65%) rename src/components/{organisms => composed}/AppLayout/index.ts (100%) rename src/components/{molecules => composed}/AssistantModal/AssistantModal.stories.tsx (87%) create mode 100644 src/components/composed/AssistantModal/AssistantModal.tsx rename src/components/{molecules => composed}/AssistantModal/index.ts (100%) rename src/components/{molecules => composed}/CodeScriptEditorButton/CodeScriptEditorButton.stories.tsx (98%) rename src/components/{molecules => composed}/CodeScriptEditorButton/CodeScriptEditorButton.tsx (55%) rename src/components/{molecules => composed}/CodeScriptEditorButton/index.ts (100%) rename src/components/{molecules => composed}/LaunchContent/LaunchContent.stories.tsx (98%) create mode 100644 src/components/composed/LaunchContent/LaunchContent.tsx rename src/components/{molecules => composed}/LaunchContent/index.ts (100%) create mode 100644 src/components/composed/Main/LaunchContentPanel.tsx rename src/components/{organisms => composed}/Main/Main.stories.tsx (96%) create mode 100644 src/components/composed/Main/Main.tsx create mode 100644 src/components/composed/Main/MainHeader.tsx create mode 100644 src/components/composed/Main/MainNavbar.tsx create mode 100644 src/components/composed/Main/MainSidebar.tsx create mode 100644 src/components/composed/Main/MainTabBar.tsx create mode 100644 src/components/composed/Main/ProtocolConfigurationPanel.tsx create mode 100644 src/components/composed/Main/TemplateSidebarCard.tsx rename src/components/{organisms => composed}/Main/index.ts (100%) rename src/components/{molecules => composed}/Navbar/Navbar.stories.tsx (95%) create mode 100644 src/components/composed/Navbar/Navbar.tsx rename src/components/{molecules => composed}/Navbar/index.ts (100%) rename src/components/{molecules => composed}/ProtocolConfiguration/ProtocolConfiguration.stories.tsx (95%) create mode 100644 src/components/composed/ProtocolConfiguration/ProtocolConfiguration.tsx rename src/components/{molecules => composed}/ProtocolConfiguration/index.ts (100%) rename src/components/{molecules => composed}/ProtocolYamlCard/ProtocolYamlCard.stories.tsx (88%) create mode 100644 src/components/composed/ProtocolYamlCard/ProtocolYamlCard.tsx rename src/components/{molecules => composed}/ProtocolYamlCard/index.ts (100%) rename src/components/{molecules => composed}/PythonEditorModal/PythonEditorModal.stories.tsx (63%) create mode 100644 src/components/composed/PythonEditorModal/PythonEditorModal.tsx rename src/components/{molecules => composed}/PythonEditorModal/index.ts (100%) rename src/components/{molecules => composed}/Sidebar/Sidebar.stories.tsx (64%) create mode 100644 src/components/composed/Sidebar/Sidebar.tsx create mode 100644 src/components/composed/Sidebar/index.ts rename src/components/{organisms => composed}/TdpSearch/TdpSearch.mocks.ts (100%) rename src/components/{organisms => composed}/TdpSearch/TdpSearch.scss (74%) rename src/components/{organisms => composed}/TdpSearch/TdpSearch.tsx (94%) rename src/components/{organisms => composed}/TdpSearch/TdpSearchServer.stories.tsx (89%) rename src/components/{organisms => composed}/TdpSearch/TdpSearchStandalone.stories.tsx (97%) create mode 100644 src/components/composed/TdpSearch/components/DefaultFilters.tsx create mode 100644 src/components/composed/TdpSearch/components/DefaultResults.tsx create mode 100644 src/components/composed/TdpSearch/components/DefaultSearchBar.tsx rename src/components/{organisms => composed}/TdpSearch/constants.ts (100%) rename src/components/{organisms => composed}/TdpSearch/hooks/useSearch.ts (100%) rename src/components/{organisms => composed}/TdpSearch/hooks/useTdpCredentials.ts (100%) rename src/components/{organisms => composed}/TdpSearch/index.ts (100%) rename src/components/{organisms => composed}/TdpSearch/types.ts (98%) rename src/components/{organisms => composed}/TdpSearch/utils.ts (100%) rename src/components/{atoms/TDPLink/TDPLink.stories.tsx => composed/tdp-link.stories.tsx} (98%) rename src/components/{atoms/TDPLink/TDPLink.tsx => composed/tdp-link.tsx} (93%) rename src/components/{atoms/TDPLink/__tests__/tdpUrl.test.ts => composed/tdp-url.test.ts} (99%) rename src/components/{atoms/TDPLink/tdpUrl.ts => composed/tdp-url.ts} (100%) delete mode 100644 src/components/molecules/AppHeader/AppHeader.scss delete mode 100644 src/components/molecules/AppHeader/AppHeader.tsx delete mode 100644 src/components/molecules/AssistantModal/AssistantModal.scss delete mode 100644 src/components/molecules/AssistantModal/AssistantModal.tsx delete mode 100644 src/components/molecules/ButtonControlGroup/ButtonControlGroup.scss delete mode 100644 src/components/molecules/ButtonControlGroup/ButtonControlGroup.stories.tsx delete mode 100644 src/components/molecules/ButtonControlGroup/ButtonControlGroup.tsx delete mode 100644 src/components/molecules/ButtonControlGroup/index.ts delete mode 100644 src/components/molecules/CardSidebar/CardSidebar.scss delete mode 100644 src/components/molecules/CardSidebar/CardSidebar.stories.tsx delete mode 100644 src/components/molecules/CardSidebar/CardSidebar.tsx delete mode 100644 src/components/molecules/CardSidebar/index.ts delete mode 100644 src/components/molecules/CodeScriptEditorButton/CodeScriptEditorButton.scss delete mode 100644 src/components/molecules/FormField/FormField.scss delete mode 100644 src/components/molecules/FormField/FormField.stories.tsx delete mode 100644 src/components/molecules/FormField/FormField.tsx delete mode 100644 src/components/molecules/FormField/index.ts delete mode 100644 src/components/molecules/LaunchContent/LaunchContent.scss delete mode 100644 src/components/molecules/LaunchContent/LaunchContent.tsx delete mode 100644 src/components/molecules/Menu/Menu.scss delete mode 100644 src/components/molecules/Menu/Menu.stories.tsx delete mode 100644 src/components/molecules/Menu/Menu.tsx delete mode 100644 src/components/molecules/Menu/index.ts delete mode 100644 src/components/molecules/Navbar/Navbar.scss delete mode 100644 src/components/molecules/Navbar/Navbar.tsx delete mode 100644 src/components/molecules/ProtocolConfiguration/ProtocolConfiguration.scss delete mode 100644 src/components/molecules/ProtocolConfiguration/ProtocolConfiguration.tsx delete mode 100644 src/components/molecules/ProtocolYamlCard/ProtocolYamlCard.scss delete mode 100644 src/components/molecules/ProtocolYamlCard/ProtocolYamlCard.tsx delete mode 100644 src/components/molecules/PythonEditorModal/PythonEditorModal.scss delete mode 100644 src/components/molecules/PythonEditorModal/PythonEditorModal.tsx delete mode 100644 src/components/molecules/SelectField/SelectField.scss delete mode 100644 src/components/molecules/SelectField/SelectField.stories.tsx delete mode 100644 src/components/molecules/SelectField/SelectField.tsx delete mode 100644 src/components/molecules/SelectField/index.ts delete mode 100644 src/components/molecules/Sidebar/Sidebar.scss delete mode 100644 src/components/molecules/Sidebar/Sidebar.tsx delete mode 100644 src/components/molecules/Sidebar/index.ts delete mode 100644 src/components/molecules/TabGroup/TabGroup.scss delete mode 100644 src/components/molecules/TabGroup/TabGroup.stories.tsx delete mode 100644 src/components/molecules/TabGroup/TabGroup.tsx delete mode 100644 src/components/molecules/TabGroup/index.ts delete mode 100644 src/components/molecules/Table/Table.stories.tsx delete mode 100644 src/components/molecules/Table/Table.tsx delete mode 100644 src/components/molecules/Table/index.ts delete mode 100644 src/components/molecules/ToastManager/ToastManager.scss delete mode 100644 src/components/molecules/ToastManager/ToastManager.stories.scss delete mode 100644 src/components/molecules/ToastManager/ToastManager.stories.tsx delete mode 100644 src/components/molecules/ToastManager/ToastManager.tsx delete mode 100644 src/components/molecules/ToastManager/index.ts delete mode 100644 src/components/organisms/AreaGraph/AreaGraph.scss delete mode 100644 src/components/organisms/BarGraph/BarGraph.scss delete mode 100644 src/components/organisms/Boxplot/Boxplot.scss delete mode 100644 src/components/organisms/ChromatogramChart/ChromatogramChart.scss delete mode 100644 src/components/organisms/DotPlot/DotPlot.scss delete mode 100644 src/components/organisms/Heatmap/Heatmap.scss delete mode 100644 src/components/organisms/InteractiveScatter/InteractiveScatter.scss delete mode 100644 src/components/organisms/LineGraph/LineGraph.scss delete mode 100644 src/components/organisms/Main/Main.scss delete mode 100644 src/components/organisms/Main/Main.tsx delete mode 100644 src/components/organisms/PieChart/PieChart.scss delete mode 100644 src/components/organisms/ScatterGraph/ScatterGraph.scss delete mode 100644 src/components/organisms/TaskScripts/TaskScriptList.tsx delete mode 100644 src/components/organisms/TaskScripts/TaskScriptReadme.tsx delete mode 100644 src/components/organisms/TaskScripts/index.ts delete mode 100644 src/components/organisms/TdpSearch/components/DefaultFilters.tsx delete mode 100644 src/components/organisms/TdpSearch/components/DefaultResults.tsx delete mode 100644 src/components/organisms/TdpSearch/components/DefaultSearchBar.tsx create mode 100644 src/components/ui/accordion.stories.tsx create mode 100644 src/components/ui/accordion.tsx create mode 100644 src/components/ui/alert-dialog.stories.tsx create mode 100644 src/components/ui/alert-dialog.tsx create mode 100644 src/components/ui/alert.stories.tsx create mode 100644 src/components/ui/alert.tsx create mode 100644 src/components/ui/aspect-ratio.stories.tsx create mode 100644 src/components/ui/aspect-ratio.tsx create mode 100644 src/components/ui/avatar.stories.tsx create mode 100644 src/components/ui/avatar.tsx create mode 100644 src/components/ui/badge.stories.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/breadcrumb.stories.tsx create mode 100644 src/components/ui/breadcrumb.tsx create mode 100644 src/components/ui/button-group.stories.tsx create mode 100644 src/components/ui/button-group.tsx create mode 100644 src/components/ui/button.stories.tsx create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/calendar.stories.tsx create mode 100644 src/components/ui/calendar.tsx create mode 100644 src/components/ui/card.stories.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/carousel.stories.tsx create mode 100644 src/components/ui/carousel.tsx create mode 100644 src/components/ui/checkbox.stories.tsx create mode 100644 src/components/ui/checkbox.tsx rename src/components/{atoms/CodeEditor/CodeEditor.stories.tsx => ui/code-editor.stories.tsx} (82%) create mode 100644 src/components/ui/code-editor.tsx create mode 100644 src/components/ui/collapsible.stories.tsx create mode 100644 src/components/ui/collapsible.tsx create mode 100644 src/components/ui/combobox.stories.tsx create mode 100644 src/components/ui/combobox.tsx create mode 100644 src/components/ui/command.stories.tsx create mode 100644 src/components/ui/command.tsx create mode 100644 src/components/ui/context-menu.stories.tsx create mode 100644 src/components/ui/context-menu.tsx create mode 100644 src/components/ui/dialog.stories.tsx create mode 100644 src/components/ui/dialog.tsx create mode 100644 src/components/ui/drawer.stories.tsx create mode 100644 src/components/ui/drawer.tsx create mode 100644 src/components/ui/dropdown-menu.stories.tsx create mode 100644 src/components/ui/dropdown-menu.tsx create mode 100644 src/components/ui/field.stories.tsx create mode 100644 src/components/ui/field.tsx create mode 100644 src/components/ui/hover-card.stories.tsx create mode 100644 src/components/ui/hover-card.tsx create mode 100644 src/components/ui/input-group.stories.tsx create mode 100644 src/components/ui/input-group.tsx create mode 100644 src/components/ui/input-otp.stories.tsx create mode 100644 src/components/ui/input-otp.tsx create mode 100644 src/components/ui/input.stories.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/item.stories.tsx create mode 100644 src/components/ui/item.tsx create mode 100644 src/components/ui/kbd.stories.tsx create mode 100644 src/components/ui/kbd.tsx create mode 100644 src/components/ui/label.stories.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/menubar.stories.tsx create mode 100644 src/components/ui/menubar.tsx create mode 100644 src/components/ui/navigation-menu.stories.tsx create mode 100644 src/components/ui/navigation-menu.tsx create mode 100644 src/components/ui/radio-group.stories.tsx create mode 100644 src/components/ui/radio-group.tsx create mode 100644 src/components/ui/resizable.stories.tsx create mode 100644 src/components/ui/resizable.tsx create mode 100644 src/components/ui/scroll-area.stories.tsx create mode 100644 src/components/ui/scroll-area.tsx create mode 100644 src/components/ui/select.stories.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/separator.stories.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/sheet.stories.tsx create mode 100644 src/components/ui/sheet.tsx create mode 100644 src/components/ui/sidebar.stories.tsx create mode 100644 src/components/ui/sidebar.tsx create mode 100644 src/components/ui/skeleton.stories.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/slider.stories.tsx create mode 100644 src/components/ui/slider.tsx create mode 100644 src/components/ui/sonner.stories.tsx create mode 100644 src/components/ui/sonner.tsx create mode 100644 src/components/ui/spinner.stories.tsx create mode 100644 src/components/ui/spinner.tsx create mode 100644 src/components/ui/switch.stories.tsx create mode 100644 src/components/ui/switch.tsx create mode 100644 src/components/ui/table.stories.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/components/ui/tabs.stories.tsx create mode 100644 src/components/ui/tabs.tsx rename src/{assets/icon/TetraScienceIcon.tsx => components/ui/tetrascience-icon.tsx} (55%) create mode 100644 src/components/ui/textarea.stories.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/toggle-group.stories.tsx create mode 100644 src/components/ui/toggle-group.tsx create mode 100644 src/components/ui/toggle.stories.tsx create mode 100644 src/components/ui/toggle.tsx create mode 100644 src/components/ui/tooltip.stories.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/hooks/use-code-editor-theme.ts create mode 100644 src/hooks/use-is-dark.ts create mode 100644 src/hooks/use-mobile.ts create mode 100644 src/hooks/use-plotly-theme.ts delete mode 100644 src/index.scss create mode 100644 src/lib/utils.ts delete mode 100644 src/styles/README.md delete mode 100644 src/styles/index.scss delete mode 100644 src/styles/variables.scss delete mode 100644 src/theme/ThemeProvider.tsx delete mode 100644 src/theme/index.ts delete mode 100644 src/theme/types.ts delete mode 100644 src/vite-env.d.ts diff --git a/.agents/skills/shadcn/SKILL.md b/.agents/skills/shadcn/SKILL.md new file mode 100644 index 0000000..022142a --- /dev/null +++ b/.agents/skills/shadcn/SKILL.md @@ -0,0 +1,240 @@ +--- +name: shadcn +description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". +user-invocable: false +--- + +# shadcn/ui + +A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. + +> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +## Current Project Context + +```json +!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'` +``` + +The JSON above contains the project config and installed components. Use `npx shadcn@latest docs ` to get documentation and example URLs for any component. + +## Principles + +1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. +2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. +3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. +4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. + +## Critical Rules + +These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. + +### Styling & Tailwind → [styling.md](./rules/styling.md) + +- **`className` for layout, not styling.** Never override component colors or typography. +- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. +- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. +- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. +- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). +- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. +- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. + +### Forms & Inputs → [forms.md](./rules/forms.md) + +- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout. +- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`. +- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.** +- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state. +- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading. +- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control. + +### Component Structure → [composition.md](./rules/composition.md) + +- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`. +- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden. +- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`. +- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`. +- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`. +- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load. + +### Use Components, Not Custom Markup → [composition.md](./rules/composition.md) + +- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`. +- **Callouts use `Alert`.** Don't build custom styled divs. +- **Empty states use `Empty`.** Don't build custom empty state markup. +- **Toast via `sonner`.** Use `toast()` from `sonner`. +- **Use `Separator`** instead of `
` or `
`. +- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs. +- **Use `Badge`** instead of custom styled spans. + +### Icons → [icons.md](./rules/icons.md) + +- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon. +- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`. +- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup. + +### CLI + +- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset `. + +## Key Patterns + +These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above. + +```tsx +// Form layout: FieldGroup + Field, not div + Label. + + + Email + + + + +// Validation: data-invalid on Field, aria-invalid on the control. + + Email + + Invalid email. + + +// Icons in buttons: data-icon, no sizing classes. + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**? + - **Reinstall**: `npx shadcn@latest init --preset --force --reinstall`. Overwrites all components. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +``` + +**Named presets:** `base-nova`, `radix-nova` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/.agents/skills/shadcn/agents/openai.yml b/.agents/skills/shadcn/agents/openai.yml new file mode 100644 index 0000000..ab636da --- /dev/null +++ b/.agents/skills/shadcn/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/.agents/skills/shadcn/assets/shadcn-small.png b/.agents/skills/shadcn/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVkr05M1pgl1mAh%j*h z6I`{x0%imor0saV%ts)_S>O>_%)r1c48n{Iv*t(uO^eJ7i71Ki^|4CM&(%vz$xlkv ztH>0+>{umUo3Q%e#RDspr3imfVamB1>jfNYSkzLEl1NlCV?QiN}Sf^&XRs)CuG zfu4bq9hZWFf=y9MnpKdC8&o@xXRDM^Qc_^0uU}qXu2*iXmtT~wZ)j<0sc&GUZ)Btk zRH0j3nOBlnp_^B%3^4>|j!SBBa#3bMNoIbY0?6FNr2NtnTO}osMQ{LdXGvxn!lt}p zsJDO~)CbAv8|oS8!_5Y2wE>A*`4?rT0&NDFZ)a!&R*518wZ}#uWI2*!AU*|)0=;U- zWup%dHajlKxQFb(K%V94;uvBfm>Yb$>yU#$kCbgiC(9RwrlwA(rsW(``(6H=zq@!* zUB_~Trk_lTdxPh$yxDTsVY&L;b+6{tRm^+d+gl^OQcCIBok=%y)Vhx@dR1ceL3r{0 z9=2nMXx8DxEkhL{v?(>~8{qDBkfB!u-iDB`| z-5d%Ae82YI%n8Zg9$mRN?o-|V)V*=5b-R>a>}P2{=pcK^B(&B-W{C#Z!Q%b*ueK>n zK6ymYLRneebCKDSzcqHEHFopo-mkH{zIkt2Z0^086Tko7%N)NxoZYSDM1jSUwPpuS zSeq*wzrC2D(tq4pZ#s9QP@Cd8Q^wW3*2cL_519?*;#4`B;+ei#o;C{Kkamm3Jooa; zE$3K-+c(6ShTjelW_B*W5o zcS6z34IR5C-SIF8m(lui^IOy!-~We?b1?PSGniCYR=ZyR^%<1lJzf1=);T3K0RU@N BSy=!8 literal 0 HcmV?d00001 diff --git a/.agents/skills/shadcn/assets/shadcn.png b/.agents/skills/shadcn/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 zcmY*c2{@Ep*nY=Y1|x&SAZEs{m}!)<%wS9yONAB@M)rMZgo-eODf<#aqEe(qiK0X# zjeV<7Sz@e_J-dH=Uw_~KpZ7ZNbD!tj&;6X|T<3bv^oi2VQ{31CN!jQ|snzFQu@Q;0Du?| zfb$Q>hHZD6F}v@?{A7+^3dW)SVQ8`OjvI|a z{6nF7;ZWA*ClCgH0WJs)HH;bth37*c5IOtVpZ7;)e9lMRL5Xd-wU$;iu|t*(dB|ufCq)@;pdCk(RDoU7f8jS zP&Fw%scw{13LdO|DW$q z9v$>f^8d4#e=GgR%Ptkqr-S~xZFoMo{SXfTK;ub7{gc641VugDjPn7=AJBO!*mUKucc{7ey~li!vybaIkF z8OboYVX%y|2%P`k*m&i}s=eW8)0q&YJ<-thLrc)HZ?6uc7Fd!$(lWSvH;?Y^+|N2q z(lz!>Ip|<{_a4CnLN%GIxW|*Sl|;4c3?=Q>z5fWEEtp(&BzeAccRS{zf9!64+SAA{ zhe+CT7U8Ox1UUnilJqweOM{d}_w6-|yz}dA=-R7yHrxs|(MLR_`U=AC%0V#PpIuxs z`__xodV3Bl2ayP^m8isMu4iD<`=4UURtHBPsaLp81r-f3$(4vZbRPd}*>wTo@@?zp zjl1KkifF5p%-V<}MTk3`()wm7qcMd8<14WE>Y_YwjB;{Zt!@vJbH&pu!Ye!p{1kAj zlRg2pkl)WBbyj>3e<$)@mP?WW}W-c;_(UQ(}=MJLED9F^U*P1KWxu z1h@&s1?M0%ax_P5Qb>kkPKEH=OKGZn z&-@5MD^|kk?Hzkfz8h$8#{$$OjAyr!+uGtp>ns1^oS7Nlv6k$^tzTdIb%jUtI8F3t zL;LuqJ7-@4UI|Q)HN=Ap;dAmuZY4c&XphavC{kl z)mMY6L)S-94;V|YT3TA7U^;uvS0W!$W`JIb@kNAm0@IKVWJ@R_jgX6wlUd5V%pHIn;=Z~px z-B_MFLx+ldzTQUp5C zkXaznhH18TytzOgD%$iMnLiAtjvnHLkM;?P*3ZFb#cbY&ZF*|R;4V4$85DZMQ#T@| zxuMMPg?cl|hNJ$2S&%fLErMQSzCnzc_QGh3x@I8V&Omf&=_n+EaC}tft^`)^W5-=1 z0bbJ#wK8+=zNaz-V{U?NtJp&%IDd9-xIut--L}@gU{E>B&ym$vT2@wEZq- zzDqmDf)Cr-aZ-5KIYF!Elcq_X%?qXsg}Yhp=^bebcZ-Ucd$p+US;P}(@VrR4_fy6!qx?X)%SIi+LRsDR` zQ8+xRd{In4WLlVjoy5ElKt%?Ykr)cH*G}0^tE=$(#0W?l)_9MV89|sem>Y}t&?fGt zo3o0sdsG9?JhC1-KM}e*&zeb*H$7JoD&0z#=2sH725JmGV`WoVb86exi5p^Lm{B5BlZRd6(bKH`QmJ*u8#(j6IH1 zFf;Li5iqsV=V^irlzzwVJ$xXwz?I8y`i+t-g0?n77Ie}-fBp1{)&Dm1Yk^Fb=7rI4 zAD)SQRv9=Xr%G{qI!)}>rf;lzG))%89I~zF)R~&_Ur)%0>4+7bxbBknHT`^+jNFe%p=t<=q}3W1Y-u+ zi-cN{V#+HsEEB8UQsUt1uE991MvN%&V?(0Mcb~82H!ori&rLm~Xyf>i#u_t=rzHA3 zu?NRljnv7YU;T&V#(OVE$+=^@kaXvs%C3f78E(k$IyZ`)N$NYtLMfphBkV|oSI}7N zEpFrKnA*jL!k5P(%)+Sl^e>hI@Y}jqmvb~@RD`9$!9Jpu-Wf2Cq?hfV{ghuo&AG>9 zcvC>&o43J*WfyXuRWV)Y0~9;i68pPyv&~-%Ysp}xCY)|oF5?x{w~aS zfx&5VFU)gcnMk*q%=jkB9w_qQ)x=v#1Q^_3`uyEfKiD4y$vaOR4n4IpvQmyNXK%#R zU|XV~4Bq=Kr7Zp3#hdF5_MgA#yL-jJ4E5*j2?mhMq17{mD#6f?!#-b>@HA&~uECub zF2reQA9f>OHLzqeZhi$%7fW!n^Y3_Y{C0vfQs0?a(Pcz7Opuz;(9n>$6)c9L`((v~ z@R1+M2kRN}mDuKCk=od(UwR?y%hUbEv$dC0BD&Ir;03Mf&|A#ZFtn&*mnkH8>2w0+imbwLLU77q!A=W ztt$OR$b#$dkIAwM*ZWG{5*zUPkBN$42Kxe)AYe9DV+?(A^_|IoJLzRGKlbpb%n=PVmB`nxX< z)_}Tpg&IoX;4<0!ksDY9f>*dl`c}zSl!(+ujG#<&yu3AEKR)zVKTaK88*+ma)}3)G zx460(7TNMTz(t&DUv)`7lj(r=`!?>~Q}XW3w-sipV!{Trr8`zsvu9NEK9)zO0>v3D zOs=r|`OyjAS{Ea@UIRrr2Y7A?5+5}R4RpF)ee5^F-dhvP6MKyO`kNB4jGC{-$x}`x zXmpAxVV=WR{>!zDxoq7#DN+_BWG_PRr?$Sa(XT@zUL`HuM{I4bZSuo97aF&7tL@4P zO59)SaLA2ZMU3dO5>=P)GiqcIBUy4A2h_IC-7+IROG<+Qqczgo-JyHw-!h2%h8#$y zr;y4>z2J1R4+`7o>#OWA2iiS1m8)q6A}u3d7VBk **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template