@czi-sds/mcp 0.16.0 → 0.17.0

package/data/component-props/Tag.json

@@ -2,39 +2,56 @@
   "Tag": {
     "props": {
       "color": {
-        "type": "\"info\" | \"positive\" | \"notice\" | \"negative\" | \"neutral\" | \"beta\" | \"[string, string]\" | \"[string, string, string]\"",
-        "isRequired": false
+        "defaultValue": "neutral",
+        "description": "The tag's intent, given either as one of the six names or as CSS colors: [label color, background color]: the icon stays white [label color, background color, icon color]",
+        "isRequired": false,
+        "type": "\"info\" | \"negative\" | \"notice\" | \"positive\" | \"neutral\" | \"beta\" | [string, string] | [string, string, string]"
       },
       "hover": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Whether the tag responds to the pointer with a darker fill and a pointer cursor. False removes the tag from pointer events altogether, which also keeps a surrounding Tooltip from opening.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "icon": {
-        "type": "ReactElement",
+        "description": "Icon element.",
         "isRequired": false,
-        "description": "Icon element."
+        "type": "ReactElement"
       },
       "label": {
-        "type": "string",
+        "defaultValue": "- (required)",
+        "description": "The tag's text, and its accessible name. It is cut off with an ellipsis\nrather than wrapped, so keep it to a word or two.",
         "isRequired": true,
-        "description": "The content of the component."
+        "type": "string"
       },
       "onClick": {
-        "type": "function",
-        "isRequired": false
+        "description": "MUI's prop. Makes the tag a button: a tab stop that answers Enter and Space.",
+        "isRequired": false,
+        "type": "function"
       },
       "sdsSize": {
-        "type": "\"s\" | \"l\"",
-        "isRequired": false
+        "defaultValue": "s",
+        "description": "The size of the tag: an 11px label with a 12px icon, or a 13px label with a 24px icon. A large tag has to have an icon.",
+        "isRequired": false,
+        "type": "\"s\" | \"l\""
       },
       "sdsStyle": {
-        "type": "\"square\" | \"rounded\"",
-        "isRequired": false
+        "defaultValue": "square",
+        "description": "The shape of the tag. The design guidance treats rounded as the default for the system, so it is usually worth passing.",
+        "isRequired": false,
+        "type": "\"square\" | \"rounded\""
       },
       "sdsType": {
-        "type": "\"primary\" | \"secondary\"",
-        "isRequired": false
+        "defaultValue": "primary",
+        "description": "primary fills the tag with the intent color and sets the label white. secondary tints the fill and keeps the label and a 1px border in the intent color.",
+        "isRequired": false,
+        "type": "\"primary\" | \"secondary\""
+      },
+      "onDelete": {
+        "description": "Callback fired when the delete icon is clicked.\nIf set, the delete icon will be shown.",
+        "isRequired": false,
+        "type": "(event: any) => void"
       }
     }
   }
-}
+}

package/data/component-props/TagFilter.json

@@ -2,10 +2,17 @@
   "TagFilter": {
     "props": {
       "label": {
-        "type": "string",
+        "defaultValue": "- (required)",
+        "description": "The filter's text. Cut off with an ellipsis when there is not room for it.",
         "isRequired": true,
-        "description": "The content of the component."
+        "type": "string"
+      },
+      "onDelete": {
+        "defaultValue": "- (required)",
+        "description": "Runs when the X is clicked or activated, and when Backspace or Delete is\npressed on the tag. Drop the filter from your state here; the component\ndoes not remove itself.",
+        "isRequired": true,
+        "type": "(event: any) => void"
       }
     }
   }
-}
+}

package/data/component-props/Tooltip.json

@@ -2,36 +2,67 @@
   "Tooltip": {
     "props": {
       "arrowOffset": {
-        "type": "number",
-        "isRequired": false
+        "description": "Sets the arrow's left position, in pixels from the tooltip's left edge, instead of letting it be calculated. Values past the tooltip's width move the arrow out of sight.",
+        "isRequired": false,
+        "type": "number"
       },
       "componentSlot": {
-        "type": "ReactNode",
-        "isRequired": false
-      },
-      "hasInvertedStyle": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "description": "Content below the text, with 12px above it when there is text. The place for anything that is not a string, including TooltipTable.",
+        "isRequired": false,
+        "type": "ReactNode"
       },
       "placement": {
-        "type": "complex",
-        "isRequired": false,
+        "defaultValue": "bottom",
         "description": "Tooltip placement.",
-        "defaultValue": "bottom"
+        "isRequired": false,
+        "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | \"auto\" | \"auto-start\" | \"auto-end\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
       },
       "textAlign": {
-        "type": "\"center\" | \"right\" | \"left\"",
-        "isRequired": false
+        "defaultValue": "center, or left when wide",
+        "description": "Overrides the alignment the width would pick.",
+        "isRequired": false,
+        "type": "\"center\" | \"left\" | \"right\""
       },
       "title": {
-        "type": "ReactNode",
+        "description": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.",
         "isRequired": false,
-        "description": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed."
+        "type": "ReactNode"
       },
       "width": {
-        "type": "\"default\" | \"wide\"",
-        "isRequired": false
+        "defaultValue": "default",
+        "description": "Caps the tooltip at 250px or 550px. Wide also left-aligns the text.",
+        "isRequired": false,
+        "type": "\"default\" | \"wide\""
+      },
+      "subtitle": {
+        "description": "A smaller, dimmer second line under the title, for a detail such as how to use what the tooltip points at.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "arrow": {
+        "defaultValue": false,
+        "description": "If `true`, adds an arrow to the tooltip.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "PopperComponent": {
+        "defaultValue": "SDS StyledPopper",
+        "description": "The popper the tooltip renders into, carrying the arrow's shape and\nplacement.\n\n(v9): MUI removed the Tooltip `PopperComponent` prop in favor of\n`slots.popper`. We keep `PopperComponent` as an SDS prop for backward\ncompatibility and map it to `slots.popper` internally.",
+        "isRequired": false,
+        "type": "\"symbol\" | \"object\" | \"style\" | \"button\" | \"div\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dialog\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"figure\" | \"footer\" | \"form\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"img\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"li\" | \"link\" | \"main\" | \"map\" | \"mark\" | \"menu\" | \"menuitem\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"option\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"search\" | \"slot\" | \"script\" | \"section\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"table\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"time\" | \"title\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"image\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"switch\" | \"text\" | \"textPath\" | \"tspan\" | \"use\" | \"view\" | ComponentClass<any, any> | FunctionComponent<any>"
+      },
+      "disableInteractive": {
+        "defaultValue": false,
+        "description": "Makes a tooltip not interactive, i.e. it will close when the user\nhovers over the tooltip before the `leaveDelay` is expired.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "followCursor": {
+        "defaultValue": false,
+        "description": "If `true`, the tooltip follow the cursor over the wrapped element.",
+        "isRequired": false,
+        "type": "boolean"
       }
     }
   }
-}
+}

package/data/component-props/TooltipCondensed.json

@@ -1,18 +1,27 @@
 {
   "TooltipCondensed": {
     "props": {
-      "hasInvertedStyle": {
-        "type": "any",
-        "isRequired": false
-      },
       "indicator": {
-        "type": "any",
-        "isRequired": false
+        "defaultValue": false,
+        "description": "Draws a 12px round dot before the text.",
+        "isRequired": false,
+        "type": "boolean"
       },
       "indicatorColor": {
-        "type": "any",
-        "isRequired": false
+        "description": "The dot's colour, as a CSS colour. Without it the dot occupies its space but cannot be seen.",
+        "isRequired": false,
+        "type": "string"
+      },
+      "title": {
+        "description": "The label to show. Pass null when the content is coming through componentSlot instead.",
+        "isRequired": false,
+        "type": "ReactNode"
+      },
+      "componentSlot": {
+        "description": "Inherited from Tooltip, and how a TooltipTable is placed inside a condensed tooltip.",
+        "isRequired": false,
+        "type": "ReactNode"
       }
     }
   }
-}
+}

package/data/component-props/TooltipTable.json

@@ -2,17 +2,27 @@
   "TooltipTable": {
     "props": {
       "contentAlert": {
-        "type": "\"string\" | \"Element\"",
-        "isRequired": false
+        "description": "A note above the whole table, for a caveat about the numbers. Takes an element, so it can hold a link.",
+        "isRequired": false,
+        "type": "string | Element"
       },
       "itemAlign": {
-        "type": "\"left\" | \"right\"",
-        "isRequired": false
+        "defaultValue": "right",
+        "description": "Which side of its column each value sits on. Right lines numbers up with each other.",
+        "isRequired": false,
+        "type": "\"left\" | \"right\""
       },
       "showSectionHeader": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
+        "defaultValue": true,
+        "description": "Whether section labels are drawn. False hides all of them; the dividers between sections stay.",
+        "isRequired": false,
+        "type": "boolean"
+      },
+      "data": {
+        "description": "The sections, drawn in order and separated by dividers. A section's label heads it, its dataRows fill it, and disabled greys the whole block.",
+        "isRequired": false,
+        "type": "{ label?: string; dataRows: { label: string; value: string | number; }[]; disabled?: boolean; }[]"
       }
     }
   }
-}
+}

package/data/resources/{zeroheight-rules.md → documentation-rules.md}

@@ -1,22 +1,27 @@
-# Zeroheight Documentation Adherence Rules
+# SDS Documentation Adherence Rules
 
-These rules guide Claude Code when using Zeroheight documentation to ensure accurate implementation of the CZI Science Design System (SDS).
+These rules guide AI assistants in using the SDS documentation to ensure accurate implementation of the CZI Science Design System (SDS).
 
 ## Documentation as Source of Truth
 
+The documentation served by `get_component_docs` is generated from the component
+documentation that ships with the SDS repository and renders in Storybook. It is
+the same content the design system team maintains, so it describes the library as
+it actually is rather than as it once was.
+
 ### Component Usage Guidelines
 
-- **Always reference Zeroheight documentation** for component usage guidelines
+- **Always call `get_component_docs`** before implementing a component
 - Follow documented usage patterns and restrictions
 - Respect component do's and don'ts specified in documentation
 - Use documented prop combinations and avoid deprecated patterns
 
 ### API Documentation Priority
 
-- **Zeroheight component documentation overrides assumptions**
-- Check documented prop options before implementing
+- **Component documentation overrides assumptions**
+- Check documented prop options with `get_component_props` before implementing
 - Follow documented accessibility requirements
-- Use documented examples as implementation templates
+- Use the code examples in the documentation as implementation templates
 
 ## Component Implementation Rules
 
@@ -25,7 +30,8 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 - **Use only documented prop values** and combinations
 - Follow documented prop hierarchies (e.g., `sdsStyle` + `sdsType` combinations)
 - Respect documented prop requirements (required vs optional)
-- Check Zeroheight for component-specific prop validation rules
+- Note where a component departs from the MUI component it wraps; each page has
+  an "SDS vs MUI" section covering exactly this
 
 ### Usage Patterns
 
@@ -45,7 +51,7 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Terminology
 
-- **Use SDS-approved terminology** from Zeroheight glossary
+- **Use SDS-approved terminology** from the documentation
 - Follow documented naming conventions for UI elements
 - Use consistent language patterns across components
 - Respect documented content guidelines (e.g., button text patterns)
@@ -62,11 +68,13 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Design Specifications
 
-- **Extract exact specifications** from Zeroheight:
+- **Use design tokens rather than literal values.** `get_tailwind_tokens`
+  returns the full set, covering:
   - Spacing measurements and relationships
   - Typography specifications
   - Color usage in different contexts
-  - Component states and variations
+  - Corners, borders, and drop shadows
+- Never hard-code a value that a token already expresses
 
 ### Responsive Behavior
 
@@ -96,15 +104,17 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Implementation Validation
 
-- **Cross-reference implementation with Zeroheight examples**
-- Verify component behavior matches documented examples
+- **Cross-reference implementation with the documented code examples.** Every
+  documented variation of a component ships with the source of a working
+  example; prefer adapting one over writing from scratch
+- Verify component behavior matches those examples
 - Test edge cases mentioned in documentation
 - Validate accessibility implementation against documented requirements
 
 ### Documentation Gaps
 
 - **When documentation is unclear or missing**:
-  - Use SDS Storybook as secondary reference
+  - Use the component's Storybook stories as a secondary reference
   - Follow established SDS patterns from similar components
   - Document any assumptions made for future clarification
   - Prefer conservative/minimal implementations
@@ -113,36 +123,39 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Documentation Workflow
 
-1. **Always check Zeroheight first** before implementing any SDS component
+1. **Always call `get_component_docs` first** before implementing any SDS component
 2. **Read the full component documentation** including usage guidelines
-3. **Review examples and code snippets** provided in documentation
+3. **Review the code examples** provided in the documentation
 4. **Check for any usage restrictions** or warnings
-5. **Validate implementation** against documented examples
+5. **Validate implementation** against the documented examples
 
 ### Staying Current
 
-- **Documentation updates**: Assume Zeroheight content is most current
-- **Version compatibility**: Check documented version compatibility
-- **Deprecation notices**: Follow documented migration paths for deprecated patterns
-- **New features**: Use documented new features rather than workarounds
+- **Documentation updates**: the docs are generated from the installed version of
+  the library, so they describe the components you are actually building against
+- **Version compatibility**: check documented version compatibility
+- **Deprecation notices**: follow documented migration paths for deprecated patterns
+- **New features**: use documented new features rather than workarounds
 
 ### Implementation Priority Order
 
-1. **Zeroheight documentation** (primary source of truth)
-2. **SDS Storybook** (implementation examples and edge cases)
-3. **TypeScript interfaces** (technical prop definitions)
+1. **Component documentation** via `get_component_docs` (primary source of truth)
+2. **Prop definitions** via `get_component_props` (authoritative types and defaults)
+3. **Design tokens** via `get_tailwind_tokens` (spacing, color, typography)
 4. **Existing codebase patterns** (established usage in project)
 
 ## Common Documentation Patterns
 
 ### Component Pages Structure
 
-- **Overview**: Component purpose and when to use
-- **Usage Guidelines**: Do's and don'ts with examples
-- **Props/API**: Detailed prop documentation
-- **Examples**: Code snippets and live examples
-- **Accessibility**: ARIA patterns and keyboard navigation
-- **Related Components**: Integration recommendations
+Sections appear in this order:
+
+- **Source Code**: a link to the component's implementation
+- **Import**: the import statement for the component and its sub-components
+- **Code examples**: one runnable example per supported variation
+- **SDS vs MUI**: how the SDS component differs from the MUI one it wraps
+- **MUI Documentation**: a link to the underlying component's own docs
+- **Props**: the SDS and MUI props required for implementation
 
 ### Information Hierarchy
 
@@ -155,7 +168,7 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### When Implementation Doesn't Match Design
 
-1. **Check Zeroheight for variant documentation**
+1. **Check the documentation for variant coverage**
 2. **Look for conditional usage patterns**
 3. **Verify responsive behavior specifications**
 4. **Check for theme-specific implementations**

package/data/resources/figma-rules.md

@@ -95,7 +95,7 @@ import { Button, Icon } from "@czi-sds/components";
 
 ## Design System Integration
 
-- Always check Zeroheight documentation for component usage guidelines
+- Always check the SDS component documentation for component usage guidelines
 - Verify SDS component APIs before implementing
-- Use SDS Storybook for component examples and prop references
+- Use the documented code examples and prop references before writing your own
 - When in doubt, prefer SDS patterns over custom solutions