softr-vibe-coding 2.14.4 → 2.15.0

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this skill are documented here. Versions follow [Semantic
 
 Entries from 1.3.1 onward are generated automatically from git commit subjects between version bumps (see `.github/workflows/publish.yml`). Entries before 1.3.1 were backfilled by hand from the existing commit history.
 
+## [2.15.0] - 2026-10-07
+- Release 2.15.0
+- Add the brand date picker reference
+
+## [2.14.5] - 2026-10-07
+- Release 2.14.5
+- Document condition-based user groups over the MCP
+
 ## [2.14.4] - 2026-10-07
 - Release 2.14.4
 - Add the Safari focus rule to the Combo reference

package/README.md

@@ -208,7 +208,12 @@ softr-vibe-coding/
 │   │                                 # alone, DATETIME create shape, offset paging;
 │   │                                 # OAuth grant per ticked workspace, email
 │   │                                 # senders, formulas fixed at creation, loop
-│   │                                 # counter, workflow time zone and publish state
+│   │                                 # counter, workflow time zone and publish state;
+│   │                                 # Oct 7 2026: condition-based user groups over
+│   │                                 # MCP (subject USER:<field id>, not USER:::),
+│   │                                 # list_users omits conditional membership,
+│   │                                 # reading userGroups in the preview iframe,
+│   │                                 # what __softr_current_user carries
 │   ├── browser-checks.md             # Checking a pushed block in a browser with
 │   │                                 # the agent-browser CLI (ask before installing):
 │   │                                 # preview cookie, shadow-DOM refs grepped in the
@@ -256,16 +261,25 @@ softr-vibe-coding/
 │   │                                 # Imports, hook signatures, mutation shapes,
 │   │                                 # field mapping, component skeleton,
 │   │                                 # Softr navigation variables, container queries
-│   └── searchable-dropdown.md        # THE dropdown pattern for blocks
-│                                     # why native <select> and shadcn <Select> both
-│                                     # break in the shadow DOM, composedPath()
-│                                     # click-outside, A-Z inside the component,
-│                                     # multi-token filter, searchable BY DEFAULT
-│                                     # (bare = click-only; searchable={false} only
-│                                     # for a fixed enum being set — Sep 10 2026),
-│                                     # overflow-clipping ancestors: never clip a cell
-│                                     # holding a Combo, clip-aware drop-up + list
-│                                     # height, list-only scrolling (Sep 30 2026)
+│   ├── searchable-dropdown.md        # THE dropdown pattern for blocks
+│   │                                 # why native <select> and shadcn <Select> both
+│   │                                 # break in the shadow DOM, composedPath()
+│   │                                 # click-outside, A-Z inside the component,
+│   │                                 # multi-token filter, searchable BY DEFAULT
+│   │                                 # (bare = click-only; searchable={false} only
+│   │                                 # for a fixed enum being set — Sep 10 2026),
+│   │                                 # overflow-clipping ancestors: never clip a cell
+│   │                                 # holding a Combo, clip-aware drop-up + list
+│   │                                 # height, list-only scrolling (Sep 30 2026)
+│   └── date-picker.md                # THE date field for blocks: no native
+│                                     # <input type="date"> (its calendar is browser
+│                                     # UI no CSS reaches); the DatePicker kit (API +
+│                                     # full component), the kit-between-markers
+│                                     # convention + sync script, rollout lessons
+│                                     # (clipping, short modal bodies, textClass for
+│                                     # named containers, Escape, backdrop clicks,
+│                                     # deferred focus fix-up, Safari focus,
+│                                     # "yyyy-MM-dd" values), verification (Oct 7 2026)
 │
 ├── tools/                            # Bundled CLI scripts (run, not read)
 │   ├── get-airtable-base             # Full Airtable base schema export (bash + jq)

package/SKILL.md

@@ -95,6 +95,7 @@ You generate complete, production-ready Softr Vibe Coding blocks as TypeScript R
    - Sequential multi-row saves use `await hook.mutateAsync(...)` per row, in order, with stop-on-failure + retry state — `mutateAsync` is fully supported on the current platform (verified 2026-08-25; the old ".mutate() only" Action-parser rule is gone — see [datasources/writing.md](datasources/writing.md)). Independent writes to **different tables** may run in parallel via `Promise.all`; drag/reassign UIs should be optimistic with an Undo toast — see [writing.md → Parallel writes across tables](datasources/writing.md#parallel-writes-across-tables-the-one-sanctioned-parallelism)
    - No hardcoded domains in links -- use relative paths (`/page?recordId=...`); same-page anchors written relative too (`/#section`)
    - **No `<select>` and no shadcn `<Select>`** — both break inside a block's shadow DOM (native hands the list to the OS; shadcn portals outside the shadow root and arrives unstyled). Use the `Combo` pattern in [references/searchable-dropdown.md](references/searchable-dropdown.md) — **searchable by default** for every framed filter or form field whatever the option count; `bare` inline editors are click-only; `searchable={false}` only on a short fixed enum the user is setting (a status, a location, a group-by). Opening a Combo moves focus into it (the search box, or the trigger on a click-only list), because Safari does not focus a clicked button. Escape on an open list closes only the list ([Move focus into the Combo when it opens](references/searchable-dropdown.md#move-focus-into-the-combo-when-it-opens))
+   - **No native date field** — no `<input type="date">`, `type="datetime-local"` or `type="month"` in a branded block: the browser draws its calendar pop-up, and no CSS reaches it. Use the module-scope `DatePicker` kit in [references/date-picker.md](references/date-picker.md), pasted verbatim between its marker lines (block-specific code, `textClass` included, stays outside them). Values stay `"yyyy-MM-dd"` strings, compared as strings. Same rules as the Combo: nothing between the field and its scroller clips, and Escape on an open calendar closes only the calendar
    - App page with Softr navigation: **no shadcn `<Dialog>` / `<Sheet>`** — its overlay is z-50, under Softr's top bar (z-index 800), and it portals out of the shadow root. Use the in-block modal (`fixed inset-0 z-[1000]`, rendered as a sibling of the block's `@container` wrapper, with its own Escape, focus trap, scroll lock and focus return) in [references/common-patterns.md → A modal above Softr's bars](references/common-patterns.md#a-modal-above-softrs-bars) (measured live 2026-10-06)
    - No clipping class (`overflow-hidden`, `overflow-*-auto`, `truncate`, `line-clamp-*`) on any element that contains a `Combo` — its panel is absolutely positioned in local DOM, so a clipping `<td>` cuts the menu to the row's height; bound an over-wide chip at the chip (`min-w-0 truncate`), and never `scrollIntoView` inside the panel. See [references/searchable-dropdown.md](references/searchable-dropdown.md#the-four-things-that-will-bite-you), item 4
    - Any **Print** control opens a **new window with its own document** — `window.open` straight from the click, an escaped standalone HTML printout written into it, `print()` once its stylesheets, fonts and images are in, the button disabled until the data has fully loaded. No `window.print()` on the Softr page, no in-page print view (Hard Constraint 28). See [references/printing.md](references/printing.md)
@@ -184,6 +185,7 @@ For advanced patterns beyond data fetching, load the relevant reference when the
 | Debugging a broken block, checking patterns before delivery, full violation catalog | [references/anti-patterns.md](references/anti-patterns.md) |
 | Quick syntax check — import paths, hook signatures, mutation call shapes, field mapping, Softr navigation variables (`--nav-height` etc.), container-query syntax | [references/quick-reference.md](references/quick-reference.md) |
 | Any **dropdown / picker / combobox** in a block — why shadcn `<Select>` and native `<select>` both fail inside the shadow DOM, the `composedPath()` click-outside, sorting A→Z inside the component, multi-token filtering, **searchable by default** regardless of option count (`bare` inline editors click-only; `searchable={false}` only for a short fixed enum being set), the `bare` inline-editor variant, focus moved into the Combo on open (Safari does not focus a clicked button) and Escape that closes only the list | [references/searchable-dropdown.md](references/searchable-dropdown.md) |
+| Any **date field** in a block — why `<input type="date">` can't carry a brand (its calendar is browser UI), the `DatePicker` kit (API, the full component), the kit-between-markers convention with a sync script for shared components, lessons from a 12-block rollout (clipping, short modal bodies, named containers and `textClass`, Escape, backdrop clicks, a modal's focus fix-up, Safari focus, `"yyyy-MM-dd"` values) and how to verify a block | [references/date-picker.md](references/date-picker.md) |
 | **Printing** anything from a block — always a new window/tab holding its own document, never `window.print()` on the page or an in-page print view: the escaped HTML builder, pop-up-safe opening from the click, print-when-ready (stylesheets, fonts and images, capped), Print disabled until the data has loaded, the `?print=1` deep link from another page, paper layout (shared `<colgroup>`, `vertical-align: middle`, tick boxes) | [references/printing.md](references/printing.md) |
 | Small reusable patterns — `localStorage` cross-page state, clipboard copy button, measuring the block's own width (not the window's), clearing Softr's sticky top bar and phone tab bar, an in-block modal above Softr's bars (instead of shadcn `Dialog`) | [references/common-patterns.md](references/common-patterns.md) |
 | Writing Airtable Automation Scripts / Scripting Extension scripts / Airtable formulas — companion to Softr blocks for cross-table cascades and computed values | [references/airtable-automations.md](references/airtable-automations.md) |

package/datasources/hubspot.md

@@ -452,7 +452,10 @@ page ([details](multi-datasource.md#one-connection--one-read-payload-the-union-o
   HubSpot: anyone who can edit that property there can grant the group's access.
 - **`application_list_users` is not a membership check.** It showed `userGroups: []` for every
   user, including members of condition groups that demonstrably applied (verified 2026-10-05).
-  Test membership by what the user can reach, e.g. preview as them against a group-gated block.
+  Test membership by what the user can reach, e.g. preview as them against a group-gated block, or
+  read their groups in the preview
+  ([how](../references/softr-mcp.md#testing-as-any-app-user-without-logins--the-preview-as-switcher);
+  same result on Softr Database, 2026-10-07).
 
 ## Audit trail
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softr-vibe-coding",
-  "version": "2.14.4",
+  "version": "2.15.0",
   "description": "Claude Code skill for generating production-ready Softr Vibe Coding blocks (JSX). Installs into ~/.claude/skills/ and auto-updates on each Claude Code session.",
   "bin": {
     "softr-vibe-coding": "bin/cli.js"

package/references/browser-checks.md

@@ -111,6 +111,10 @@ i.dispatchEvent(new Event('input', { bubbles: true }));
 i.dispatchEvent(new Event('change', { bubbles: true }));
 ```
 
+A block that uses the brand `DatePicker` ([date-picker.md](date-picker.md)) has no date input: the
+field is a button with a ref in `-i`. Click it, then click the day by its ref; each day is a button
+named like `Thursday, October 15, 2026`.
+
 ### 4. Block saves before any click, and prove it
 
 The preview writes to the live data