@app-studio/web 0.9.21 → 0.9.24

package/docs/README.md

@@ -1,24 +1,31 @@
 # App Studio Web Component Library Documentation
 
-Welcome to the documentation for the App Studio Web Component Library. This documentation provides comprehensive guides, API references, and examples to help you build high-quality components and applications using our library.
+Welcome to the comprehensive documentation for the App Studio Web Component Library. This documentation provides guides, API references, and examples to help you build high-quality components and applications.
 
-## Documentation Structure
+## 📖 Documentation Structure
 
-- **Getting Started**: Quick start guides to help you begin using the library
-- **Component Development**: Detailed guides for building components
-- **Design System**: Information about the design system, theming, and styling
-- **API Reference**: Detailed API documentation for all components
-- **Tutorials**: Step-by-step tutorials for common tasks
-- **Contributing**: Guidelines for contributing to the library
+### Core Documentation
+- **[Getting Started](./getting-started/introduction.md)** - Quick introduction and setup
+- **[Component Development](./component-development/guide.md)** - Building and contributing components
+- **[API Integration](./api-integration.md)** - Backend integration patterns
+- **[Design System](./design-system/theming.md)** - Theming and styling guidelines
 
-## Using This Documentation
+### Specialized Documentation
+- **[ADK Components](../README-ADK.md)** - Agent Development Kit integration
+- **[API Reference](./api-reference/README.md)** - Detailed component APIs
+- **[Tutorials](./tutorials/README.md)** - Step-by-step guides
+- **[Contributing](./contributing/documentation.md)** - Contribution guidelines
 
-The documentation is organized to support different learning styles and needs:
+## 🚀 Quick Navigation
 
-- If you're new to the library, start with the [Getting Started](./getting-started/introduction.md) guide
-- If you're building components, refer to the [Component Development Guide](./component-development/guide.md)
-- If you need detailed API information, check the [API Reference](./api-reference/README.md)
-- If you want to learn through examples, explore the [Tutorials](./tutorials/README.md)
+### For New Users
+Start with the [Getting Started Guide](./getting-started/introduction.md) to understand the library basics and setup process.
+
+### For Developers
+Refer to the [Component Development Guide](./component-development/guide.md) for building and customizing components.
+
+### For ADK Integration
+Check the [ADK Components documentation](../README-ADK.md) for agent-specific functionality.
 
 ## Documentation Tools
 

package/docs/api-reference/form/chat-input.md

@@ -1,6 +1,6 @@
 # ChatInput
 
-The ChatInput component is a customizable chat input field with support for file uploads, prompt examples, and reference images.
+The ChatInput component is a customizable chat input field with support for file uploads and prompt examples.
 
 ## Import
 
@@ -30,8 +30,6 @@ import { ChatInput } from '@app-studio/web';
 | onGuideClose | () => void | undefined | Callback function when the guide tip is closed |
 | promptExamples | PromptExample[] | [] | List of prompt examples |
 | onPromptExampleSelect | (example: PromptExample) => void | undefined | Callback function when a prompt example is selected |
-| showReferenceImageButton | boolean | false | Whether to show the reference image button |
-| onReferenceImageClick | () => void | undefined | Callback function when the reference image button is clicked |
 | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the chat input |
 | shape | 'default' \| 'sharp' \| 'rounded' \| 'pillShaped' | 'rounded' | Shape of the chat input |
 | variant | 'default' \| 'outline' \| 'none' | 'default' | Visual variant of the chat input |
@@ -182,8 +180,6 @@ The ChatInput component can be customized using the `views` prop:
     guideTip: { /* styles for the guide tip */ },
     promptExamples: { /* styles for the prompt examples container */ },
     promptExampleItem: { /* styles for each prompt example item */ },
-    referenceImageButton: { /* styles for the reference image button */ },
-    referenceImageModal: { /* styles for the reference image modal */ },
     attachments: { /* styles for the attachments container */ },
     attachmentItem: { /* styles for each attachment item */ },
     submitButton: { /* styles for the submit button */ },

package/docs/documentation-system.md

@@ -104,8 +104,50 @@ To update component documentation:
 2. Review the generated documentation
 3. Make any necessary manual adjustments
 
+## Documentation Maintenance Rules
+
+### Rule 1: Single Source of Truth
+- Each topic should have ONE authoritative documentation file
+- Avoid duplicating content across multiple files
+- Use cross-references instead of copying content
+- **Prohibited**: Creating multiple files covering the same topic
+
+### Rule 2: Clear File Responsibilities
+- **README.md**: Project overview, quick start, navigation to specialized docs
+- **README-ADK.md**: ADK-specific functionality ONLY
+- **docs/README.md**: Documentation hub and navigation
+- **docs/api-integration.md**: Backend integration patterns
+- **Component docs**: Individual component usage and APIs
+
+### Rule 3: Content Validation Checklist
+Before adding/updating documentation:
+- ✅ Check for existing content on the same topic
+- ✅ Verify all code examples work
+- ✅ Ensure links are valid and up-to-date
+- ✅ Follow consistent markdown formatting
+- ✅ Update related files if needed
+- ✅ Remove outdated information
+
+### Rule 4: Mandatory Updates
+Documentation MUST be updated when:
+- Adding new components or features
+- Changing component APIs or props
+- Modifying integration patterns
+- Updating dependencies or requirements
+- Changing project structure
+
+### Rule 5: Quality Standards
+- Use clear, concise language
+- Include practical, working examples
+- Follow consistent formatting and terminology
+- Link related documentation appropriately
+- Test all code examples before publishing
+- Include accessibility information where relevant
+- Document best practices and common pitfalls
+
 ## Documentation Best Practices
 
+### Content Organization
 - Keep documentation up-to-date with code changes
 - Include examples for all components and features
 - Use consistent formatting and terminology
@@ -114,6 +156,45 @@ To update component documentation:
 - Include accessibility information
 - Document best practices and common pitfalls
 
+### File Naming Conventions
+- Use kebab-case for file names: `component-development.md`
+- Use descriptive names that clearly indicate content
+- Avoid generic names like `guide.md` or `docs.md`
+
+## Documentation Maintenance Workflow
+
+### Before Making Changes
+1. **Audit existing documentation**:
+   ```bash
+   # Check for duplicate content
+   grep -r "your-search-term" docs/
+
+   # Find broken links
+   find docs/ -name "*.md" -exec grep -l "broken-link" {} \;
+   ```
+
+2. **Validate current structure**:
+   - Ensure no topic is covered in multiple files
+   - Check that all links work
+   - Verify code examples are current
+
+### After Making Changes
+1. **Update related documentation**:
+   - Update cross-references
+   - Check for outdated information
+   - Ensure consistency across files
+
+2. **Run documentation tools**:
+   ```bash
+   npm run create-docs
+   npm run bot-doc -- ComponentName src/components/ComponentName
+   ```
+
+### Regular Maintenance Tasks
+- **Weekly**: Check for broken links and outdated examples
+- **Monthly**: Review documentation structure for redundancies
+- **Per Release**: Update all version-specific information
+
 ## Troubleshooting
 
 If you encounter issues with the documentation system:
@@ -141,3 +222,12 @@ If MDX files are not rendering correctly:
 1. Check the MDX syntax
 2. Ensure the MDX file is in the correct location
 3. Check for errors in the console
+
+### Duplicate Content Issues
+
+If you find duplicate content:
+
+1. Identify the authoritative source
+2. Remove duplicate content
+3. Add cross-references to the authoritative source
+4. Update any links pointing to removed content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.21",
+  "version": "0.9.24",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -46,6 +46,7 @@
     "create-example": "ts-node scripts/create-example.ts",
     "page-imports": "ts-node scripts/generate-page-imports.ts",
     "create-pages": "npm run create-indices && ts-node scripts/create-pages.ts && npm run page-imports",
+    "validate-docs": "node scripts/validate-docs.js",
     "api:local": "react-api  --useUnionTypes --input http://localhost:3000/docs/swagger.json --output ./src/services/api  && prettier --write ./src/services/api"
   },
   "eslintConfig": {
@@ -84,7 +85,6 @@
     "zustand": "^4.3.8"
   },
   "devDependencies": {
-    "@babel/standalone": "^7.27.3",
     "@anthropic-ai/sdk": "^0.39.0",
     "@app-studio/react-api": "^0.15.28",
     "@app-studio/react-request": "^0.1.3",
@@ -93,6 +93,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
+    "@babel/standalone": "^7.27.3",
     "@commitlint/cli": "^19.2.0",
     "@commitlint/config-conventional": "^19.1.0",
     "@google/generative-ai": "^0.24.0",
@@ -153,6 +154,7 @@
     "replicate": "^1.0.1",
     "router": "^1.3.8",
     "simple-git": "^3.22.0",
+    "store": "^2.0.12",
     "style-loader": "^3.3.2",
     "tiktoken": "^1.0.20",
     "ts-loader": "^9.4.2",

package/dist/components/Accordion/examples/collapsible.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CollapsibleAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/disabled.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DisabledAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/index.d.ts

@@ -1,5 +0,0 @@
-export * from './default';
-export * from './variants';
-export * from './multiple';
-export * from './disabled';
-export * from './collapsible';

package/dist/components/Accordion/examples/multiple.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MultipleAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/variants.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AccordionVariants: () => React.JSX.Element;

package/dist/components/Alert/examples/darkMode.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DarkModeDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Alert Examples - Design System
- *
- * Showcases the Alert component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemAlerts: () => React.JSX.Element;

package/dist/components/Alert/examples/icon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const IconDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/styles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantDemo: () => React.JSX.Element;

package/dist/components/AspectRatio/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/AspectRatio/examples/index.d.ts

@@ -1,2 +0,0 @@
-export * from './default';
-export * from './ratio';

package/dist/components/AspectRatio/examples/ratio.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RatioDemo: () => React.JSX.Element;

package/dist/components/Avatar/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Avatar/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Avatar Examples - Design System
- *
- * Showcases the Avatar component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemAvatars: () => React.JSX.Element;

package/dist/components/Avatar/examples/fallback.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const FallbackDemo: () => React.JSX.Element;

package/dist/components/Avatar/examples/index.d.ts

@@ -1,5 +0,0 @@
-export * from './default';
-export * from './designSystem';
-export * from './fallback';
-export * from './size';
-export * from './styles';

package/dist/components/Avatar/examples/size.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SizeDemo: () => React.JSX.Element;

package/dist/components/Avatar/examples/styles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/aurora.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AuroraDemo: () => React.JSX.Element;

package/dist/components/Background/examples/combinedEffects.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CombinedEffectsDemo: () => React.JSX.Element;

package/dist/components/Background/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Background/examples/grid.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const GridDemo: () => React.JSX.Element;

package/dist/components/Background/examples/index.d.ts

@@ -1,8 +0,0 @@
-export { DefaultDemo } from './default';
-export { AuroraDemo } from './aurora';
-export { MeteorsDemo } from './meteors';
-export { WallDemo } from './wall';
-export { ParticlesDemo } from './particles';
-export { GridDemo } from './grid';
-export { RipplesDemo } from './ripples';
-export { CombinedEffectsDemo } from './combinedEffects';

package/dist/components/Background/examples/meteors.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MeteorsDemo: () => React.JSX.Element;

package/dist/components/Background/examples/particles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ParticlesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/ripples.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RipplesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/wall.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const WallDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/colorScheme.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ColorSchemeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/content.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ContentDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/darkMode.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DarkModeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Badge Examples - Design System
- *
- * Showcases the Badge component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemBadges: () => React.JSX.Element;

package/dist/components/Badge/examples/index.d.ts

@@ -1,9 +0,0 @@
-export * from './content';
-export * from './default';
-export * from './designSystem';
-export * from './position';
-export * from './shape';
-export * from './size';
-export * from './styles';
-export * from './variant';
-export * from './darkMode';

package/dist/components/Badge/examples/position.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PositionDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/shape.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ShapeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/size.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SizeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/styles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantDemo: () => React.JSX.Element;

package/dist/components/Button/examples/animatedStroke.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AnimatedStrokeButtons: () => React.JSX.Element;

package/dist/components/Button/examples/autofocus.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ExternalButton: () => React.JSX.Element;

package/dist/components/Button/examples/borderMoving.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const BorderMovingButtons: () => React.JSX.Element;

package/dist/components/Button/examples/colorScheme.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ColoredButtons: () => React.JSX.Element;

package/dist/components/Button/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultButton: () => React.JSX.Element;

package/dist/components/Button/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Button Examples - Design System
- *
- * Showcases the Button component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemButtons: () => React.JSX.Element;

package/dist/components/Button/examples/effectsTest.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const EffectsTestButtons: () => React.JSX.Element;

package/dist/components/Button/examples/icon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const IconButtons: () => React.JSX.Element;

package/dist/components/Button/examples/index.d.ts

@@ -1,12 +0,0 @@
-export * from './animatedStroke';
-export * from './autofocus';
-export * from './borderMoving';
-export * from './default';
-export * from './designSystem';
-export * from './icon';
-export * from './isAuto';
-export * from './isDisabled';
-export * from './loaderProps';
-export * from './shadow';
-export * from './size';
-export * from './variant';

package/dist/components/Button/examples/isAuto.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const BorderedButtons: () => React.JSX.Element;

package/dist/components/Button/examples/isDisabled.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DisabledButton: () => React.JSX.Element;

package/dist/components/Button/examples/loaderProps.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const LoaderButtons: () => React.JSX.Element;

package/dist/components/Button/examples/shadow.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ShadowButton: () => React.JSX.Element;

package/dist/components/Button/examples/size.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ButtonSizes: () => React.JSX.Element;

package/dist/components/Button/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantButtons: () => React.JSX.Element;

package/dist/components/Card/examples/contextStyling.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ContextStylingDemo: () => React.JSX.Element;

package/dist/components/Card/examples/custom.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CustomDemo: () => React.JSX.Element;

package/dist/components/Card/examples/darkModeExample.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DarkModeExample: () => React.JSX.Element;

package/dist/components/Card/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Card/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Card Examples - Design System
- *
- * Showcases the Card component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemCards: () => React.JSX.Element;

package/dist/components/Card/examples/index.d.ts

@@ -1,8 +0,0 @@
-export * from './default';
-export * from './designSystem';
-export * from './variants';
-export * from './structured';
-export * from './shapes';
-export * from './sizes';
-export * from './custom';
-export * from './contextStyling';

package/dist/components/Card/examples/shapes.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ShapesDemo: () => React.JSX.Element;

package/dist/components/Card/examples/sizes.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SizesDemo: () => React.JSX.Element;

package/dist/components/Card/examples/structured.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StructuredDemo: () => React.JSX.Element;

package/dist/components/Card/examples/variants.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantsDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/autoplay.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AutoPlayDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/compound.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const CompoundDemo: () => React.JSX.Element;
-export declare const CustomCompoundDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/custom.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CustomDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/index.d.ts

@@ -1,7 +0,0 @@
-export * from './default';
-export * from './autoplay';
-export * from './indicators';
-export * from './navigation';
-export * from './custom';
-export * from './compound';
-export * from './stepIndices';

package/dist/components/Carousel/examples/indicators.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const IndicatorsDemo: () => React.JSX.Element;

package/dist/components/Carousel/examples/navigation.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NavigationDemo: () => React.JSX.Element;