@sewadah/selaras 0.3.1 → 0.4.0

package/dist/runtime/utils/ui.js

@@ -53,6 +53,13 @@ export function useRootProps(slotFn, override, options) {
     resolveSlot(slotFn(), withFallthroughClass(options?.includeClass === false ? void 0 : fallthroughClass.value, override()))
   ));
 }
+export function useFallthroughProps(override) {
+  const { fallthroughClass, attrsWithoutClass } = useRootFallthrough();
+  return computed(() => mergeProps(
+    attrsWithoutClass.value,
+    resolveSlot((options) => options?.class ?? "", withFallthroughClass(fallthroughClass.value, override?.()))
+  ));
+}
 export function useFallthroughAttrs(select) {
   const attrs = useAttrs();
   return computed(() => Object.fromEntries(
@@ -78,7 +85,53 @@ export function useComponentTheme(key, base) {
       result = tv({ extend: result, ...globalOverride });
     for (const override of collectThemeChain(themeContext?.value, (c) => c.ui, key))
       result = tv({ extend: result, ...override });
-    return result;
+    return withVariantFallback(result, key);
+  });
+}
+const warnedThemeValues = /* @__PURE__ */ new Set();
+export function withVariantFallback(theme, key) {
+  return new Proxy(theme, {
+    apply(target, thisArg, args) {
+      const supplied = args[0];
+      if (!supplied || typeof supplied !== "object")
+        return Reflect.apply(target, thisArg, args);
+      let resolved;
+      for (const axis of ["variant", "size"]) {
+        const value = supplied[axis];
+        if (value === void 0)
+          continue;
+        const values = target.variants?.[axis];
+        if (!values)
+          continue;
+        const accepted = new Set(Object.keys(values));
+        for (const compound of target.compoundVariants ?? []) {
+          const condition = compound[axis];
+          if (Array.isArray(condition)) {
+            for (const entry of condition)
+              accepted.add(String(entry));
+          } else if (condition !== void 0) {
+            accepted.add(String(condition));
+          }
+        }
+        if (accepted.has(String(value)))
+          continue;
+        const defaults = target.defaultVariants;
+        const fallback = defaults?.[axis];
+        resolved ??= { ...supplied };
+        resolved[axis] = fallback;
+        if (import.meta.dev) {
+          const signature = `${key}:${axis}:${String(value)}`;
+          if (!warnedThemeValues.has(signature)) {
+            warnedThemeValues.add(signature);
+            const component = `${key[0]?.toUpperCase() ?? ""}${key.slice(1)}`;
+            const values2 = [...accepted].join(", ");
+            const fallbackMessage = fallback === void 0 ? "the default styling" : `"${String(fallback)}"`;
+            console.warn(`[Selaras ${component}] Unknown ${axis} "${String(value)}"; using ${fallbackMessage}. Valid values: ${values2}.`);
+          }
+        }
+      }
+      return Reflect.apply(target, thisArg, resolved ? [resolved, ...args.slice(1)] : args);
+    }
   });
 }
 export function useThemeProps(key) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -45,6 +45,7 @@
       "import": "./dist/runtime/theme-api.js"
     },
     "./components/DrawerRenderer*": {},
+    "./components/ConfirmRenderer*": {},
     "./components/ModalRenderer*": {},
     "./components/NavigationMenuAccordionItem*": {},
     "./components/NavigationMenuFlyoutList*": {},
@@ -76,6 +77,7 @@
         "./dist/runtime/theme-api.d.ts"
       ],
       "components/DrawerRenderer*": [],
+      "components/ConfirmRenderer*": [],
       "components/ModalRenderer*": [],
       "components/NavigationMenuAccordionItem*": [],
       "components/NavigationMenuFlyoutList*": [],
@@ -86,8 +88,13 @@
       ]
     }
   },
+  "bin": {
+    "selaras-mcp": "agent/mcp.mjs"
+  },
   "files": [
-    "dist"
+    "agent",
+    "dist",
+    "skills"
   ],
   "engines": {
     "node": "^22.19.0 || ^24.11.0 || >=26.0.0"
@@ -98,18 +105,16 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "bun run docs:dev",
+    "dev": "bun run docs:prepare && nuxt dev docs",
     "dev:build": "bun run docs:build",
     "dev:generate": "bun run docs:generate",
     "dev:preview": "bunx nuxt preview docs",
     "dev:prepare": "bun run docs:prepare",
     "docs:build": "nuxt build docs",
-    "docs:dev": "bun run docs:prepare && nuxt dev docs",
+    "docs:dev": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview && nuxt dev packages/docs/preview",
     "docs:generate": "nuxt generate docs",
     "docs:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare docs && bun run scripts/sync-workspace-dist.mjs",
     "docs:types": "cd docs && vue-tsc --noEmit",
-    "docs-template:dev": "bun run docs-template:prepare && nuxt dev packages/docs/preview",
-    "docs-template:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview",
     "release": "bun run release:both",
     "release:both": "bun run release:selaras && bun run release:docs",
     "release:selaras": "bun run lint && bun run test && (if [ -n \"$RELEASE_VERSION\" ]; then npx changelogen --bump -r \"$RELEASE_VERSION\"; elif [ \"${RELEASE_BUMP:-auto}\" = \"auto\" ]; then npx changelogen --bump; else npx changelogen --bump \"--$RELEASE_BUMP\"; fi) && bun run test:release && npm publish --access public && bash scripts/tag-and-push-release.sh selaras && changelogen gh release",
@@ -124,7 +129,9 @@
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && bun run docs:types",
     "tokens:check": "node scripts/generate-default-colors.mjs --check",
-    "tokens:generate": "node scripts/generate-default-colors.mjs"
+    "tokens:generate": "node scripts/generate-default-colors.mjs",
+    "agent:build": "node scripts/build-agent-catalog.mjs",
+    "test:agent": "node scripts/test-agent-support.mjs"
   },
   "peerDependencies": {
     "nuxt": "^4.5.2",
@@ -132,6 +139,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.0",
+    "@modelcontextprotocol/sdk": "^1.32.0",
     "@nuxt/icon": "^1.10.3",
     "@nuxt/kit": "^4.5.2",
     "@nuxtjs/color-mode": "^4.0.1",
@@ -143,7 +151,8 @@
     "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.6.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.3.0",
@@ -162,6 +171,7 @@
     "typescript": "^6.0.3",
     "vee-validate": "4",
     "vitest": "^4.1.10",
-    "vue-tsc": "^3.3.9"
+    "vue-tsc": "^3.3.9",
+    "yaml": "^2.9.0"
   }
 }

package/skills/selaras/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: selaras
+description: Build and customize Vue and Nuxt interfaces with @sewadah/selaras. Use when a project uses Selaras or the user asks to adopt it, including component selection, forms, overlays, theming, icons, localization, and adaptive interfaces.
+---
+
+# Selaras
+
+Use the existing Selaras catalog to compose the requested interface. Check documentation before assuming a component is missing or inventing its props. Preserve the application's design and the user's scope.
+
+## Find the right component
+
+If a Selaras MCP connection is available, start with `list_components` or `search_documentation`, then use `get_documentation` and `get_example` for matching APIs and examples. Its offline catalog follows the installed package version. Tools retrieve documentation; use the user's requirements to decide which components fit. Do not assume a missing MCP connection prevents the task.
+
+Without MCP, read the [documentation index](https://sewadahapp.github.io/selaras/llms.txt), then retrieve the relevant Markdown guides through its links. Each guide includes component contracts and Vue example source. Prefer targeted pages over loading `llms-full.txt` for every task.
+
+If the project has Selaras installed, inspect its package version and existing Nuxt configuration first. Published web documentation may describe a newer version; confirm uncertain APIs against installed public types. Component names below use the default `S` prefix; the application can configure another prefix.
+
+Look beyond Button and Input when choosing components:
+
+- Forms: Select, Autocomplete, InputNumber, DatePicker, ColorPicker, Checkbox, Switch, RadioGroup, Form, and FormField.
+- Actions and search: Dropdown, ContextMenu, NavigationMenu, CommandPalette, Kbd, and the hotkey directive.
+- Data and feedback: Table, Timeline, Tree, Pagination, Alert, Toast, and Skeleton.
+- Overlays: Modal, AlertDialog, Drawer, Slideover, Popover, and Tooltip; inspect programmatic composables when the interaction calls for them.
+- Layout and content: App, Container, Header, Card, Tabs, Accordion, ScrollArea, Dashboard components, and documentation composites.
+
+These are discovery hints, not substitute API definitions. Read the matching catalog entry and a relevant example before implementing. Build a custom component when documented components do not fit the requirement.
+
+## Integration and customization
+
+For a new integration, read [Installation](https://sewadahapp.github.io/selaras/raw/overview/getting-started/installation.md) and [Nuxt configuration](https://sewadahapp.github.io/selaras/raw/overview/getting-started/nuxt-configuration.md). Existing projects may already have providers and styles configured; inspect before changing them.
+
+- `SApp` supplies shared providers. Toast and CommandPalette still require the documented mounted components.
+- Use supported props for behavior and appearance, slots for custom content, `class` for the root, and `ui` for documented component parts.
+- Read [Theming](https://sewadahapp.github.io/selaras/raw/overview/theming/overview.md) for CSS tokens, global `app.config.selaras.ui` and defaults, or scoped `STheme`. Do not invent slot names or assume every prop has a global default.
+- Read [Icons](https://sewadahapp.github.io/selaras/raw/overview/getting-started/icons.md) for Nuxt Icon loading and configuration. Internal icon purposes use `app.config.selaras.icons`; explicitly supplied icons remain local.
+- Read [Messages](https://sewadahapp.github.io/selaras/raw/overview/getting-started/messages.md) for internal text and accessible labels. The formatting locale and translated messages are separate settings.
+- Read [Color modes](https://sewadahapp.github.io/selaras/raw/overview/theming/color-modes.md) for light, dark, and system preferences. Documentation showcase themes are not automatically installed application presets.
+- Read [Adaptive interfaces](https://sewadahapp.github.io/selaras/raw/overview/getting-started/adaptive-interfaces.md) before opting supported controls into mobile modal presentation. `adaptive` is opt-in, not a universal component prop.
+
+Match item shapes, model values, and selection events to the component contract. Preserve accessible names, keyboard behavior, focus restoration, and form associations when customizing slots. Validate interactions relevant to the change in the project's normal checks, including mobile presentation when enabled.

package/skills/selaras/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: Selaras
+  short_description: Build Nuxt interfaces with Selaras components
+  default_prompt: Use $selaras to build this interface with documented components and customization APIs.