@_linked/shape-ui 2.0.0

package/.changeset/README.md

@@ -0,0 +1,20 @@
+# Changesets
+
+This package uses [changesets](https://github.com/changesets/changesets) for version management and publishing.
+
+## Adding a changeset
+
+When making a change that should trigger a new release, run:
+
+```bash
+npx changeset
+```
+
+This generates a markdown file in `.changeset/` describing the change. Commit it with your PR.
+
+On merge to `main`, the publish workflow either:
+
+1. Creates (or updates) a **Release PR** that bumps the version + updates `CHANGELOG.md`, or
+2. If the Release PR is already merged, publishes the new version to npm.
+
+Changes that don't need a release (docs, CI config, tooling) can skip the changeset — the check is a warning, not a block.

package/.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "linked-cm/ui" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflows/changeset-check.yml

@@ -0,0 +1,44 @@
+name: Changeset Check
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  changeset-check:
+    name: Check for changeset
+    # Skip the check on the automated Release PR.
+    if: ${{ github.head_ref != 'changeset-release/main' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check for changeset files
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: files } = await github.rest.pulls.listFiles({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number,
+            });
+
+            const hasChangeset = files.some(f =>
+              f.filename.startsWith('.changeset/') &&
+              f.filename.endsWith('.md') &&
+              f.filename !== '.changeset/README.md'
+            );
+
+            if (!hasChangeset) {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: "No changeset found. If this PR should trigger a release, run `npx changeset` and commit the generated file.\n\nIf this change doesn't need a release (docs, CI config, etc.), you can ignore this message."
+              });
+              core.warning('No changeset file found in this PR.');
+            }

package/.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-and-test:
+    name: Build & Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Detect Release PR
+        id: rpr
+        run: |
+          if [[ "${{ github.event.pull_request.head.ref }}" == "changeset-release/main" ]]; then
+            echo "is_release_pr=true" >> $GITHUB_OUTPUT
+            echo "Release PR from changesets/action detected — skipping build/test (auto-generated version+CHANGELOG only)."
+          else
+            echo "is_release_pr=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Checkout
+        if: steps.rpr.outputs.is_release_pr == 'false'
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        if: steps.rpr.outputs.is_release_pr == 'false'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.16.0
+
+      - name: Install dependencies
+        if: steps.rpr.outputs.is_release_pr == 'false'
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        if: steps.rpr.outputs.is_release_pr == 'false'
+        run: npm run build
+
+      - name: Test
+        if: steps.rpr.outputs.is_release_pr == 'false'
+        run: npm test --if-present

package/.github/workflows/publish.yml

@@ -0,0 +1,158 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Publish Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      # `--provenance` signs the tarball with a GitHub OIDC token, so the job must be able to
+      # mint one. This does NOT switch the package to OIDC trusted publishing — authentication
+      # is still the org npm token.
+      id-token: write
+    steps:
+      # Author the changesets "Version Packages" PR as the org release App (not the default
+      # GITHUB_TOKEN) so its CI runs without a manual "Approve and run" gate. Requires the org
+      # App installed on this repo + org secrets RELEASE_APP_ID / RELEASE_APP_PRIVATE_KEY.
+      - name: Generate GitHub App token
+        id: app-token
+        uses: actions/create-github-app-token@v2
+        with:
+          app-id: ${{ secrets.RELEASE_APP_ID }}
+          private-key: ${{ secrets.RELEASE_APP_PRIVATE_KEY }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.16.0
+          registry-url: 'https://registry.npmjs.org'
+
+      # `npm stage` landed in CLI 11.15.0; Node 22.16 ships npm 10.x, so the bundled one
+      # cannot stage. Pinned rather than `@latest` so a future npm release cannot change how
+      # releases behave without a commit here.
+      - name: Use an npm that can stage
+        run: npm i -g npm@^11.15.0
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build
+        run: npm run build
+
+      # No `publish:` — changesets only opens/updates the version PR here. Publishing is the
+      # step below, because `changeset publish` shells out to `npm publish`, which a
+      # stage-only token cannot do (changesets/changesets#2025 is open for first-class
+      # support). Splitting them keeps changesets doing what it is good at — versions and
+      # changelogs — and leaves the registry call to us.
+      - name: Create release Pull Request
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          title: 'chore: release'
+          commit: 'chore: release'
+        env:
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
+
+      # Stage the version for a human to approve.
+      #
+      # A staged version is uploaded but NOT public: a maintainer reviews it and approves with
+      # 2FA, from the Staged Packages tab in the npm user menu or `npm stage approve`. That is
+      # the point — every release keeps a proof-of-presence step even though CI is
+      # unattended — and it is why the org token is scoped "read and write (stage only)".
+      #
+      # Idempotent: this workflow runs on every push to main, including the merge of the
+      # version PR and any later commit, so it must do nothing when the version is already on
+      # the registry or already sitting in the queue.
+      - name: Stage the release for approval
+        if: steps.changesets.outputs.hasChangesets != 'true'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: |
+          set -euo pipefail
+          name=$(node -p "require('./package.json').name")
+          version=$(node -p "require('./package.json').version")
+          private=$(node -p "require('./package.json').private === true")
+          if [ "$private" = "true" ]; then
+            echo "$name is private — nothing to publish."; exit 0
+          fi
+
+          if npm view "$name@$version" version >/dev/null 2>&1; then
+            echo "$name@$version is already on the registry — nothing to do."
+            exit 0
+          fi
+
+          if npm stage list "$name" 2>/dev/null | grep -q "$version"; then
+            echo "$name@$version is already staged and waiting for approval."
+            exit 0
+          fi
+
+          echo "Staging $name@$version…"
+          # Capture the output: `npm stage publish` prints the stage id, and `npm stage
+          # approve` takes ONLY that id — a package spec is rejected with "stage-id must be a
+          # valid UUID". Without this the notice below hands out a command that does not work.
+          out=$(npm stage publish --access public --provenance 2>&1 | tee /dev/stderr)
+          uuid='[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'
+          # `|| true` because the script runs under `set -euo pipefail`: a grep that matches
+          # nothing exits 1 and would fail the step even though the staging itself succeeded.
+          stage_id=$(printf '%s' "$out" | grep -oE "$uuid" | tail -1 || true)
+
+          {
+            echo "### 📦 \`$name@$version\` is staged, not published"
+            echo
+            echo "It is uploaded and held for review. **Approve it to make it public:**"
+            echo
+            if [ -n "$stage_id" ]; then
+              echo "- **CLI:** \`npm stage approve $stage_id\`"
+            else
+              echo "- **CLI:** \`npm stage list $name\` to find the id, then"
+              echo "  \`npm stage approve <stage-id>\`"
+            fi
+            echo "- **Web:** [npmjs.com](https://www.npmjs.com) → your avatar → **Staged"
+            echo "  Packages** → **Approve**. The button stays disabled until npm has"
+            echo "  finished scanning the tarball; the page refreshes every minute."
+            echo
+            echo "Both prompt for 2FA. Until then \`npm install $name\` still resolves"
+            echo "\`$(npm view "$name" version 2>/dev/null || echo 'nothing')\`."
+          } >> "$GITHUB_STEP_SUMMARY"
+
+          if [ -n "$stage_id" ]; then
+            echo "::notice title=Approval needed::$name@$version is staged. Run: npm stage approve $stage_id"
+          else
+            echo "::notice title=Approval needed::$name@$version is staged, but the stage id could not be read from the output. Run: npm stage list $name"
+          fi
+
+      # When changesets opened/updated the version PR, merge it so the release reaches the
+      # staging queue without a manual click. App token → the merge's push re-triggers this
+      # workflow, which then stages. DIRECT-merge (not `--auto`): GitHub
+      # auto-merge ignores branch-protection review-bypass allowances; main is check-only so a
+      # direct merge lands once the required check is green — retry until then.
+      - name: Merge the version PR to stage the release
+        if: steps.changesets.outputs.hasChangesets == 'true'
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
+        run: |
+          pr=$(gh pr list --base main --head changeset-release/main --state open --json number --jq '.[0].number // empty')
+          if [ -z "$pr" ]; then echo "No open version PR (nothing to merge)."; exit 0; fi
+          for i in $(seq 1 40); do
+            if gh pr merge "$pr" --merge 2>/tmp/merge_err; then
+              echo "Merged version PR #$pr on attempt $i."
+              exit 0
+            fi
+            echo "Attempt $i/40: version PR #$pr not mergeable yet ($(tr -d '\n' < /tmp/merge_err)); waiting for the required check…"
+            sleep 15
+          done
+          echo "::warning::Version PR #$pr not merged after retries — merge it manually."

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# @\_linked/ui
+
+## 2.0.0
+
+### Major Changes
+
+- [#7](https://github.com/linked-cm/ui/pull/7) [`be0c4ef`](https://github.com/linked-cm/ui/commit/be0c4ef095d30cd1388517f7d13383eb26b4926c) Thanks [@flyon](https://github.com/flyon)! - Rename from `@_linked/ui` to `@_linked/shape-ui`.
+
+  `ui` said only "not backend", which is the least informative name available for the layer
+  most in need of one that states its contract. Every component here takes a shape and a
+  property shape and renders a control for it, working on any shape rather than a known one.
+  `shape-ui` says that.
+
+  Renaming now because it is nearly free: the package has three consumers. It becomes
+  expensive as soon as it has more, and this layer should have more.
+
+  Also removes nine compiled CommonJS files that had been committed into `src/` alongside their
+  `.tsx` sources, and a dead `ShapeTable.tsx.old`.
+
+## 1.0.3
+
+### Patch Changes
+
+- [#3](https://github.com/linked-cm/ui/pull/3) [`24d8c4b`](https://github.com/linked-cm/ui/commit/24d8c4bdd0e97d01dacdda8dcc94b17cfad84ca8) Thanks [@flyon](https://github.com/flyon)! - loadData: ESM-only JSON import — drop the dead CJS branch, add the `{ with: { type: 'json' } }` import attribute.
+
+## 1.0.2
+
+### Patch Changes
+
+- [`56ee32e`](https://github.com/linked-cm/ui/commit/56ee32ef1e709b8b6841870c53a73e285c68b6c7) - Initial release under the new publishing setup.

package/README.md

@@ -0,0 +1,35 @@
+# `@_linked/shape-ui`
+
+UI driven by a shape.
+
+Each component takes a `Shape` and a property shape and renders a control for it — a text
+field, a select, a date picker, an avatar. It works on *any* shape, not a known one, which is
+the whole point: an application that adds a property gets an editor for it without writing
+one.
+
+```tsx
+<TextfieldEditor of={person} property={givenName} />
+```
+
+## Where it sits
+
+| Layer | Package | Knows about |
+|---|---|---|
+| Design tokens | `@_linked/css` | nothing |
+| Headless components | `@_linked/primitives` | the DOM and the tokens |
+| Data binding | `@_linked/react` | shapes and queries; ships no components |
+| **Shape-driven UI** | **`@_linked/shape-ui`** | how to render an arbitrary shape |
+| Product surfaces | applications | one product's domain vocabulary |
+
+Everything here renders a `@_linked/primitives` control and adds the shape binding. Nothing
+here knows about a specific product.
+
+**Consume this layer rather than rebuilding it.** A product that needs a shape-driven form
+field extends what is here; growing a second implementation inside an application is how the
+same component ends up existing three times, and then drifting.
+
+## Why the name changed
+
+This package was `@_linked/ui`. That name said only "not backend" — the least informative
+label available for the layer most in need of one that states its contract. `shape-ui` says
+what it is.

package/lib/esm/backend.js

@@ -0,0 +1,2 @@
+//import your providers here (providers only run in the backend)
+//# sourceMappingURL=backend.js.map

package/lib/esm/backend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../src/backend.ts"],"names":[],"mappings":"AAAA,gEAAgE"}

package/lib/esm/components/AvatarEditor.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape } from '@_linked/core/shapes/SHACL';
+export interface AvatarEditorProps {
+    of?: Shape;
+    property?: PropertyShape;
+    /**
+     *  Converts the value returned by the shape, to the input string for the avatar
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the avatar to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const AvatarEditor: ({ of, property, preConvertValueFn, postConvertValueFn, ...restProps }: AvatarEditorProps) => React.JSX.Element;

package/lib/esm/components/AvatarEditor.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Root, Image } from '@_linked/primitives/components/Avatar';
+export const AvatarEditor = ({ of, property, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    return (React.createElement(Root, null,
+        React.createElement(Image, null)));
+};
+//# sourceMappingURL=AvatarEditor.js.map

package/lib/esm/components/AvatarEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarEditor.js","sourceRoot":"","sources":["../../../src/components/AvatarEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAC;AAoBpE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACM,EAAE,EAAE;IACtB,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,KAAK,OAAG,CACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/CheckboxEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape } from '@_linked/core/shapes/SHACL';
+export interface CheckboxEditorProps {
+    onCheckedChange?: (e: any) => void;
+    of?: Shape;
+    property?: PropertyShape;
+    /**
+     *  Converts the value returned by the shape, to the input string for the checkbox
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the checkbox to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const CheckboxEditor: ({ onCheckedChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }: CheckboxEditorProps) => React.JSX.Element;

package/lib/esm/components/CheckboxEditor.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Checkbox } from '@_linked/primitives/components/Checkbox';
+import style from './CheckboxEditor.module.css';
+export const CheckboxEditor = ({ onCheckedChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const currentValues = of[property.label];
+    const onChangeHandler = (item, checked) => {
+        if (!of)
+            return;
+        if (property.in) {
+            if (checked) {
+                currentValues.add(item);
+            }
+            else {
+                currentValues.delete(item);
+            }
+        }
+        else {
+            of[property.label] = checked;
+        }
+        if (onCheckedChange) {
+            onCheckedChange(currentValues);
+        }
+    };
+    return (React.createElement(React.Fragment, null, property.in ? (property.in.map((item, i) => {
+        return (React.createElement("label", { className: style.Root },
+            React.createElement(Checkbox, { value: of[property.label], onCheckedChange: onChangeHandler.bind(this, item), defaultChecked: currentValues.has(item), ...restProps }),
+            "TODO: ",
+            item.toString()));
+    })) : (React.createElement("div", null, "checkbox usage unimplemented")
+    // <Checkbox
+    //   value={of[property.label]}
+    //   onCheckedChange={onChangeHandler}
+    //   defaultChecked={
+    //     of
+    //       ? preConvertValueFn
+    //         ? preConvertValueFn(of[property.label])
+    //         : of[property.label]
+    //       : ''
+    //   }
+    //   {...restProps}
+    // />
+    )));
+};
+//# sourceMappingURL=CheckboxEditor.js.map

package/lib/esm/components/CheckboxEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxEditor.js","sourceRoot":"","sources":["../../../src/components/CheckboxEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAEnE,OAAO,KAAK,MAAM,6BAA6B,CAAC;AAqBhD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,eAAe,EACf,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,aAAa,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;QACxC,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,IAAI,OAAO,EAAE,CAAC;gBACZ,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;QAC/B,CAAC;QAED,IAAI,eAAe,EAAE,CAAC;YACpB,eAAe,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,0CACG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CACb,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;QAC1B,OAAO,CACL,+BAAO,SAAS,EAAE,KAAK,CAAC,IAAI;YAC1B,oBAAC,QAAQ,IACP,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzB,eAAe,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EACjD,cAAc,EAAE,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,KACnC,SAAS,GACb;;YACK,IAAI,CAAC,QAAQ,EAAE,CAChB,CACT,CAAC;IACJ,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,gEAAuC;IACvC,YAAY;IACZ,+BAA+B;IAC/B,sCAAsC;IACtC,qBAAqB;IACrB,SAAS;IACT,4BAA4B;IAC5B,kDAAkD;IAClD,+BAA+B;IAC/B,aAAa;IACb,MAAM;IACN,mBAAmB;IACnB,KAAK;KACN,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/CheckboxEditor.module.css

@@ -0,0 +1,6 @@
+.Root {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  /* padding: 10px;*/
+}

package/lib/esm/components/DateEditor.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+export interface DateEditorProps {
+    onChange?: (e: any) => void;
+    of?: Shape;
+    property?: string;
+    /**
+     *  Converts the value returned by the shape, to the date string for the date field
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the date field to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const DateEditor: ({ onChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }: DateEditorProps) => React.JSX.Element;

package/lib/esm/components/DateEditor.js

@@ -0,0 +1,22 @@
+import React from 'react';
+export const DateEditor = ({ onChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }) => {
+    const onChangeHandler = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React.createElement(React.Fragment, null)
+    // <Input
+    //   onChange={onChangeHandler}
+    //   defaultValue={
+    //     of
+    //       ? preConvertValueFn
+    //         ? preConvertValueFn(of[property])
+    //         : of[property]
+    //       : ''
+    //   }
+    //   {...restProps}
+    // />
+    );
+};
+//# sourceMappingURL=DateEditor.js.map

package/lib/esm/components/DateEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateEditor.js","sourceRoot":"","sources":["../../../src/components/DateEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAElB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE;QAC5B,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,yCAAK;IACL,SAAS;IACT,+BAA+B;IAC/B,mBAAmB;IACnB,SAAS;IACT,4BAA4B;IAC5B,4CAA4C;IAC5C,yBAAyB;IACzB,aAAa;IACb,MAAM;IACN,mBAAmB;IACnB,KAAK;KACN,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/ImageValueEditor.module.css

@@ -0,0 +1,3 @@
+.Root {
+  display: block;
+}

package/lib/esm/components/RadioButtonEditor.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape } from '@_linked/core/shapes/SHACL';
+export interface RadioButtonProps {
+    onValueChange?: (newValue: any) => void;
+    of?: Shape;
+    property?: PropertyShape;
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     *  Converts the value returned by the shape, to the radio input string for the radio input
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the radio input to a value that can be provided to the set method of the shape
+     * @param radioInputValue
+     * @returns
+     */
+    postConvertValueFn?: (radioInputValue: string) => any;
+}
+export declare const RadioButtonEditor: React.FC<RadioButtonProps>;

package/lib/esm/components/RadioButtonEditor.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { RadioGroup } from '@_linked/primitives/components/RadioGroup';
+import styles from './RadioButtonEditor.module.css';
+import { cl } from '@_linked/react/utils/ClassNames';
+export const RadioButtonEditor = ({ onValueChange, of, property, preConvertValueFn, postConvertValueFn, children, className, ...props }) => {
+    const [labelHasLongString, setLabelHasLongString] = useState(false);
+    const onChangeHandler = (newValue) => {
+        if (!of)
+            return;
+        of[property.label] = newValue;
+        if (onValueChange) {
+            onValueChange(of[property.label]);
+            // onValueChange(
+            //   options.map((option) => {
+            //     console.log(option, 'option');
+            //     of[property.label] = newValue;
+            //   }),
+            // );
+        }
+    };
+    useEffect(() => {
+        //check if radio button label has a long string
+        if (property.in) {
+            const containsLongString = property.in.some((list) => {
+                throw Error('TODO: property.in for RadioButtonEditor');
+                // const wordCount = list.value.split(' ').length;
+                // return wordCount > 5;
+            });
+            setLabelHasLongString(containsLongString);
+        }
+    }, [property.in]);
+    // function cl(radioButtonField: any, arg1: any): string {
+    //   throw new Error('Function not implemented.');
+    // }
+    console.log('of.label', of[property.label]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(RadioGroup.Root, { defaultValue: "default", "aria-label": "View density", className: cl(styles.Root, labelHasLongString && styles.columnBased) }, property.in ? (property.in.map((item) => (React.createElement("label", { className: styles.radioButtonItem },
+            React.createElement(RadioGroup.Item, { value: item.toString(), className: styles.radioButton }),
+            "TODO: item from property.in")))) : (React.createElement("p", null, "unimplemented single radio button")))));
+};
+//# sourceMappingURL=RadioButtonEditor.js.map

package/lib/esm/components/RadioButtonEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonEditor.js","sourceRoot":"","sources":["../../../src/components/RadioButtonEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAc,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEnF,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAsBrD,MAAM,CAAC,MAAM,iBAAiB,GAA+B,CAAC,EAC5D,aAAa,EACb,EAAE,EACF,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,EAAE;QACnC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;QAE9B,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YAClC,iBAAiB;YACjB,8BAA8B;YAC9B,qCAAqC;YACrC,qCAAqC;YACrC,QAAQ;YACR,KAAK;QACP,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,+CAA+C;QAC/C,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,MAAM,kBAAkB,GAAG,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACnD,MAAM,KAAK,CAAC,yCAAyC,CAAC,CAAC;gBACvD,kDAAkD;gBAClD,wBAAwB;YAC1B,CAAC,CAAC,CAAC;YACH,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAElB,0DAA0D;IAC1D,kDAAkD;IAClD,IAAI;IAEJ,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL;QACE,oBAAC,UAAU,CAAC,IAAI,IACd,YAAY,EAAC,SAAS,gBACX,cAAc,EACzB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,kBAAkB,IAAI,MAAM,CAAC,WAAW,CAAC,IAEnE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CACb,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,+BAAO,SAAS,EAAE,MAAM,CAAC,eAAe;YACtC,oBAAC,UAAU,CAAC,IAAI,IACd,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,SAAS,EAAE,MAAM,CAAC,WAAW,GAC7B;0CAGI,CACT,CAAC,CACH,CAAC,CAAC,CAAC,CACF,mEAAwC,CACzC,CACe,CACjB,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/esm/components/RadioButtonEditor.module.css

@@ -0,0 +1,22 @@
+.Root {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  gap: 1rem;
+
+  &.columnBased {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+
+  .radioButtonItem {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .radioButton {
+    width: 25px;
+    min-width: 25px;
+  }
+}

package/lib/esm/components/SelectEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { PropertyShape } from '@_linked/core/shapes/SHACL';
+export interface SelectEditorProps {
+    onValueChange?: (e: any) => void;
+    of?: Shape;
+    property?: PropertyShape;
+    /**
+     *  Converts the value returned by the shape, to the input string for the select
+     * @param shapePropertyValue
+     * @returns
+     */
+    preConvertValueFn?: (shapePropertyValue: any) => string;
+    /**
+     * Converts the value of the select to a value that can be provided to the set method of the shape
+     * @param inputValue
+     * @returns
+     */
+    postConvertValueFn?: (inputValue: string) => any;
+}
+export declare const SelectEditor: ({ onValueChange, of, property, preConvertValueFn, postConvertValueFn, ...restProps }: SelectEditorProps) => React.JSX.Element;