create-coline-app 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-coline-app",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Scaffold, push, and iterate on apps for the Coline App Store.",
   "type": "module",
   "bin": {

package/src/cli.test.ts

@@ -53,10 +53,10 @@ describe("runCreate", () => {
     };
     expect(packageJson.name).toBe("team-crm");
     expect(packageJson.dependencies["@colineapp/sdk"]).toBe("^0.4.0");
-    expect(packageJson.dependencies["@colineapp/ui"]).toBe("^0.4.0");
+    expect(packageJson.dependencies["@colineapp/ui"]).toBe("^0.4.1");
     expect(packageJson.dependencies.react).toBe("^19.0.0");
     expect(packageJson.dependencies["react-dom"]).toBe("^19.0.0");
-    expect(packageJson.devDependencies["create-coline-app"]).toBe("^2.5.0");
+    expect(packageJson.devDependencies["create-coline-app"]).toBe("^2.5.1");
     const main = await readFile(join(dir, "main.tsx"), "utf8");
     expect(main).toContain("ColineAppProvider");
     expect(main).toContain("AppPage");

package/templates/backendless/.agents/skills/coline-ui-design/SKILL.md

@@ -65,3 +65,25 @@ states. No pretend search, dead menus, invented metrics, or static success toast
 
 Run the adjacent `coline-ui-review` skill before finishing. If your model cannot
 inspect images, say so; mechanical checks alone do not establish visual quality.
+
+## Use the shared controls
+
+- Views: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. The raised selection
+  and content motion are built in. Do not handwrite tab buttons or underline tabs.
+- Filters and value pickers: `FilterMenu` with `value`, `onValueChange`,
+  `aria-label`, and `options: [{ value, label }]`. This uses Coline's dropdown,
+  including its checked items, surface and animated highlight. Avoid native
+  selects for these product controls. Use `DropdownMenu` directly for actions.
+- Dialogs: `Dialog` / `DialogContent` include motion and a dismiss button. Use
+  `DialogTitle` and `DialogDescription`; keep content inside the viewport.
+- Buttons: use variants without custom background overrides. Set `type="submit"`
+  explicitly inside forms. Other buttons do not submit forms by default.
+
+The default `PageToolbar` has no top/bottom border. Keep the header simple and
+use whitespace to separate controls from content. Don't draw another border
+around the table or add a background strip to every row.
+
+App-local CSS variables scoped to a page are not available in portalled dialogs
+and menus. Use host tokens for shared controls; put decorative app variables at
+`:root` if both the page and portals need them. Upgrading the UI dependency and
+rebuilding updates shared defaults; copied app CSS continues to override them.

package/templates/backendless/.agents/skills/coline-ui-review/SKILL.md

@@ -37,3 +37,11 @@ Keep preview cleanup scoped. The screenshot command closes its own server. For
 interactive QA, retain the terminal session or exact child-process PID you started
 and stop only that process. Never use broad `pkill -f` or `killall` commands: other
 apps may be running previews at the same time.
+
+Check dialog buttons in both themes: page-scoped CSS variables do not inherit
+into portals. Exercise form submission, Escape/close, tab keyboard navigation,
+and filter menu selection. Capture every actual app view, not only the default
+preview tab. Inspect motion and reduced-motion behavior as well as still images.
+Keep the number of attached images within the model/provider's request limit;
+review a small representative set, compact context before accumulating more,
+and record provider failures separately from app failures.

package/templates/backendless/examples/board.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {
+import { FilterMenu,
   AppPage,
   PageToolbar,
   Input,
@@ -65,10 +65,10 @@ export function Example({ state = "ready" }: { state?: string }) {
   const [items, setItems] = React.useState(state === "empty" ? [] : initial);
   const [search, setSearch] = React.useState("");
   const [failure, setFailure] = React.useState(state === "error" || state === "denied");
-  const moveControls = React.useRef(new Map<string, HTMLSelectElement>());
+  const moveControls = React.useRef(new Map<string, HTMLButtonElement>());
   function move(id: string, stage: string) {
     setItems((current) => current.map((item) => (item.id === id ? { ...item, stage } : item)));
-    // Moving between columns remounts the select. Keep keyboard users on the story.
+    // Moving between columns remounts the trigger. Keep keyboard users on the story.
     requestAnimationFrame(() => moveControls.current.get(id)?.focus());
   }
   function add() {
@@ -147,20 +147,15 @@ export function Example({ state = "ready" }: { state?: string }) {
                     <p className="example-description">{item.description}</p>
                     <label className="example-field">
                       Move to
-                      <select
-                        className="example-select"
+                      <FilterMenu
+                        className="example-filter"
                         aria-label={`Move ${item.title} to`}
                         value={item.stage}
                         ref={(element) => {
                           if (element) moveControls.current.set(item.id, element);
                           else moveControls.current.delete(item.id);
                         }}
-                        onChange={(event) => move(item.id, event.currentTarget.value)}
-                      >
-                        {stages.map((value) => (
-                          <option key={value}>{value}</option>
-                        ))}
-                      </select>
+                        onValueChange={(value) => move(item.id, value)} options={stages.map((value) => ({ value, label: value }))} />
                     </label>
                   </BoardCard>
                 ))}

package/templates/backendless/examples/settings.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {
+import { FilterMenu,
   AppPage,
   SettingsSection,
   Input,
@@ -80,15 +80,11 @@ export function Example({ state = "ready" }: { state?: string }) {
             </label>
             <label className="example-field">
               Frequency
-              <select
-                className="example-select"
+              <FilterMenu
+                className="example-filter"
                 disabled={!form.digest}
                 value={form.cadence}
-                onChange={(event) => setForm({ ...form, cadence: event.target.value })}
-              >
-                <option>Weekly</option>
-                <option>Monthly</option>
-              </select>
+                onValueChange={(value) => setForm({ ...form, cadence: value })} aria-label="Frequency" options={["Weekly", "Monthly"].map((value) => ({ value, label: value }))} />
             </label>
           </SettingsSection>
           <div className="flex items-center justify-end gap-3 py-6">

package/templates/backendless/examples/triage.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {
+import { FilterMenu,
   AppPage,
   PageToolbar,
   Input,
@@ -123,16 +123,11 @@ export function Example({ state = "ready" }: { state?: string }) {
           value={search}
           onChange={(event) => setSearch(event.target.value)}
         />
-        <select
+        <FilterMenu
           aria-label="Filter by status"
-          className="example-select"
+          className="example-filter"
           value={status}
-          onChange={(event) => setStatus(event.target.value)}
-        >
-          {["All requests", "Needs review", "In progress", "Planned"].map((value) => (
-            <option key={value}>{value}</option>
-          ))}
-        </select>
+          onValueChange={(value) => setStatus(value)} options={["All requests", "Needs review", "In progress", "Planned"].map((value) => ({ value, label: value }))} />
         <span className="example-meta">{visible.length} requests</span>
       </PageToolbar>
       {state === "loading" ? (
@@ -223,23 +218,18 @@ export function Example({ state = "ready" }: { state?: string }) {
                   <p className="example-description">{detail.detail}</p>
                   <label className="example-field">
                     Status
-                    <select
-                      className="example-select"
+                    <FilterMenu
+                      className="example-filter"
                       value={detail.status}
-                      onChange={(event) =>
+                      onValueChange={(value) =>
                         setRecords((current) =>
                           current.map((record) =>
                             record.id === detail.id
-                              ? { ...record, status: event.target.value }
+                              ? { ...record, status: value }
                               : record,
                           ),
                         )
-                      }
-                    >
-                      {["Needs review", "In progress", "Planned"].map((value) => (
-                        <option key={value}>{value}</option>
-                      ))}
-                    </select>
+                      } aria-label="Status" options={["Needs review", "In progress", "Planned"].map((value) => ({ value, label: value }))} />
                   </label>
                   <div className="example-meta">{detail.category}</div>
                 </DetailPanel>

package/templates/backendless/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@colineapp/sdk": "^0.4.0",
-    "@colineapp/ui": "^0.4.0",
+    "@colineapp/ui": "^0.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.3.6"
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "create-coline-app": "^2.5.0",
+    "create-coline-app": "^2.5.1",
     "typescript": "^5.8.2",
     "vitest": "^3.2.4",
     "tailwindcss": "^4.3.0",