@_linked/cli 1.8.2 → 1.9.0

package/defaults/app-with-backend/src/components/PersonPreview.module.css

@@ -1,97 +0,0 @@
-@import '@_linked/css/package.css';
-
-.Row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: --spacing(2);
-  flex-wrap: wrap;
-}
-
-.Name {
-  font-weight: 500;
-  color: var(--color-gray-900);
-}
-
-.Actions {
-  display: flex;
-  gap: --spacing(2);
-}
-
-.EditButton,
-.SaveButton,
-.CancelButton,
-.DeleteButton {
-  padding: --spacing(1) --spacing(3);
-  font: inherit;
-  font-size: 0.85rem;
-  border-radius: var(--radius-element);
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
-}
-
-.EditButton,
-.CancelButton {
-  background: transparent;
-  color: var(--color-gray-700);
-  border-color: var(--color-gray-300);
-}
-
-.EditButton:hover:not(:disabled),
-.CancelButton:hover:not(:disabled) {
-  background: var(--color-gray-100);
-  color: var(--color-gray-900);
-}
-
-.SaveButton {
-  background: var(--color-primary-500);
-  color: var(--color-white);
-}
-
-.SaveButton:hover:not(:disabled) {
-  background: var(--color-primary-600);
-}
-
-.DeleteButton {
-  background: transparent;
-  color: var(--color-red-600);
-  border-color: transparent;
-}
-
-.DeleteButton:hover:not(:disabled) {
-  color: var(--color-red-700);
-  background: var(--color-red-50);
-}
-
-.EditButton:disabled,
-.SaveButton:disabled,
-.CancelButton:disabled,
-.DeleteButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.EditRow {
-  display: flex;
-  align-items: center;
-  gap: --spacing(2);
-  flex-wrap: wrap;
-  width: 100%;
-}
-
-.EditRow input {
-  flex: 1 1 140px;
-  padding: --spacing(2) --spacing(3);
-  border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-element);
-  background: var(--bg-card);
-  color: var(--color-gray-900);
-  font: inherit;
-}
-
-.EditRow input:focus {
-  outline: none;
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 2px var(--color-primary-200);
-}

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

@@ -1,109 +0,0 @@
-// Example PersonPreview — single-Person row. Demonstrates @_linked/react's
-// linkedComponent: the wrapper runs the per-row query and injects query
-// result keys + `source` + `_refresh` into the render function. _refresh
-// patches local query state for optimistic UI; on delete, the parent
-// list re-runs via the PersonListRefresh context.
-import React, { useState } from 'react';
-import { linkedComponent } from '@_linked/react';
-import { Person } from '@_linked/schema/shapes/Person';
-import { usePersonListRefresh } from './PersonOverviewContext';
-import style from './PersonPreview.module.css';
-
-export const PersonPreview = linkedComponent(
-  Person.select((p) => [p.givenName, p.familyName]),
-  ({ givenName, familyName, source, _refresh }) => {
-    const refreshList = usePersonListRefresh();
-    const [editing, setEditing] = useState(false);
-    const [draftGiven, setDraftGiven] = useState(givenName ?? '');
-    const [draftFamily, setDraftFamily] = useState(familyName ?? '');
-    const [busy, setBusy] = useState(false);
-
-    async function save() {
-      if (!source.id) return;
-      setBusy(true);
-      try {
-        await Person.update({
-          givenName: draftGiven,
-          familyName: draftFamily,
-        }).for({ id: source.id });
-        // Optimistic patch — no extra network round-trip needed.
-        _refresh({ givenName: draftGiven, familyName: draftFamily });
-        setEditing(false);
-      } finally {
-        setBusy(false);
-      }
-    }
-
-    async function remove() {
-      if (!source.id) return;
-      setBusy(true);
-      try {
-        await Person.delete({ id: source.id });
-        refreshList();
-      } finally {
-        setBusy(false);
-      }
-    }
-
-    function startEdit() {
-      setDraftGiven(givenName ?? '');
-      setDraftFamily(familyName ?? '');
-      setEditing(true);
-    }
-
-    if (editing) {
-      return (
-        <span className={style.EditRow} data-testid="person-edit">
-          <input
-            value={draftGiven}
-            onChange={(e) => setDraftGiven(e.target.value)}
-            aria-label="First name"
-          />
-          <input
-            value={draftFamily}
-            onChange={(e) => setDraftFamily(e.target.value)}
-            aria-label="Last name"
-          />
-          <button
-            className={style.SaveButton}
-            onClick={save}
-            disabled={busy}
-          >
-            Save
-          </button>
-          <button
-            className={style.CancelButton}
-            onClick={() => setEditing(false)}
-            disabled={busy}
-          >
-            Cancel
-          </button>
-        </span>
-      );
-    }
-
-    return (
-      <span className={style.Row} data-testid="person-row">
-        <span className={style.Name} data-testid="person-name">
-          {givenName} {familyName}
-        </span>
-        <span className={style.Actions}>
-          <button
-            className={style.EditButton}
-            onClick={startEdit}
-            disabled={busy}
-          >
-            Edit
-          </button>
-          <button
-            className={style.DeleteButton}
-            onClick={remove}
-            disabled={busy}
-          >
-            Delete
-          </button>
-        </span>
-      </span>
-    );
-  },
-);

package/defaults/app-with-backend/src/components/Spinner.module.css

@@ -1,17 +0,0 @@
-.spinner.active {
-  border: 4px solid transparent;
-  border-top: 4px solid #474545;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import style from './Spinner.module.css';
-
-export function Spinner({ active = true }) {
-  return (
-    <div
-      className={[style.spinner, active && style.active].join(' ')}
-      role="progressbar"
-      aria-busy={active ? 'true' : 'false'}
-    />
-  );
-}

package/defaults/app-with-backend/src/index.tsx

@@ -1,34 +0,0 @@
-import { AppContextProvider } from '@_linked/server-utils/components/AppContext';
-import { initFrontend } from '@_linked/server-utils/utils/Frontend';
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App';
-import { preloadMatchedRoute } from './utils/preloadRoutes';
-
-//import the storage & file configuration for the frontend
-import './linked.frontend.storage';
-
-//to avoid errors with react-refresh-webpack-plugin
-window['$RefreshReg$'] = () => {};
-window['$RefreshSig$'] = () => () => {};
-
-initFrontend().then(async () => {
-  // Preload matched route before hydration to avoid Suspense mismatch
-  await preloadMatchedRoute();
-
-  hydrateRoot(
-    document.getElementById('root'), // Target the #root div for hydration
-    <React.StrictMode>
-      <BrowserRouter>
-        <AppContextProvider
-          assets={window['assetManifest']}
-          requestLD={document.getElementById('request-ld')?.innerText}
-          requestObject={JSON.parse(document.getElementById('request-json')?.innerText || '{}')}
-        >
-          <App />
-        </AppContextProvider>
-      </BrowserRouter>
-    </React.StrictMode>,
-  );
-});

package/defaults/app-with-backend/src/layout/DefaultLayout.module.css

@@ -1,15 +0,0 @@
-@import '@_linked/css/package.css';
-
-.main {
-  font-family: var(--font-sans);
-  max-width: 960px;
-  margin: 0 auto;
-  padding: --spacing(6) --spacing(4);
-
-  @media (max-width: 1024px) {
-    max-width: 90%;
-  }
-  @media (max-width: 768px) {
-    padding: --spacing(4) --spacing(3);
-  }
-}

package/defaults/app-with-backend/src/layout/DefaultLayout.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Header } from './Header';
-import style from './DefaultLayout.module.css';
-
-export function DefaultLayout({ children }) {
-  return (
-    <main className={style.main}>
-      <Header />
-      {children}
-    </main>
-  );
-}

package/defaults/app-with-backend/src/layout/Header.module.css

@@ -1,46 +0,0 @@
-@import '@_linked/css/package.css';
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: --spacing(4);
-  padding: --spacing(4) 0 --spacing(6);
-  flex-wrap: wrap;
-}
-
-.header h1 {
-  color: var(--color-primary-700);
-  margin: 0;
-}
-
-.menu {
-  display: flex;
-  gap: --spacing(1);
-  flex-wrap: wrap;
-}
-
-.menu > a {
-  font-weight: 500;
-  font-size: 0.95rem;
-  color: var(--color-gray-700);
-  padding: --spacing(2) --spacing(3);
-  border-radius: var(--radius-element);
-  text-decoration: none;
-  transition: background 120ms ease, color 120ms ease;
-}
-
-.menu > a:hover {
-  background: var(--color-gray-100);
-  color: var(--color-gray-900);
-}
-
-.menu > a.active {
-  background: var(--color-primary-500);
-  color: var(--color-white);
-}
-
-.menu > a.active:hover {
-  background: var(--color-primary-600);
-  color: var(--color-white);
-}

package/defaults/app-with-backend/src/layout/Header.tsx

@@ -1,27 +0,0 @@
-import { Link, useLocation } from 'react-router-dom';
-import React from 'react';
-import style from './Header.module.css';
-import { ROUTES } from '../routes';
-
-export function Header() {
-  let path = useLocation();
-  return (
-    <header className={style.header}>
-      <h1>${name}</h1>
-      <nav className={style.menu}>
-        {Object.keys(ROUTES).map((key) => {
-          if (ROUTES[key].excludeFromMenu) return null;
-          return (
-            <Link
-              key={key}
-              to={ROUTES[key].path}
-              className={ROUTES[key].path === path.pathname ? style.active : ''}
-            >
-              {ROUTES[key].label || key}
-            </Link>
-          );
-        })}
-      </nav>
-    </header>
-  );
-}

package/defaults/app-with-backend/src/linked.frontend.datasets.json

@@ -1,12 +0,0 @@
-{
-  "_note": "Frontend datasets config. Public values only — this file ships in the browser bundle. Each entry: `store` (npm import path to the IDataset class) + `config` (a single JSON object passed verbatim to `new StoreClass(config)`). The default BackendAPIStore entry proxies queries to this app's own backend; swap in a different store class (e.g. @_linked/fuseki/shapes/FusekiStore) to talk directly to a public SPARQL endpoint.",
-
-  "datasets": {
-    "appData": {
-      "store": "@_linked/server/shapes/quadstores/BackendAPIStore",
-      "config": {
-        "name": "appData"
-      }
-    }
-  }
-}

package/defaults/app-with-backend/src/linked.frontend.storage.ts

@@ -1,36 +0,0 @@
-// Frontend storage for ${name}.
-//
-// Reads linked.frontend.datasets.json and instantiates one store per
-// alias. Webpack can't bundle dynamic imports of arbitrary npm paths,
-// so on the frontend we import each store class explicitly and
-// construct it per-alias here.
-//
-// Aliases on this side are independent from backend aliases — the
-// framework re-routes by shape on each side.
-import datasetsConfig from './linked.frontend.datasets.json' with { type: 'json' };
-import { parseDatasetsConfig } from '@_linked/core/utils/parseDatasetsConfig';
-import { LinkedFileStorage } from '@_linked/core/utils/LinkedFileStorage';
-import { LinkedStorage } from '@_linked/core/utils/LinkedStorage';
-import { BackendAPIStore } from '@_linked/server/shapes/quadstores/BackendAPIStore';
-import { getAccessUrlLocalFileStore } from '@_linked/server/utils/accessUrl';
-// Direct-to-Fuseki on the frontend? Uncomment:
-// import { FusekiStore } from '@_linked/fuseki/shapes/FusekiStore';
-
-// Parse JSON; pass empty env since the browser has no runtime process.env.
-// Per-env values for the frontend should be hardcoded `process.env.X`
-// references (webpack inlines them at build time).
-const config = parseDatasetsConfig(datasetsConfig, {});
-
-// One store per alias. Each line imports the class above and constructs it
-// with the alias's `config`. Adding a new alias = add an import + a line.
-const appData = new BackendAPIStore(config.datasets.appData.config);
-// Direct-to-Fuseki alternative (no creds in browser):
-// const appData = new FusekiStore(config.datasets.appData.config);
-
-// Shape → alias. For multi-alias setups add per-shape pins, e.g.:
-//   import { PageView } from './shapes/PageView';
-//   LinkedStorage.setDatasetForShapes(analytics, [PageView]);
-LinkedStorage.setDefaultDataset(appData);
-
-// File asset URLs.
-LinkedFileStorage.setDefaultAccessURL(getAccessUrlLocalFileStore());

package/defaults/app-with-backend/src/package.ts

@@ -1,16 +0,0 @@
-// Imports from `@_linked/react/package` (not `@_linked/core/utils/Package`)
-// because `linkedComponent` / `linkedSetComponent` are React-only — they
-// don't exist on core's LinkedPackageObject. The react helper composes
-// React-only fns on top of everything core's linkedPackage provides.
-import { linkedPackage } from '@_linked/react/package';
-
-export const {
-  linkedComponent,
-  linkedSetComponent,
-  linkedShape,
-  linkedUtil,
-  linkedOntology,
-  registerPackageExport,
-  packageExports,
-  packageName,
-} = linkedPackage('${hyphen_name}');

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

@@ -1,23 +0,0 @@
-@import '@_linked/css/package.css';
-
-.Home {
-  display: block;
-  margin: --spacing(4) 0;
-}
-
-.Home code {
-  font-family: var(--font-mono);
-  background: var(--bg-section);
-  padding: 0 --spacing(1);
-  border-radius: var(--radius-element);
-  font-size: 0.85em;
-}
-
-.Home pre {
-  padding: --spacing(4);
-  background: var(--bg-section);
-  border-radius: var(--radius-element);
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  margin: --spacing(2) 0;
-}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { DefaultLayout } from '../layout/DefaultLayout';
-import { PersonOverview } from '../components/PersonOverview';
-import style from './Home.module.css';
-
-export default function Home() {
-  return (
-    <DefaultLayout>
-      <div className={style.Home}>
-        <PersonOverview />
-      </div>
-    </DefaultLayout>
-  );
-}

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

@@ -1,111 +0,0 @@
-@import '@_linked/css/package.css';
-
-.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);
-}
-
-.Header h2 {
-  margin: 0 0 --spacing(2);
-}
-
-.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);
-}
-
-/* Radix marks inactive Tabs.Content with both the [hidden] attribute and
-   data-state="inactive". The display:grid above would otherwise win over
-   the user-agent's [hidden] rule and leave inactive panels visible as
-   empty grid containers. */
-.TabPanel[hidden],
-.TabPanel[data-state='inactive'] {
-  display: none;
-}
-
-.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;
-}