softr-vibe-coding 2.14.2 → 2.14.4

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.14.4] - 2026-10-07
+- Release 2.14.4
+- Add the Safari focus rule to the Combo reference
+
+## [2.14.3] - 2026-10-07
+- Release 2.14.3
+- Document that the REST API proxy is not access control
+- Run the publish workflow one at a time and pass a duplicate release run
+
 ## [2.14.2] - 2026-10-06
 - Release 2.14.2
 - Check every relative Markdown link in CI before publishing

package/SKILL.md

@@ -94,7 +94,7 @@ You generate complete, production-ready Softr Vibe Coding blocks as TypeScript R
    - `useRecordUpdate` payload is `{ recordId, fields: { ... } }` — nested. `useRecordCreate` payload is **flat** (no `fields` wrapper). The two shapes are asymmetric by design (verified live 2026-08-25)
    - 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)
+   - **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))
    - 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)
@@ -183,7 +183,7 @@ For advanced patterns beyond data fetching, load the relevant reference when the
 | Embedding third-party libraries with their own CSS (Leaflet, Mapbox, TinyMCE, Quill, FullCalendar) | [references/advanced-integrations.md](references/advanced-integrations.md) |
 | 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 | [references/searchable-dropdown.md](references/searchable-dropdown.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) |
 | **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

@@ -287,7 +287,9 @@ to set a client's links server-side.
 
 - **The step:** a **Run custom code** step (`CUSTOM_CODE` v1.2.0) with the HubSpot integration
   attached. `fetch()` calls to `api.hubapi.com` then carry that integration's credentials, with no
-  token in the code.
+  token in the code. Those credentials carry only the scopes granted when HubSpot was connected.
+  A call to an object Softr's connector doesn't support yet may get HubSpot's 403 (Softr engineer,
+  2026-10-07; the scope list is not published).
 - **Plan and testing:** the step needs a paid Softr plan, and it is `REAL_ONLY`, so a test run
   writes for real.
 - **Limits:** about 2 minutes per run, and up to 20 fetches per second.
@@ -310,7 +312,9 @@ to set a client's links server-side.
   HubSpot itself. The cost is trigger latency (unknown, see below) and a run for every new ticket.
 - **Why the block can't do it itself:** `useProxyFetch` is documented for REST API sources only.
   Call API authenticates only REST_API integrations and needs Professional or higher, so it would
-  need a HubSpot private-app token stored as a REST integration (inferred).
+  need a HubSpot private-app token stored as a REST integration (inferred). Any user who can call
+  the proxy could then use that token for any path on HubSpot's API
+  ([why](rest-api.md#the-proxy-is-not-access-control)).
 - **HubSpot-side route:** a HubSpot workflow's "Create associations" action needs Pro or
   Enterprise, and ticket-based workflows need Service Hub Pro or Enterprise (documented). It
   matches records by exact, case-sensitive property value.
@@ -322,6 +326,12 @@ request parameter the caller controls, not access control. See
 [../references/softr-mcp.md](../references/softr-mcp.md#what-the-server-enforces-on-a-blocks-data-endpoints)
 (verified 2026-09-18 on Softr Database; on HubSpot 2026-10-05, below).
 
+A **REST API source pointed at HubSpot** (`useProxyFetch` with a private-app token) has no row gate
+at all. The proxy forwards any path on `api.hubapi.com` that the browser sends (Softr engineers,
+2026-10-07); see [rest-api.md](rest-api.md#the-proxy-is-not-access-control). Serve client-facing
+rows from the native connection. Objects it lacks, such as conversations and feedback submissions,
+need one of the server-side routes listed there.
+
 The **block's Visibility** is enforced on the same endpoints, all or nothing (verified 2026-10-05 on
 HubSpot). A block gated to an "Account managers" condition group returned every deal and ticket to
 members from connections with no Source condition, and 403 on list and by-id to clients, a

package/datasources/rest-api.md

@@ -98,10 +98,47 @@ export default function Block() {
 
 - `useProxyFetch` returns a fetch function that routes requests through Softr's proxy
 - Softr injects the authentication headers configured in the data source automatically
-- API keys are **never exposed** in client-side code
+- API keys are **never exposed** in client-side code. That protects the key, not the data: see [The proxy is not access control](#the-proxy-is-not-access-control)
 - The response is the raw API JSON -- access fields directly (e.g., `item.name`, not `record.fields.name`)
 - **The proxy only supports text payloads** -- streams, `FormData`, and file uploads won't work. Serialize request bodies as JSON/text.
 
+### The proxy is not access control
+
+*Softr engineers, asked 2026-10-07; not tested here.* The proxy does two things:
+
+- It sends requests only to the **origin** set when the REST API data source was created, e.g.
+  `https://api.hubapi.com`, so they can't be redirected to another host.
+- It adds the data source's stored secrets on Softr's server, so the token never reaches the browser.
+
+It checks nothing else. The path, query, method and body come from the browser. A user can copy a
+proxy request from DevTools' Network tab, change the endpoint or record id, and resend it. Softr
+forwards it as is, and its engineers advise against relying on the proxy for security. So:
+
+- **Anyone who can call the proxy can read everything the token can read on that origin.**
+  Filtering in block code, or a URL built from `useCurrentUser().email`, decides what the block
+  shows, not what a user can fetch.
+- **Source conditions don't apply.** The connection's record filters cover the record hooks
+  (`useRecords` and the rest), not `proxyFetch`. This came from a less certain answer in the same
+  thread.
+- **Block Visibility and page permissions may not apply either.** That same answer said "only
+  the record hooks" for them too, and it is unconfirmed. Until it is tested, assume any logged-in
+  user can call the proxy.
+- **`{LOGGED_IN_USER: …}` placeholders don't help.** They are reportedly filled in on the server,
+  but a replayed request can simply leave the placeholder out.
+- **The token's scopes set the blast radius.** Grant only the narrowest scopes the block needs.
+
+Per-user data needs a gate on the server instead:
+
+1. **A native connector with a logged-in-user Source condition.** This is verified on Softr
+   Database and HubSpot; see
+   [softr-mcp.md](../references/softr-mcp.md#what-the-server-enforces-on-a-blocks-data-endpoints).
+   Softr's engineers asked first why a builder would pick REST over the native integration.
+2. **For data no native connector covers**, copy it with a workflow into a table that a native
+   connector reads, such as a Softr Database table keyed by the user's email, and gate that table
+   with a Source condition. This design is inferred, not built.
+3. **Otherwise keep REST proxy blocks to data that everyone who can reach the page may see**, or
+   to internal tools whose users are trusted with everything the token reads.
+
 ### Multiple datasources
 
 When the block has more than one datasource, `useProxyFetch` needs to know which source to route through. Unlike the record hooks (which take a `from:` option), it takes the alias as its **function argument**:
@@ -184,6 +221,7 @@ fetch("https://workflows-api.softr.io/v1/workflows/WORKFLOW_ID/executions/EXECUT
 | Pagination | Built-in `fetchNextPage` | Manual via URL params + cursor |
 | Filtering | `q.text()`, `q.number()`, etc. | API query params or client-side |
 | Auth | Handled by Softr | Proxied through Softr (key hidden) |
+| Per-user rows | Source conditions, enforced on the server | None: the browser picks the URL ([why](#the-proxy-is-not-access-control)) |
 | Mutations | `useRecordCreate/Update/Delete` | Direct `fetch()` or `proxyFetch()` |
 
 ## Limitations

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softr-vibe-coding",
-  "version": "2.14.2",
+  "version": "2.14.4",
   "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/anti-patterns.md

@@ -14,6 +14,7 @@ Run through this catalog before delivering any block. Every row is a violation o
 | `useRecords` with REST API source | Use `useProxyFetch` + `useQuery` |
 | `q.select()` for REST API fields | Access raw API response directly |
 | Hardcoding API keys for connected API | Use `useProxyFetch` -- key stays server-side |
+| Limiting a REST API block to the user's own records by building the `proxyFetch` URL from `useCurrentUser()` or by filtering the response | **This is not access control.** The proxy forwards any path on the source's origin with the stored token, and a user can replay the request from DevTools with another endpoint or record id (Softr engineers, 2026-10-07). Per-user rows need a native connector with a Source condition. See [datasources/rest-api.md](../datasources/rest-api.md#the-proxy-is-not-access-control) |
 | Using `q.select({})` to dump all fields on Softr Database | Returns record IDs with empty `fields: {}`. Look up field IDs in Studio's Data tab, or use the Softr DB REST API with `fieldNames=true` |
 | Building an invisible helper block + `window` globals just to read a second table | A block can connect to **multiple data sources**. Declare them with `datasource.define({ alias: "uuid" })` and pass `from: ds.alias` on every hook. One block instead of two, no page-order dependency, no mount-timing race. See [datasources/multi-datasource.md](../datasources/multi-datasource.md). Helper blocks remain correct for genuinely cross-*block* jobs (triggering another block, sharing computed state) — just not for plain multi-table reads |
 | Omitting `from:` on a hook when the block has more than one datasource | Throws at runtime. `from:` is optional ONLY when exactly one source is connected — then hooks default to it. Applies to `useRecords`, `useRecord`, `useLinkedRecords`, `useFieldOptions`, `useMetric`, `useChartData`, `useRecordCreate`, `useRecordUpdate`, `useRecordDelete`. NOT to `useUpload` / `useCurrentRecordId`, which are app-level. `useProxyFetch` has the same multi-datasource requirement but takes the alias as its **argument** — `useProxyFetch(ds.store)` — not as `from:` |

package/references/searchable-dropdown.md

@@ -329,6 +329,58 @@ the optional *create* row — so arrow-key navigation has one index to walk. Cla
 index (`Math.min(active, rows.length - 1)`): filtering shrinks the list under the highlight.
 Keep the highlighted row in view by scrolling the list only (rule 3 of item 4 above).
 
+## Move focus into the Combo when it opens
+
+When the panel opens, the Combo moves focus into itself: to the search box if it has one,
+otherwise to the trigger. Do not count on the click to do it. **Safari (macOS and iPadOS) and
+Firefox on macOS do not focus a `<button>` when it is clicked** (Chrome does), so on a click-only
+Combo focus stays in whatever field had it, usually the text input above it in a form. Two things then
+break at once: the keys the user types land in that input, and Escape goes past the Combo to the
+next listener. Inside the [in-block modal](common-patterns.md#a-modal-above-softrs-bars), that
+listener closes the modal or asks to discard the typed input, with the list still open.
+
+```jsx
+useEffect(
+  function () {
+    if (!open) return;
+    if (searchable) {
+      if (inputRef.current) inputRef.current.focus({ preventScroll: true });
+    } else if (triggerRef.current) {
+      triggerRef.current.focus({ preventScroll: true });
+    }
+  },
+  [open, searchable]
+);
+```
+
+A click-only list is then driven from the trigger: ↑ ↓ move the highlight, Enter picks, Escape
+closes. Give that trigger `role="combobox"` with `aria-activedescendant` pointing at the
+highlighted row, because `aria-activedescendant` is not valid on a plain button.
+`preventScroll` is there for the same reason as on the search box (rule 3 of item 4).
+
+**Escape closes the list and nothing else.** While the list is open, the Combo's keydown
+handler calls `e.preventDefault()` and `e.stopPropagation()`, closes the list and puts focus
+back on the trigger. React's handler on the Combo root runs inside the shadow root, before the
+event reaches `document`. The in-block modal's document listener returns early on
+`e.defaultPrevented`, so the modal stays open and clean. Either guard alone covers that modal,
+but keep both: another document-level listener may not check `defaultPrevented`.
+
+**To reproduce Safari in any browser,** focus the text field before the Combo, call `.click()`
+on the trigger from the console (a synthetic click does not move focus either), and read
+`activeElement` on the block's shadow root. It must be the search box or the trigger. Test
+typing with real key events. A browser-automation "type" action that inserts text without key
+events drops it into the last focused text field, which makes a correct Combo look broken.
+
+**The incident: Lane County Diaper Bank, 2026-10-07.** A browser check reported that in B4's New
+partner modal, letters typed after opening the click-only "Partner type" list went into
+Organization name, and Escape then showed the modal's "Discard your changes?" strip while the
+list stayed open. Part of that report came from the test tool, whose "type" action wrote into the
+last focused text field. But the code audit it prompted found the real gap: every copy of the
+component moved focus on open only when the list was searchable. On Safari, where a click leaves
+focus where it was, a click-only list never got the keyboard. Eight of the fifteen blocks had
+it. Chrome hid it, because there the click itself focuses the trigger. The effect above fixed
+all eight, rechecked on every page with a synthetic click and real key presses.
+
 ## Variants worth having
 
 - **`bare`** — inline-editor mode. No border, no fill; `triggerContent` (a status chip, a
@@ -375,7 +427,12 @@ Everything else — the trigger, the card, the rows — stays flat.
       on app pages inside Softr's top bar and phone tab bar
 - [ ] Keyboard: ↑ ↓ Enter Esc Tab; the active row kept visible by scrolling the list only
       (never `scrollIntoView`), and the search box focused with `preventScroll`
+- [ ] Opening moves focus into the Combo: the search box, or the trigger on a click-only
+      list, because Safari does not focus a clicked button. Escape on an open list calls
+      `preventDefault` + `stopPropagation` and closes only the list
+      ([Move focus into the Combo when it opens](#move-focus-into-the-combo-when-it-opens))
 - [ ] `aria-haspopup="listbox"`, `aria-expanded`, `role="listbox"` / `role="option"`,
-      `aria-selected`, and an `aria-label` on the trigger
+      `aria-selected`, and an `aria-label` on the trigger; a click-only trigger that carries
+      `aria-activedescendant` also gets `role="combobox"`
 - [ ] Loading and empty states (`"Nothing matches that."`)
 - [ ] No `@/components/ui/select` import anywhere in the file