@_linked/cli 1.4.5 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.5.1
+
+### Patch Changes
+
+- [#36](https://github.com/linked-cm/cli/pull/36) [`fc37baa`](https://github.com/linked-cm/cli/commit/fc37baa54874d64349622b56b05d14f691bafb1c) Thanks [@flyon](https://github.com/flyon)! - The components-showcase page (`/page1`) is now a public route by default — the template doesn't wire up an authentication provider out of the box, so `requireAuth` would just hide the page behind a redirect to a non-functional signin. The `requireAuth: true` line is now commented out with a note pointing readers to `@_linked/auth` when they want to add it.
+
+  Top-of-file comment in `Page1.tsx` updated to match.
+
+## 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

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

@@ -42,6 +42,7 @@
     "@_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/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,188 @@
+// Components showcase — demonstrates a slice of @_linked/primitives against
+// the active @_linked/css theme. Tweak tokens in src/theme.css to re-skin
+// everything on this page. (To make the route sign-in-protected later, see
+// the `requireAuth` line in src/routes.tsx.)
+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/defaults/app-with-backend/src/routes.tsx

@@ -34,9 +34,11 @@ export const ROUTES: RoutesConfig = {
     component: lazy(
       () => import(/* webpackChunkName: "page1" */ './pages/Page1')
     ),
-    label: 'Protected page',
-    requireAuth: true,
+    label: 'Components',
     preloadChunks: ['page1'],
+    // To make this route sign-in-protected, uncomment the next line + wire up
+    // an authentication provider in App.tsx. See @_linked/auth for options.
+    // requireAuth: true,
   },
   signin: {
     path: '/signin',

package/lib/cjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_linked/cli",
-  "version": "1.4.5",
+  "version": "1.5.1",
   "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.5",
+  "version": "1.5.1",
   "description": "Command line tools for the @_linked/* packages and apps",
   "typesVersions": {
     "*": {

package/package.json

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