@_linked/cli 1.4.4 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.5.0
+
+### Minor Changes
+
+- [#34](https://github.com/linked-cm/cli/pull/34) [`4138d8f`](https://github.com/linked-cm/cli/commit/4138d8fbbee6c5def8538d2297bedd5c0ed3e4e7) Thanks [@flyon](https://github.com/flyon)! - Template visual upgrade: animated background + primitives showcase.
+
+  **Animated background.** `App.module.css` now renders a fixed-position layer underneath all content with three soft radial-gradient blobs that drift and gently pulse on a 22s loop. Brand-colored via `--color-primary-300` / `--color-secondary-300` / `--color-tertiary-200`, so the look re-tints automatically when an app overrides theme tokens. Honors `prefers-reduced-motion: reduce`.
+
+  **Protected page** (`/page1`) reworked into a `@_linked/primitives` showcase, organized into `Tabs` (Forms / Display / Buttons). Exercises `Button` (variants, colors, sizes), `Input`, `Switch`, `Checkbox`, `RadioGroup`, `Slider`, `Progress`, `Avatar`, `Label`, `Separator` — useful both as a visual smoke-test of the active theme and as starter code showing how to reach for each primitive.
+
+  `@_linked/primitives` added as a template dep (`^1.0.6`).
+
+## 1.4.5
+
+### Patch Changes
+
+- [#32](https://github.com/linked-cm/cli/pull/32) [`2f0b4d3`](https://github.com/linked-cm/cli/commit/2f0b4d349b98eea9271fad9028a2ddae824bcd29) Thanks [@flyon](https://github.com/flyon)! - Template's `@_linked/auth` dep range bumped from `~1.0` (which pinned to the broken 1.0.x empty-tarball releases) to `^1.1.0` (which has the actual `lib/`). Same for `@_linked/server-utils` (`^1.0.5` → `^1.0.6`) and `@_linked/schema` (`^1.0` → `^1.0.6` — both versions were empty before 1.0.6).
+
+  Also fixes `PersonPreview.tsx` template: `Person.update(...).for(source)` and `Person.delete(source)` now pass `{ id: source.id }` with an early-return guard, since `source.id` is optional on the shape type.
+
 ## 1.4.4
 
 ### Patch Changes

package/defaults/app-with-backend/package.json

@@ -37,11 +37,12 @@
   ],
   "dependencies": {
     "@_linked/core": "^2.6",
-    "@_linked/auth": "~1.0",
+    "@_linked/auth": "^1.1.0",
     "@_linked/server": "^2.0",
-    "@_linked/server-utils": "^1.0.5",
-    "@_linked/schema": "^1.0",
+    "@_linked/server-utils": "^1.0.6",
+    "@_linked/schema": "^1.0.6",
     "@_linked/fuseki": "^2.0",
+    "@_linked/primitives": "^1.0.6",
     "@_linked/react": "^1.3",
     "react": "^18.2",
     "react-dom": "^18.2",

package/defaults/app-with-backend/src/App.module.css

@@ -5,10 +5,61 @@
   background: var(--bg-page);
   color: var(--color-gray-900);
   margin: 0;
+  overflow-x: hidden;
+}
+
+/* Animated background: soft radial-gradient "blobs" drifting and pulsing
+   underneath the content. Brand-colored via @_linked/css tokens — recolors
+   automatically when --color-primary-* / --color-secondary-* change in theme.css. */
+:global(body)::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      circle at 18% 22%,
+      var(--color-primary-300) 0%,
+      transparent 38%
+    ),
+    radial-gradient(
+      circle at 82% 76%,
+      var(--color-secondary-300) 0%,
+      transparent 42%
+    ),
+    radial-gradient(
+      circle at 55% 58%,
+      var(--color-tertiary-200) 0%,
+      transparent 50%
+    );
+  opacity: 0.35;
+  filter: blur(40px);
+  animation: drift 22s ease-in-out infinite;
+}
+
+@keyframes drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  33% {
+    transform: translate3d(-3%, 2%, 0) scale(1.05);
+  }
+  66% {
+    transform: translate3d(3%, -2%, 0) scale(0.97);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :global(body)::before {
+    animation: none;
+  }
 }
 
 .App {
   min-height: 100vh;
+  position: relative;
 }
 
 :global(h1) {

package/defaults/app-with-backend/src/components/PersonPreview.tsx

@@ -19,12 +19,13 @@ export const PersonPreview = linkedComponent(
     const [busy, setBusy] = useState(false);
 
     async function save() {
+      if (!source.id) return;
       setBusy(true);
       try {
         await Person.update({
           givenName: draftGiven,
           familyName: draftFamily,
-        }).for(source);
+        }).for({ id: source.id });
         // Optimistic patch — no extra network round-trip needed.
         _refresh({ givenName: draftGiven, familyName: draftFamily });
         setEditing(false);
@@ -34,9 +35,10 @@ export const PersonPreview = linkedComponent(
     }
 
     async function remove() {
+      if (!source.id) return;
       setBusy(true);
       try {
-        await Person.delete(source);
+        await Person.delete({ id: source.id });
         refreshList();
       } finally {
         setBusy(false);

package/defaults/app-with-backend/src/pages/Page1.module.css

@@ -1,18 +1,102 @@
 @import '@_linked/css/package.css';
 
-.Card {
+.Page {
+  display: flex;
+  flex-direction: column;
+  gap: --spacing(5);
+}
+
+.Header {
   background: var(--bg-card);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-card);
   padding: --spacing(6);
 }
 
-.Card h2 {
-  margin: 0 0 --spacing(3);
+.Header h2 {
+  margin: 0 0 --spacing(2);
 }
 
-.Card p {
+.Header p {
   color: var(--color-gray-700);
   line-height: 1.5;
   margin: 0;
 }
+
+.Header code {
+  background: var(--bg-section);
+  padding: 0 --spacing(1);
+  border-radius: var(--radius-element);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+.Tabs {
+  background: var(--bg-card);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  padding: --spacing(5);
+}
+
+.TabPanel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: --spacing(4);
+  margin-top: --spacing(5);
+}
+
+.Card {
+  background: var(--bg-section);
+  border-radius: var(--radius-element);
+  padding: --spacing(4);
+  display: flex;
+  flex-direction: column;
+  gap: --spacing(3);
+}
+
+.Card h3 {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-gray-600);
+}
+
+.Field {
+  display: flex;
+  flex-direction: column;
+  gap: --spacing(2);
+}
+
+.Stack {
+  display: flex;
+  flex-direction: column;
+  gap: --spacing(2);
+}
+
+.Row {
+  display: flex;
+  align-items: center;
+  gap: --spacing(2);
+  flex-wrap: wrap;
+}
+
+.ButtonRow {
+  display: flex;
+  align-items: center;
+  gap: --spacing(2);
+  flex-wrap: wrap;
+}
+
+.AvatarRow {
+  display: flex;
+  gap: --spacing(3);
+  align-items: center;
+}
+
+.Hint {
+  color: var(--color-gray-600);
+  font-size: 0.875rem;
+  margin: 0;
+}

package/defaults/app-with-backend/src/pages/Page1.tsx

@@ -1,15 +1,187 @@
+// Components showcase — demonstrates a slice of @_linked/primitives against
+// the active @_linked/css theme. Open this page after signing in to see the
+// design tokens in action. Replace with your own protected content.
+import React, { useState } from 'react';
 import { DefaultLayout } from '../layout/DefaultLayout';
+import { Button } from '@_linked/primitives/components/Button';
+import { Input } from '@_linked/primitives/components/Input';
+import { Switch } from '@_linked/primitives/components/Switch';
+import { Checkbox } from '@_linked/primitives/components/Checkbox';
+import { Slider } from '@_linked/primitives/components/Slider';
+import { Progress } from '@_linked/primitives/components/Progress';
+import { Avatar } from '@_linked/primitives/components/Avatar';
+import { Tabs } from '@_linked/primitives/components/Tabs';
+import { RadioGroup } from '@_linked/primitives/components/RadioGroup';
+import { Label } from '@_linked/primitives/components/Label';
+import { Separator } from '@_linked/primitives/components/Separator';
 import style from './Page1.module.css';
 
 export default function Page1() {
+  const [progress, setProgress] = useState(60);
+  const [sliderValue, setSliderValue] = useState([40]);
+  const [checked, setChecked] = useState(true);
+  const [switchOn, setSwitchOn] = useState(true);
+  const [radio, setRadio] = useState('comfy');
+  const [text, setText] = useState('');
+
   return (
     <DefaultLayout>
-      <div className={style.Card}>
-        <h2>Page 1</h2>
-        <p>
-          A second route to show how navigation works. Edit{' '}
-          <code>src/pages/Page1.tsx</code> to make this your own.
-        </p>
+      <div className={style.Page}>
+        <header className={style.Header}>
+          <h2>Components</h2>
+          <p>
+            A small tour of <code>@_linked/primitives</code> rendered against
+            the active <code>@_linked/css</code> theme. Tweak{' '}
+            <code>src/theme.css</code> tokens to re-skin every component on
+            this page.
+          </p>
+        </header>
+
+        <Tabs.Root defaultValue="forms" className={style.Tabs}>
+          <Tabs.List>
+            <Tabs.Trigger value="forms">Forms</Tabs.Trigger>
+            <Tabs.Trigger value="display">Display</Tabs.Trigger>
+            <Tabs.Trigger value="buttons">Buttons</Tabs.Trigger>
+          </Tabs.List>
+
+          <Tabs.Content value="forms" className={style.TabPanel}>
+            <section className={style.Card}>
+              <h3>Inputs</h3>
+              <div className={style.Field}>
+                <Label htmlFor="demo-name">Name</Label>
+                <Input
+                  id="demo-name"
+                  placeholder="Ada Lovelace"
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                />
+              </div>
+              <Separator />
+              <div className={style.Row}>
+                <Switch
+                  checked={switchOn}
+                  onCheckedChange={(v) => setSwitchOn(Boolean(v))}
+                />
+                <Label>Enable notifications</Label>
+              </div>
+              <div className={style.Row}>
+                <Checkbox
+                  checked={checked}
+                  onCheckedChange={(v) => setChecked(Boolean(v))}
+                />
+                <Label>I agree to the terms</Label>
+              </div>
+            </section>
+
+            <section className={style.Card}>
+              <h3>Density</h3>
+              <RadioGroup.Root
+                value={radio}
+                onValueChange={setRadio}
+                className={style.Stack}
+              >
+                <div className={style.Row}>
+                  <RadioGroup.Item value="compact" id="r-compact" />
+                  <Label htmlFor="r-compact">Compact</Label>
+                </div>
+                <div className={style.Row}>
+                  <RadioGroup.Item value="comfy" id="r-comfy" />
+                  <Label htmlFor="r-comfy">Comfortable</Label>
+                </div>
+                <div className={style.Row}>
+                  <RadioGroup.Item value="spacious" id="r-spacious" />
+                  <Label htmlFor="r-spacious">Spacious</Label>
+                </div>
+              </RadioGroup.Root>
+            </section>
+
+            <section className={style.Card}>
+              <h3>Slider</h3>
+              <Slider.Root
+                value={sliderValue}
+                onValueChange={setSliderValue}
+                min={0}
+                max={100}
+                step={1}
+              >
+                <Slider.Track>
+                  <Slider.Range />
+                </Slider.Track>
+                <Slider.Thumb />
+              </Slider.Root>
+              <p className={style.Hint}>Value: {sliderValue[0]}</p>
+            </section>
+          </Tabs.Content>
+
+          <Tabs.Content value="display" className={style.TabPanel}>
+            <section className={style.Card}>
+              <h3>Avatar</h3>
+              <div className={style.AvatarRow}>
+                <Avatar.Root>
+                  <Avatar.Fallback>AL</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root>
+                  <Avatar.Fallback>GH</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root>
+                  <Avatar.Fallback>RV</Avatar.Fallback>
+                </Avatar.Root>
+              </div>
+            </section>
+
+            <section className={style.Card}>
+              <h3>Progress</h3>
+              <Progress.Root value={progress} />
+              <div className={style.Row}>
+                <Button
+                  size="small"
+                  variant="outline"
+                  onClick={() => setProgress((p) => Math.max(0, p - 10))}
+                >
+                  −10
+                </Button>
+                <Button
+                  size="small"
+                  variant="outline"
+                  onClick={() => setProgress((p) => Math.min(100, p + 10))}
+                >
+                  +10
+                </Button>
+                <span className={style.Hint}>{progress}%</span>
+              </div>
+            </section>
+          </Tabs.Content>
+
+          <Tabs.Content value="buttons" className={style.TabPanel}>
+            <section className={style.Card}>
+              <h3>Variants</h3>
+              <div className={style.ButtonRow}>
+                <Button variant="solid">Solid</Button>
+                <Button variant="outline">Outline</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="link">Link</Button>
+              </div>
+            </section>
+
+            <section className={style.Card}>
+              <h3>Colors</h3>
+              <div className={style.ButtonRow}>
+                <Button color="primary">Primary</Button>
+                <Button color="secondary">Secondary</Button>
+                <Button color="tertiary">Tertiary</Button>
+              </div>
+            </section>
+
+            <section className={style.Card}>
+              <h3>Sizes</h3>
+              <div className={style.ButtonRow}>
+                <Button size="small">Small</Button>
+                <Button size="medium">Medium</Button>
+                <Button size="large">Large</Button>
+              </div>
+            </section>
+          </Tabs.Content>
+        </Tabs.Root>
       </div>
     </DefaultLayout>
   );

package/lib/cjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_linked/cli",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Command line tools for the @_linked/* packages and apps",
   "typesVersions": {
     "*": {

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_linked/cli",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Command line tools for the @_linked/* packages and apps",
   "typesVersions": {
     "*": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_linked/cli",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Command line tools for the @_linked/* packages and apps",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",