@fluid-app/fluid-cli-widget 0.1.33 → 0.1.35

package/templates/default/README.md.template

@@ -1,340 +1,134 @@
 # {{projectName}}
 
-Standalone Fluid widget project generated by `@fluid-app/fluid-cli-widget`.
+A standalone Fluid Remote DOM widget package associated with an existing
+Droplet. This project publishes widget code and metadata. It does not create a
+Droplet, portal application, iframe preview, or backend service.
 
-This project builds and publishes a widget package only. It does **not** scaffold droplets, a full portal application, or backend services.
+## Start development
 
-## Scripts
+Requirements: Node.js, pnpm, and a Fluid CLI login for commands that read or
+write Droplet state.
 
 ```bash
-pnpm dev                              # Run local widget protocol endpoints
-pnpm typecheck                        # Run TypeScript checking
-pnpm validate                         # Validate package metadata with the Fluid widget CLI
-pnpm build                            # Validate and build runtime artifacts
-pnpm run widget:link                  # Link this project to an existing Fluid droplet
-pnpm run widget:publish               # Publish to the linked droplet
-pnpm run widget:publish --dry-run     # Build upload payload without uploading
+pnpm install
+pnpm run widget:link
+pnpm dev
 ```
 
-## Project structure
+`pnpm dev` starts Vite, normally on http://localhost:5174. It serves the live
+package descriptor at `/__widget-packages__` and the worker bootstrap at
+`/__runtime-entry__`. A portal or builder host loads those endpoints. The
+command does not create a separate preview application or publication build.
 
-```text
-.
-├── AGENTS.md                         # Portable AI authoring guidance
-├── CLAUDE.md                         # Claude-compatible AI authoring guidance
-├── .agents/skills/                   # Agent skill docs for this project
-├── .claude/skills/                   # Claude skill docs for this project
-├── fluid.widget.config.ts            # Widget CLI ownership + package exports
-├── manifest.ts                       # defineWidget/defineWidgetPackage metadata
-├── styles.css                        # Shadow-root runtime styles
-├── src/index.ts                      # Remote DOM worker entry
-└── src/widgets/review-carousel/ReviewCarousel.tsx
-```
-
-## Local development endpoints
-
-`pnpm dev` exposes:
-
-- `/__widget-packages__`: the local canonical package descriptor consumed by Fluid hosts.
-- `/__runtime-entry__`: the Remote DOM worker entry referenced by that descriptor.
-
-The standalone project does not include a second host or iframe preview app.
-Portal and builder hosts render the worker through the shared Remote DOM runtime.
-
-The standalone source of truth is `manifest.ts`, with droplet ownership in
-`fluid.widget.config.ts`. Company portal projects instead use
-`src/widgets.config.ts` and `fluid portal deploy`.
-
-## Package boundary
-
-Stay inside the standalone widget package:
-
-- Put reusable widget components under `src/widgets/`.
-- Put package and palette metadata in `manifest.ts`.
-- Keep runtime registration in `src/index.ts`.
-- Keep runtime styles in `styles.css` or CSS files imported by widget modules.
-- Do not add Next.js app folders, Rails code, API servers, portal app shells, or droplet scaffolding.
-
-Droplet ownership is managed by the Fluid widget CLI through `fluid.widget.config.ts`. Link the project with `pnpm run widget:link` or pass a droplet option to CLI commands when needed.
-
-## Authoring widgets
-
-Widgets are authored with `defineWidget()` and grouped with `defineWidgetPackage()` from `@fluid-app/portal-sdk/widgets/worker`.
-
-`defineWidget()` describes one widget:
-
-- `name`: stable URL-safe widget name. Changing it changes the generated widget type.
-- `component`: React component rendered inside the Remote DOM worker.
-- `displayName`, `description`, `icon`, `category`: builder palette metadata.
-- `defaultProps`: JSON-serializable defaults for new widget instances.
-- `propertySchema`: builder property panel fields.
-- `container`: `block`, `card`, `inline`, or `fullscreen`.
-- `uses`: every typed portal function called by this widget. Pass the function values instead of writing capability names.
-- `resizable`: false/omitted, true, `horizontal`, `vertical`, `both`, or an object with horizontal/vertical flags and optional minimum sizes.
-
-`defineWidgetPackage()` describes the package:
-
-- Keep `packageType` set to `droplet` for this template.
-- Keep `widgets` as the array of widgets exported by this package.
-- Use a SemVer `version` without build metadata.
-- Do not manually set `packageStableId` in this generated droplet template; the CLI injects the linked droplet key during validation, build, and publish.
-- Do not author runtime artifact URLs. Dev and build inject the served `workerEntryUrl`.
-
-## Manifest structure
-
-`manifest.ts` should remain the single source of package metadata:
-
-```ts
-import {
-  defineWidget,
-  defineWidgetPackage,
-} from "@fluid-app/portal-sdk/widgets/worker";
-import { ExampleWidget } from "./src/widgets/example/ExampleWidget";
-
-export const exampleWidget = defineWidget({
-  name: "ExampleWidget",
-  component: ExampleWidget,
-  displayName: "Example Widget",
-  description: "A focused reusable Fluid widget.",
-  icon: "box",
-  category: "components",
-  container: "card",
-  defaultProps: {
-    title: "Featured content",
-  },
-  propertySchema: {
-    tabsConfig: [{ id: "content", label: "Content" }],
-    dataSourceTargetProps: ["title"],
-    fields: [
-      {
-        key: "title",
-        label: "Title",
-        type: "text",
-        defaultValue: "Featured content",
-        tab: "content",
-        group: "Copy",
-      },
-    ],
-  },
-});
-
-export const widgetPackage = defineWidgetPackage({
-  scope: "droplet",
-  version: "0.1.0",
-  packageType: "droplet",
-  widgets: [exampleWidget],
-});
-
-export const widgetPackages = [widgetPackage] as const;
-export default widgetPackage;
-```
-
-## Typed portal functions
-
-Worker code imports typed portal functions from
-`@fluid-app/portal-sdk/widgets/worker`, calls them directly, and lists the same
-function values in the widget's `uses` array:
-
-```ts
-import {
-  defineWidget,
-  getUserAccount,
-  navigateTo,
-} from "@fluid-app/portal-sdk/widgets/worker";
-
-async function openProfile(): Promise<void> {
-  const account = await getUserAccount();
-  await navigateTo(account.slug);
-}
-
-export const profileButtonWidget = defineWidget({
-  name: "ProfileButton",
-  component: ProfileButton,
-  uses: [getUserAccount, navigateTo],
-});
-```
-
-Available built-ins are `getUserAccount`, `getStore`, `getPortalApp`,
-`getPortalProfile`, `getNavigationState`, `buildPortalHref`, `navigateTo`,
-`getFullscreenState`, `requestFullscreen`, and `exitFullscreen`. Getters await
-and return resolved data instead of exposing query-status snapshots. A
-navigation target may be a slug string, `{ slug }`, or `{ href }`.
-
-`defineWidget()` derives the existing descriptor declarations from `uses`.
-Both the worker and host enforce those declarations. If a call fails with
-`PortalFunctionError` code `NOT_DECLARED`, add that function to the widget's
-`uses` array. Do not author a raw `capabilities` array.
-
-`getUserAccount()` returns an allowlisted account view. It may include email,
-but excludes phone numbers, addresses, payment details, credentials,
-government or tax identifiers, dates of birth, raw metadata, and unknown
-future fields. The host's `tenantClient` is not exposed to widgets.
-
-For company-specific operations, define a shared typed function with
-`definePortalFunction<Output, Input>({ capability, version, method })`, call it
-directly, and include it in `uses`. The portal owner installs a typed host
-handler with `implementPortalFunction(function, handler)` in
-`remoteWidgets.functions`. Built-ins cannot be overridden; duplicate custom
-implementations are rejected.
+`widget:link` selects an existing Droplet and writes its ID to
+`fluid.widget.config.ts`. If the ID is already present, validation and local
+builds do not require a login.
 
-Custom inputs and outputs must be JSON values: null, booleans, finite numbers,
-strings, arrays, and objects composed from those values. Do not use
-`undefined`, functions, Dates, Maps, Sets, class instances, `NaN`, or
-`Infinity`. The runtime validates the protocol boundary as well as the
-TypeScript contract.
+## Project map
 
-## Property schema reference
-
-Property schemas define editable builder controls. They must be JSON-serializable.
-
-Top-level schema keys:
-
-- `tabsConfig`: optional array of tab objects with `id` and `label`.
-- `fields`: array of controls shown in the builder property panel.
-- `dataSourceTargetProps`: prop keys that can be populated from configured data sources.
-- `itemConfigSchema`: optional per-item configuration schema for custom data-source selections.
-- `validate`: optional custom validator in in-app manifests; avoid it for published standalone metadata because package metadata must be serializable.
-
-Base field keys:
-
-| Key | Purpose |
+| Path | Owner and lifecycle |
 | --- | --- |
-| `key` | Widget prop key written by the field. Use a unique non-prop key for visual-only controls. |
-| `label` | Builder label. |
-| `type` | Supported field type listed below. |
-| `description` | Optional helper text. |
-| `defaultValue` | Optional JSON-serializable default. |
-| `tab` | Optional tab id matching `tabsConfig`. |
-| `group` | Optional group label inside a tab. |
-| `advanced` | Marks theme overrides or low-frequency settings; advanced fields render in Custom styling. |
-| `requiresKeyValue` | Optional conditional display rule. An array means all conditions must match. |
-
-Supported field types:
-
-| Type | Use | Extra keys |
-| --- | --- | --- |
-| `text` | Single-line string | `placeholder`, `maxLength`, `tokenSuggestions` |
-| `textarea` | Multi-line string | `placeholder`, `rows`, `maxLength` |
-| `number` | Number input | `min`, `max`, `step` |
-| `boolean` | Toggle | None |
-| `select` | Dropdown | `options` array with `label` and `value` |
-| `color` | Basic color value | None |
-| `range` | Slider | Required `min`, `max`; optional `step` |
-| `dataSource` | Data-source selector/configuration | None |
-| `resource` | Single shareable/resource picker | `allowedTypes` |
-| `image` | Media picker | `accept` as `image`, `video`, or `any` |
-| `alignment` | Alignment picker | `options.verticalEnabled`, `options.horizontalEnabled` |
-| `slider` | Numeric slider | `min`, `max`, `step`, `unit` |
-| `colorPicker` | Color picker | `swatches` |
-| `sectionHeader` | Visual section heading | `subtitle` |
-| `separator` | Visual divider | None |
-| `buttonGroup` | Segmented choice | `options` with `value`, optional `label`, `ariaLabel`, `icon` |
-| `colorSelect` | Semantic theme color picker | `excludeColors` |
-| `sectionLayoutSelect` | Visual section layout picker | None |
-| `background` | Combined background resource/color control | Resource/color field keys as needed |
-| `contentPosition` | 3-by-3 content position picker | None |
-| `textSizeSelect` | Theme text-size picker | None |
-| `cssUnit` | Number with unit selector | `allowedUnits`, `defaultUnit`, `minByUnit`, `maxByUnit`, `stepByUnit` |
-| `fontPicker` | Google font picker | `placeholder` |
-| `stringArray` | Editable list of strings | `placeholder` |
-| `borderRadius` | Composite four-corner radius editor | `keys.topLeft`, `keys.topRight`, `keys.bottomLeft`, `keys.bottomRight` |
-| `screenPicker` | Portal screen picker | `includeSystemItems` |
-
-### Data-source-ready props
-
-For props that may later be connected to data sources:
-
-- Add the prop key to `dataSourceTargetProps`.
-- Keep the component tolerant of missing, empty, or partially populated values.
-- Render useful empty states for empty arrays and failed mapping.
-- Keep prop values JSON-serializable.
-- Avoid fetching inside the component when a prop or data source can provide the data.
-- Use `itemConfigSchema` when each selected item needs widget-specific settings.
-
-## Component quality bar
-
-- Use TypeScript interfaces for public props.
-- Provide defaults for optional props.
-- Treat incoming props as untrusted and validate before reading nested values.
-- Keep render logic deterministic and side-effect free.
-- Clean up effects and subscriptions.
-- Keep bundles small; avoid heavy libraries unless the widget requires them.
-- Avoid secrets, tenant credentials, local URLs, and environment-only assumptions.
-- Prefer semantic HTML over div-only structures.
-
-## Accessibility
-
-- Use headings, sections, lists, buttons, labels, and form elements semantically.
-- Make every interactive element keyboard reachable.
-- Provide visible focus states.
-- Add `aria-label` to icon-only controls.
-- Add alt text to meaningful images and empty alt text to decorative images.
-- Preserve logical heading order inside the widget.
-- Use ARIA live regions for important dynamic updates.
-- Respect reduced-motion preferences for animation-heavy widgets.
-- Use semantic foreground/background token pairs for contrast.
-
-## Runtime CSS and theme tokens
-
-Fluid hosts provide semantic CSS variables. Prefer token-based CSS instead of hard-coded palettes.
-
-Common CSS variables:
-
-- Surfaces: `--background`, `--card`, `--popover`.
-- Text: `--foreground`, `--card-foreground`, `--popover-foreground`.
-- Brand/actions: `--primary`, `--primary-foreground`.
-- Supporting UI: `--secondary`, `--secondary-foreground`, `--muted`, `--muted-foreground`, `--accent`, `--accent-foreground`.
-- Status/chrome: `--destructive`, `--destructive-foreground`, `--border`, `--input`, `--ring`.
-- Charts: `--chart-1`, `--chart-2`, `--chart-3`, `--chart-4`, `--chart-5`.
-- Radius: `--radius`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`.
-- Theme-engine aliases may include `--font-header`, `--font-body`, `--font-size-extra-small`, `--font-size-small`, `--font-size-regular`, `--font-size-large`, `--font-size-extra-large`, and `--font-size-giant`.
-
-Tailwind equivalents, when Tailwind is available, are semantic utilities such as `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, `ring-ring`, `rounded-lg`, `text-sm`, and `text-xl`. This standalone template uses plain CSS for runtime portability.
-
-Light/dark behavior:
-
-- Fluid themes update variables for light and dark mode.
-- Explicit dark mode is represented by `data-theme-mode="dark"` on a host element.
-- Some hosts also use system dark mode when no explicit mode is selected.
-- Prefer semantic variables so both modes work automatically.
-- If mode-specific styling is unavoidable, scope it with `[data-theme-mode="dark"]` and keep values token-based.
-
-Runtime CSS rules:
-
-- Import runtime CSS from the guarded build import in `src/index.ts` or another worker module included in the build.
-- Prefix selectors with the widget name to prevent host leakage.
-- Do not rely on `body` styles for published runtime rendering.
-- If published styles are missing, check that the CSS import is reachable from the built entry.
-
-## Validation, build, and publish preflight
-
-Before shipping changes, run:
+| `manifest.ts` | Author-owned package scope, key, version, and widget registrations. Edit for every release or registration change. |
+| `fluid.widget.config.ts` | Author-owned Droplet link and package export. Change the Droplet only when intentionally relinking the project. |
+| `src/index.ts` | Worker entry that starts the package and imports package CSS. |
+| `src/widgets/` | Author-owned widget components. The starter widget is an example and can be replaced. |
+| `styles.css` | Author-owned, package-scoped runtime CSS. Keep its guarded import in `src/index.ts`. |
+| `src/vite-env.d.ts` | Vite environment type declarations. |
+| `vite.config.ts`, `tsconfig.json` | Build configuration. Change only for a concrete toolchain requirement. |
+| `package.json` | Project scripts and dependencies. Author-owned after scaffold creation. |
+| lockfile | Dependency resolution. Commit when dependency changes are intentional. |
+| `.gitignore` | Source-control exclusions for local and generated files. |
+| `.oxlintrc.json` | Generated lint configuration. Change only when project lint policy changes. |
+| `README.md` | Human setup, lifecycle, and recovery guidance. |
+| `AGENTS.md`, `CLAUDE.md` | Root coding-agent guidance. `CLAUDE.md` points to the canonical `AGENTS.md`. |
+| `.agents/skills/fluid-widget-authoring/` | Widget task procedures and reference guidance. |
+| `.claude/skills/` | Compatibility view of the same skill. Do not maintain different instructions there. |
+| `.fluid/widget-build/` | Temporary compilation workspace. Generated and safe to recreate. |
+| `.fluid/tmp/` | Temporary CLI state. Generated and safe to recreate. |
+| `.fluid/widget-dist/` | Publication output: `widget.js`, `manifest.json`, `publish-manifest.json`, CSS, maps, and referenced assets. Generated; never edit or commit it. |
+| `node_modules/` | Installed dependencies. Generated. |
+
+## Package ownership
+
+`manifest.ts` is the package contract. Use the installed generated API for its
+complete fields, accepted values, and widget-definition shape; this README does
+not repeat them. Keep package identity, widget registration, defaults,
+property-schema metadata, and declared runtime uses together there.
+
+`fluid.widget.config.ts` links that package to a Droplet. It does not define
+package identity, version, or widgets.
+
+All metadata and props must satisfy the installed JSON-value types. Do not
+maintain a separate value whitelist in project documentation.
+
+## Theme compliance
+
+Widgets must work with the active portal theme and its supported color modes.
+Use the host semantic CSS variables for colors, typography, spacing, radii,
+borders, focus rings, and charts. Use a semantic property only when authors
+need to choose among theme roles.
+
+Use `type: "colorSelect"` for a color property. It stores a semantic token.
+The legacy `type: "color"` field is deprecated because it stores an arbitrary
+color that can conflict with the theme. Avoid `colorPicker`, literal colors,
+custom font controls, and custom radius or spacing controls unless the product
+requirement cannot be expressed by the theme engine. Document any necessary
+exception in the field description and provide a theme-derived default.
+
+## Validate and build
 
 ```bash
 pnpm typecheck
 pnpm validate
 pnpm build
-pnpm run widget:publish --dry-run
 ```
 
-Publish only after the dry run succeeds:
+Validation checks package metadata and source configuration. Build validates,
+typechecks, and writes `.fluid/widget-dist/`. Inspect `manifest.json` and the
+widget in a portal host; a successful build cannot prove visual, accessibility,
+or theme compatibility.
+
+If a build fails, fix the first reported source or metadata error. Remove only
+generated `.fluid/widget-build/`, `.fluid/tmp/`, or `.fluid/widget-dist/` when
+a clean retry is needed. Do not delete author source or configuration.
+
+## Publish and inspect
 
 ```bash
+pnpm run widget:publish --dry-run
 pnpm run widget:publish
+pnpm exec fluid widget status
+pnpm exec fluid widget logs
 ```
 
-Build output is written under `.fluid/widget-dist/`. The runtime entry starts the package in a worker with `startWidgetPackage()`, while hosts discover its canonical descriptor through the widget catalog.
-
-## Common failures
-
-| Failure | Fix |
-| --- | --- |
-| Missing droplet UUID | Run `pnpm run widget:link` or pass a droplet option to validate/build/publish. |
-| No source package found | Ensure `fluid.widget.config.ts` exports `widgetPackage` or `widgetPackages` from `manifest.ts`. |
-| Invalid package type | Keep `packageType: "droplet"`. |
-| Invalid package key or widget name | Use URL-safe letters, numbers, dots for package keys, and underscore/hyphen/tilde where allowed. |
-| Invalid version | Use SemVer without build metadata. |
-| Non-serializable metadata | Remove functions, undefined values, Dates, NaN, Infinity, Maps, Sets, and class instances from `propertySchema` and `defaultProps`. |
-| Relative CSS URL rejected | Import CSS into the bundle or remove manual `cssUrls` entries. |
-| Styles are absent after publish | Confirm `styles.css` is reachable from the guarded build import in `src/index.ts`. |
-| Published widget fails | Guard browser-only APIs, remove local-only URLs, and avoid environment variables required at runtime. |
+The dry run builds and validates the upload payload without creating a remote
+version. Actual publication requires authentication and creates an immutable
+Droplet widget version. Increase `version` in `manifest.ts` before publishing a
+new release.
+
+`fluid widget push` first attempts source synchronization and then publication.
+Repository divergence stops before publication. If source synchronization is
+unavailable, the command can continue with publication only. Publication can
+also fail after source synchronization succeeds. Read the phase result before
+retrying; do not assume either phase rolled back the other.
+
+## Network-enabled widgets
+
+Declare `networkAccess` in the widget `uses` array only for public HTTP APIs.
+A portal author must approve each exact package ID, package version, and
+capability version. Updating any value invalidates the previous grant.
+
+Granted fetch uses the worker's native origin. Fluid does not inject cookies,
+credentials, tokens, or headers. The installed runtime API owns the exact
+destination and ambient-API contract. DNS results and redirect destinations
+are not revalidated, so package review remains required. Any portal data given
+to the widget can be sent to an external service. Worker isolation does not
+protect the reputation of `*.fluid.app` from widget behavior.
+
+## Detailed guidance
+
+- `.agents/skills/fluid-widget-authoring/SKILL.md`
+- Installed API contract:
+  `node_modules/@fluid-app/portal-sdk/authoring/widget-api/api.md`
+- Installed command contract:
+  `node_modules/@fluid-app/fluid-cli-widget/authoring/commands.md`

package/templates/default/manifest.ts.template

@@ -45,6 +45,7 @@ export const reviewCarouselWidget = defineWidget({
         key: "eyebrow",
         label: "Eyebrow",
         type: "text",
+        description: "Short text shown above the review title.",
         defaultValue: "Customer stories",
         tab: "content",
         group: "Copy",
@@ -53,10 +54,25 @@ export const reviewCarouselWidget = defineWidget({
         key: "title",
         label: "Title",
         type: "text",
+        description: "Heading displayed above the review carousel.",
         defaultValue: "Reviews that travel with your portal",
         tab: "content",
         group: "Copy",
       },
+      {
+        key: "dataSource",
+        label: "Data Source",
+        type: "dataSource",
+        description: "Configure the review records supplied to the carousel.",
+        targetProps: [
+          {
+            key: "reviews",
+            description: "Review records rendered by the carousel.",
+          },
+        ],
+        tab: "content",
+        group: "Data",
+      },
     ],
   },
 });

package/templates/default/styles.css

@@ -8,18 +8,13 @@
  *     root, and the same widget then looks correct on every portal and in
  *     both light and dark — without a second, hand-written dark palette.
  *
- *   • Every var() carries a fallback. Tokens are absent in some hosts (a bare
- *     dev harness, a preview surface that has not adopted the portal theme),
- *     and a widget must still be legible there rather than collapsing to
- *     unstyled text. The fallback is a floor, never the intended look.
- *
  *   • Selectors stay prefixed with the widget name so nothing leaks into the
  *     host, and nothing here depends on global body styles.
  *
- * Do not reintroduce hard-coded brand colors. A widget that hard-codes
- * #ffffff / #111827 ignores the portal's theme entirely and will look wrong
- * on any portal that is not white-on-near-black. See AGENTS.md → "Theme and
- * styling guidance". */
+ * Do not add fallback brand colors. A missing host theme contract is an
+ * integration error; silently replacing it with widget-owned colors hides the
+ * error and breaks theme compliance. See
+ * .agents/skills/fluid-widget-authoring/references/runtime-and-styling.md. */
 
 .review-carousel {
   font-family: var(
@@ -32,16 +27,15 @@
     "Segoe UI",
     sans-serif
   );
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: var(--radius-xl, 24px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
   padding: 32px;
-  background: var(--card, #ffffff);
-  box-shadow: 0 24px 80px rgb(15 23 42 / 10%);
+  background: var(--card);
 }
 
 .review-carousel__eyebrow {
   margin: 0 0 8px;
-  color: var(--primary, #4f46e5);
+  color: var(--primary);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -50,8 +44,8 @@
 
 .review-carousel__title {
   margin: 0;
-  color: var(--card-foreground, #111827);
-  font-family: var(--font-header, inherit);
+  color: var(--card-foreground);
+  font-family: var(--font-header);
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 0.95;
   letter-spacing: -0.05em;
@@ -59,7 +53,7 @@
 
 .review-carousel__quote {
   margin: 32px 0 0;
-  color: var(--card-foreground, #1f2937);
+  color: var(--card-foreground);
   font-size: clamp(1.25rem, 2vw, 1.75rem);
   line-height: 1.35;
 }
@@ -74,13 +68,13 @@
 
 .review-carousel__author {
   margin: 0;
-  color: var(--card-foreground, #111827);
+  color: var(--card-foreground);
   font-weight: 700;
 }
 
 .review-carousel__role {
   margin: 4px 0 0;
-  color: var(--muted-foreground, #6b7280);
+  color: var(--muted-foreground);
 }
 
 .review-carousel__controls {
@@ -91,21 +85,20 @@
 .review-carousel__button {
   width: 40px;
   height: 40px;
-  border: 1px solid var(--border, #d1d5db);
-  /* Intentionally a pill, not themed — shape is this control's identity. */
-  border-radius: 999px;
-  color: var(--card-foreground, #111827);
-  background: var(--card, #ffffff);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  color: var(--card-foreground);
+  background: var(--card);
   font: inherit;
   cursor: pointer;
 }
 
 .review-carousel__button:hover {
-  border-color: var(--primary, #4f46e5);
-  color: var(--primary, #4f46e5);
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
 .review-carousel__button:focus-visible {
-  outline: 2px solid var(--ring, #4f46e5);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }

package/dist/index-JKSTx5pZ.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-JKSTx5pZ.d.mts","names":[],"sources":["../../../portal/core/src/remote-dom-widget-package.ts","../../widget-tooling/src/internal/widget-package-validation.ts","../../widget-tooling/src/dev-routes.ts"],"mappings":";;;cAAa,kCAAA;AAAA,cACA,yBAAA;AAAA,KAED,aAAA;AAAA,KAEA,SAAA,GAAY,aAAA,YAAyB,SAAA,KAAc,UAAA;AAAA,UAE9C,UAAA;EAAA,UACS,GAAA,WAAA,SAAA;AAAA;AAAA,UAGT,oCAAA;EAAA,SACN,IAAA;EAAA,SACA,OAAA;AAAA;AAAA,UAGM,yBAAA;EAAA,SACN,IAAA;EAAA,SACA,WAAA;EAAA,SACA,WAAA;EAAA,SACA,IAAA;EAAA,SACA,QAAA;EAAA,SACA,cAAA,EAAgB,UAAA;EAAA,SAChB,YAAA,EAAc,UAAA;EAAA,SACd,SAAA;EAAA,SACA,SAAA;EAAA,SACA,aAAA;EAAA,SACA,YAAA,WAAuB,oCAAA;AAAA;;;;;;UAQjB,gCAAA;EAAA,SACN,eAAA,SAAwB,kCAAA;EAAA,SACxB,OAAA,SAAgB,yBAAA;EAAA,SAChB,SAAA;EAAA,SACA,MAAA;EAAA,SACA,OAAA;EAAA,SACA,cAAA;EAAA,SACA,OAAA;EAAA,SACA,SAAA;EAAA,SACA,OAAA,WAAkB,yBAAA;AAAA;;;KCpBjB,sBAAA;AAAA,UAKK,wBAAA;EAAA,SACN,IAAA;EAAA,SACA,OAAA;AAAA;AAAA,UAGM,oBAAA;EAAA,SACN,IAAA;EAAA,SACA,WAAA;EAAA,SACA,WAAA;EAAA,SACA,IAAA;EAAA,SACA,QAAA;EAAA,SACA,cAAA,GAAiB,UAAA;EAAA,SACjB,YAAA,GAAe,UAAA;EAAA,SACf,SAAA;EAAA,SACA,aAAA;EAAA,SACA,SAAA;EAAA,SACA,YAAA,YAAwB,wBAAA;AAAA;AAAA,UAGlB,2BAAA;EAAA,SACN,eAAA;EAAA,SACA,KAAA;EAAA,SACA,eAAA;EAAA,SACA,SAAA;EAAA,SACA,WAAA;EAAA,SACA,OAAA;EAAA,SACA,OAAA,WAAkB,oBAAA;EAAA,SAClB,OAAA;AAAA;AAAA,UAGM,wBAAA,SAAiC,yBAAA;EAAA,SACvC,IAAA;AAAA;AAAA,UA4BM,2BAAA;EAAA,SACN,aAAA,EAAe,2BAAA;EAAA,SACf,UAAA;EAAA,SACA,SAAA;EAAA,SACA,KAAA,EAAO,sBAAA;EAAA,SACP,OAAA;EAAA,SACA,OAAA,WAAkB,wBAAA;AAAA;AAAA,KAGjB,gCAAA;AAAA,UAaK,4BAAA;EAAA,SACN,IAAA,EAAM,gCAAA;EAAA,SACN,OAAA;EAAA,SACA,IAAA;AAAA;;;ADjHX;;;;;AACA;;;;AADA,UEgBiB,2BAAA;EFbjB;EAAA,SEeW,eAAA;;WAEA,gBAAA;EFjBC;EAAA,SEmBD,KAAA,GAAQ,sBAAA;EFjBP;;;;;;;EAAA,SEyBD,eAAA;AAAA;AAAA,iBAGK,oBAAA,CACd,OAAA,GAAS,2BAAA,GACR,MAAA;;;AF5BH;;;;;AAIA;;;;;iBEmFgB,2BAAA,CAAA,GAA+B,UAAA;;;;;;;;;;;;;;;;;;;;;;;;AF3D/C;;;;;;;;;;;;;;;;;;;;;;;;;ACXA;;;;;AAKA;;;;;iBC+JgB,gCAAA,CACd,SAAA,UACA,MAAA;;;;;;iBAsCc,iCAAA,CACd,YAAA,EAAc,QAAA,CAAS,MAAA,oBACvB,MAAA,UACA,KAAA,GAAO,sBAAA,YACG,gCAAA"}