@salesforce/webapp-template-feature-react-file-upload-experimental 1.104.1 → 1.105.1

package/README.md

@@ -311,7 +311,7 @@ onProgress: (progress) => {
 
 The sample includes a **skill** to show how a feature can bundle an on-demand workflow.
 
-Copy the `skills/file-upload/` folder into `.cline/skills/` (Cline) or `.cursor/skills/` (Cursor) to try it, or use it as a template for your own skills.
+Copy the `skills/implementing-file-upload/` folder into `.cline/skills/` (Cline) or `.cursor/skills/` (Cursor) to try it, or use it as a template for your own skills.
 
 ## Dependencies
 

package/dist/.a4drules/skills/{feature-react-chart-analytics-charts → building-analytics-charts}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-chart-analytics-charts
+name: building-analytics-charts
 description: Add or change charts from raw data. Use when the user asks for a chart, graph, or analytics visualization from JSON/data.
 ---
 

package/dist/.a4drules/skills/{webapp-react-data-visualization → building-data-visualization}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-data-visualization
+name: building-data-visualization
 description: Adds data visualization components (charts, stat cards, KPI metrics) to React pages using Recharts. Use when the user asks to add a chart, graph, donut chart, pie chart, bar chart, stat card, KPI metric, dashboard visualization, or analytics component to the web application.
 ---
 
@@ -46,8 +46,8 @@ Recharts is built on D3 and provides declarative React components. No additional
 
 Read the corresponding guide:
 
-- **Bar chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
-- **Line / area chart** — use the **`analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
+- **Bar chart** — use the **`building-analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for categorical data).
+- **Line / area chart** — use the **`building-analytics-charts`** skill in `feature-react-chart` (AnalyticsChart component for time-series data).
 - **Donut / pie chart** — read `implementation/donut-chart.md`
 - **Stat card with trend** — read `implementation/stat-card.md`
 - **Dashboard layout** — read `implementation/dashboard-layout.md`

package/dist/.a4drules/skills/{webapp-react-data-visualization → building-data-visualization}/implementation/donut-chart.md

@@ -156,7 +156,7 @@ Keep chart colors consistent with the app's design system. Define them as consta
 
 ## Other chart types
 
-For **bar charts** and **line charts**, use the `AnalyticsChart` component from `feature-react-chart` instead of raw Recharts. See the **`analytics-charts`** skill for usage.
+For **bar charts** and **line charts**, use the `AnalyticsChart` component from `feature-react-chart` instead of raw Recharts. See the **`building-analytics-charts`** skill for usage.
 
 ---
 

package/dist/.a4drules/skills/{webapp-react-interactive-map → building-interactive-map}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-interactive-map
+name: building-interactive-map
 description: Adds interactive Leaflet maps with geocoded markers to React pages. Use when the user asks to add a map, show locations on a map, display property pins, add a map view, or integrate mapping into the web application.
 ---
 

package/dist/.a4drules/skills/{webapp-react → building-react-components}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react
+name: building-react-components
 description: Use when editing any React code in the web application — creating or modifying components, pages, layout, headers, footers, or any TSX/JSX files. Follow this skill for add component, add page, header/footer, and general React UI implementation patterns (shadcn UI and Tailwind CSS).
 ---
 

package/dist/.a4drules/skills/{webapp-react-weather-widget → building-weather-widget}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-react-weather-widget
+name: building-weather-widget
 description: Adds a weather widget to React pages using the free Open-Meteo API. Use when the user asks to add weather, show a forecast, display current conditions, add a weather card, or integrate weather data into the web application.
 ---
 
@@ -34,7 +34,7 @@ The widget needs a latitude/longitude. Identify where this comes from:
 
 - **Fixed default** — hardcoded city (e.g. San Francisco: `37.7749, -122.4194`)
 - **User's location** — browser Geolocation API
-- **Address-based** — geocode an address to lat/lng (see the `webapp-react-interactive-map` skill for geocoding)
+- **Address-based** — geocode an address to lat/lng (see the `building-interactive-map` skill for geocoding)
 - **Prop-driven** — parent component passes lat/lng
 
 ---

package/dist/.a4drules/skills/{webapp-csp-trusted-sites → configuring-csp-trusted-sites}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-csp-trusted-sites
+name: configuring-csp-trusted-sites
 description: Creates Salesforce CSP Trusted Site metadata when adding external domains. Use when the user adds an external API, CDN, image host, font provider, map tile server, or any third-party URL that the web application needs to load resources from — or when a browser console shows a CSP violation error.
 ---
 

package/dist/.a4drules/skills/{webapp-ui-ux → designing-webapp-ui-ux}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-ui-ux
+name: designing-webapp-ui-ux
 description: Use when editing any UI code in the web application — styling, layout, design, appearance, Tailwind, shadcn, colors, typography, icons, or visual/UX changes. Comprehensive design guide and searchable database for React + Tailwind + shadcn/ui (styles, color palettes, font pairings, UX guidelines, chart types).
 ---
 
@@ -35,7 +35,7 @@ Extract key information from user request:
 **Always start with `--design-system`** to get comprehensive recommendations with reasoning:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+node skills/designing-webapp-ui-ux/scripts/search.js "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
 ```
 
 This command:
@@ -46,7 +46,7 @@ This command:
 
 **Example:**
 ```bash
-node skills/ui-ux/scripts/search.js "beauty spa wellness service" --design-system -p "Serenity Spa"
+node skills/designing-webapp-ui-ux/scripts/search.js "beauty spa wellness service" --design-system -p "Serenity Spa"
 ```
 
 ### Step 2b: Persist Design System (Master + Overrides Pattern)
@@ -54,7 +54,7 @@ node skills/ui-ux/scripts/search.js "beauty spa wellness service" --design-syste
 To save the design system for hierarchical retrieval across sessions, add `--persist`:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name"
+node skills/designing-webapp-ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name"
 ```
 
 This creates:
@@ -63,7 +63,7 @@ This creates:
 
 **With page-specific override:**
 ```bash
-node skills/ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+node skills/designing-webapp-ui-ux/scripts/search.js "<query>" --design-system --persist -p "Project Name" --page "dashboard"
 ```
 
 This also creates:
@@ -79,7 +79,7 @@ This also creates:
 After getting the design system, use domain searches to get additional details:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_results>]
+node skills/designing-webapp-ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_results>]
 ```
 
 **When to use detailed searches:**
@@ -97,7 +97,7 @@ node skills/ui-ux/scripts/search.js "<keyword>" --domain <domain> [-n <max_resul
 Get implementation-specific best practices for React, Tailwind, or shadcn/ui:
 
 ```bash
-node skills/ui-ux/scripts/search.js "<keyword>" --stack shadcn
+node skills/designing-webapp-ui-ux/scripts/search.js "<keyword>" --stack shadcn
 ```
 
 Available stacks: `html-tailwind`, `react`, `shadcn`
@@ -143,7 +143,7 @@ Available stacks: `html-tailwind`, `react`, `shadcn`
 ### Step 2: Generate Design System (REQUIRED)
 
 ```bash
-node skills/ui-ux/scripts/search.js "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+node skills/designing-webapp-ui-ux/scripts/search.js "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
 ```
 
 **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -152,17 +152,17 @@ node skills/ui-ux/scripts/search.js "beauty spa wellness service elegant" --desi
 
 ```bash
 # Get UX guidelines for animation and accessibility
-node skills/ui-ux/scripts/search.js "animation accessibility" --domain ux
+node skills/designing-webapp-ui-ux/scripts/search.js "animation accessibility" --domain ux
 
 # Get alternative typography options if needed
-node skills/ui-ux/scripts/search.js "elegant luxury serif" --domain typography
+node skills/designing-webapp-ui-ux/scripts/search.js "elegant luxury serif" --domain typography
 ```
 
 ### Step 4: Stack Guidelines
 
 ```bash
-node skills/ui-ux/scripts/search.js "layout responsive form" --stack html-tailwind
-node skills/ui-ux/scripts/search.js "form dialog" --stack shadcn
+node skills/designing-webapp-ui-ux/scripts/search.js "layout responsive form" --stack html-tailwind
+node skills/designing-webapp-ui-ux/scripts/search.js "form dialog" --stack shadcn
 ```
 
 **Then:** Synthesize design system + detailed searches and implement the design.
@@ -175,10 +175,10 @@ The `--design-system` flag supports two output formats:
 
 ```bash
 # ASCII box (default) - best for terminal display
-node skills/ui-ux/scripts/search.js "fintech crypto" --design-system
+node skills/designing-webapp-ui-ux/scripts/search.js "fintech crypto" --design-system
 
 # Markdown - best for documentation
-node skills/ui-ux/scripts/search.js "fintech crypto" --design-system -f markdown
+node skills/designing-webapp-ui-ux/scripts/search.js "fintech crypto" --design-system -f markdown
 ```
 
 ---

package/dist/.a4drules/skills/{feature-micro-frontend-micro-frontend → generating-micro-frontend-lwc}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-micro-frontend-micro-frontend
+name: generating-micro-frontend-lwc
 description: Generate a Micro Frontend LWC component for a Web Application.
 license: Proprietary. LICENSE.txt has complete terms
 metadata:

package/{skills/file-upload → dist/.a4drules/skills/implementing-file-upload}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-file-upload
+name: implementing-file-upload
 description: Add file upload functionality to React webapps with progress tracking and Salesforce ContentVersion integration. Use when the user wants to upload files, attach documents, handle file input, create file dropzones, track upload progress, or link files to Salesforce records. This feature provides programmatic APIs ONLY — no components or hooks are exported. Build your own custom UI using the upload() API. ALWAYS use this feature instead of building file upload from scratch with FormData or XHR.
 ---
 

package/dist/.a4drules/skills/{feature-graphql-graphql-data-access → implementing-graphql-data-access}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-graphql-graphql-data-access
+name: implementing-graphql-data-access
 description: Add or modify Salesforce GraphQL data access code. Use when the user asks to fetch, query, or mutate Salesforce data, or add a GraphQL operation for an object like Account, Contact, or Opportunity.
 ---
 

package/dist/.a4drules/skills/{webapp-features → installing-webapp-features}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-features
+name: installing-webapp-features
 description: Search, describe, and install pre-built UI features (authentication, shadcn components, navigation, charts, search, GraphQL, Agentforce AI) into Salesforce webapps. Use this when the user wants to add functionality to a webapp, or when determining what salesforce-provided features are available — whether prompted by the user or on your own initiative. Always check for an existing feature before building from scratch.
 ---
 

package/dist/.a4drules/skills/{feature-react-agentforce-conversation-client-embedded-agent → integrating-agentforce-conversation-client}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-agentforce-conversation-client-embedded-agent
+name: integrating-agentforce-conversation-client
 description: Embed an Agentforce conversation client (chat UI) into a React web application using the AgentforceConversationClient component. Use when the user wants to add or integrate a chat widget, chatbot, conversation client, agent chat, or conversational interface in a React app, or when they mention Agentforce chat, Agentforce widget, employee agent, travel agent, HR agent, or embedding a Salesforce agent. ALWAYS use this skill instead of building a chat UI from scratch. NEVER generate custom chat components, use third-party chat libraries, or implement chat with WebSockets or REST APIs. Do NOT use for Lightning Web Components (LWC), non-React frameworks.
 ---
 

package/dist/.a4drules/skills/{webapp-unsplash-images → integrating-unsplash-images}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: webapp-unsplash-images
+name: integrating-unsplash-images
 description: Adds high-quality Unsplash images to React pages. Use when the user asks to add a hero image, background image, placeholder image, stock photo, decorative image, or any Unsplash-sourced imagery to the web application.
 ---
 

package/dist/.a4drules/webapp-react.md

@@ -46,7 +46,7 @@ import { Input } from '@/components/ui/input';
 - **No emojis ever:** Do not use emojis anywhere in the app: no emojis in UI labels, buttons, headings, empty states, tooltips, or any user-facing text. Use words and lucide-react icons instead.
   - ✅ "Settings" with `<Settings />` icon
   - ❌ "⚙️ Settings" or "Settings 🔧"
-- For icon usage patterns and naming, see the **webapp-ui-ux** skill (`.a4drules/skills/webapp-ui-ux/`, especially `data/icons.csv`).
+- For icon usage patterns and naming, see the **designing-webapp-ui-ux** skill (`.a4drules/skills/designing-webapp-ui-ux/`, especially `data/icons.csv`).
 
 ## Editing UI — Source Files Only (CRITICAL)
 
@@ -94,7 +94,7 @@ All Salesforce API calls **must** go through the DataSDK (`@salesforce/sdk-data`
 
 ### GraphQL (Preferred)
 
-For queries and mutations, follow the **`graphql-data-access`** skill in `feature-graphql`. It covers schema exploration, query patterns, codegen, type generation, and guardrails.
+For queries and mutations, follow the **`implementing-graphql-data-access`** skill in `feature-graphql`. It covers schema exploration, query patterns, codegen, type generation, and guardrails.
 
 ### UI API (Fallback)
 

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.105.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.105.0...v1.105.1) (2026-03-17)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+# [1.105.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.104.1...v1.105.0) (2026-03-17)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.104.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.104.0...v1.104.1) (2026-03-17)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.104.1",
+  "version": "1.105.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
-  "version": "1.104.1",
+  "version": "1.105.1",
   "description": "File upload feature with a component to upload files to core",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -41,7 +41,7 @@
     }
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.104.1",
+    "@salesforce/webapp-experimental": "^1.105.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "nodemon": "^3.1.0",

package/{dist/.a4drules/skills/feature-react-file-upload-file-upload → skills/implementing-file-upload}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: feature-react-file-upload-file-upload
+name: implementing-file-upload
 description: Add file upload functionality to React webapps with progress tracking and Salesforce ContentVersion integration. Use when the user wants to upload files, attach documents, handle file input, create file dropzones, track upload progress, or link files to Salesforce records. This feature provides programmatic APIs ONLY — no components or hooks are exported. Build your own custom UI using the upload() API. ALWAYS use this feature instead of building file upload from scratch with FormData or XHR.
 ---
 

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/__inherit__button.tsx

@@ -2,24 +2,33 @@ import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 				outline:
-					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-9 px-4 py-2 has-[>svg]:px-3",
-				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-				icon: "size-9",
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-8",
+				"icon-xs":
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm":
+					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
 			},
 		},
 		defaultVariants: {
@@ -29,10 +38,7 @@ const buttonVariants = cva(
 	},
 );
 
-function Button({}: React.ComponentProps<"button"> &
-	VariantProps<typeof buttonVariants> & {
-		asChild?: boolean;
-	}) {
+function Button({}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
 	return <> </>;
 }