npm - @_linked/cli - Versions diffs - 1.4.2 → 1.4.3 - Mend

@_linked/cli 1.4.2 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/CHANGELOG.md +8 -0
package/defaults/app-static/src/index-static.tsx +22 -0
package/defaults/app-with-backend/src/App.module.css +32 -0
package/defaults/app-with-backend/src/App.tsx +30 -0
package/defaults/app-with-backend/src/backend.ts +9 -0
package/defaults/app-with-backend/src/components/Error.module.css +9 -0
package/defaults/app-with-backend/src/components/Error.tsx +11 -0
package/defaults/app-with-backend/src/components/PersonOverview.module.css +100 -0
package/defaults/app-with-backend/src/components/PersonOverview.tsx +97 -0
package/defaults/app-with-backend/src/components/PersonOverviewContext.tsx +12 -0
package/defaults/app-with-backend/src/components/PersonPreview.module.css +97 -0
package/defaults/app-with-backend/src/components/PersonPreview.tsx +107 -0
package/defaults/app-with-backend/src/components/Spinner.module.css +17 -0
package/defaults/app-with-backend/src/components/Spinner.tsx +12 -0
package/defaults/app-with-backend/src/index.tsx +34 -0
package/defaults/app-with-backend/src/layout/DefaultLayout.module.css +15 -0
package/defaults/app-with-backend/src/layout/DefaultLayout.tsx +12 -0
package/defaults/app-with-backend/src/layout/Header.module.css +46 -0
package/defaults/app-with-backend/src/layout/Header.tsx +27 -0
package/defaults/app-with-backend/src/linked.frontend.datasets.json +12 -0
package/defaults/app-with-backend/src/linked.frontend.storage.ts +36 -0
package/defaults/app-with-backend/src/package.ts +12 -0
package/defaults/app-with-backend/src/pages/Home.module.css +23 -0
package/defaults/app-with-backend/src/pages/Home.tsx +14 -0
package/defaults/app-with-backend/src/pages/Page1.module.css +18 -0
package/defaults/app-with-backend/src/pages/Page1.tsx +16 -0
package/defaults/app-with-backend/src/pages/PageNotFound.module.css +19 -0
package/defaults/app-with-backend/src/pages/PageNotFound.tsx +14 -0
package/defaults/app-with-backend/src/pages/Signin.module.css +20 -0
package/defaults/app-with-backend/src/pages/Signin.tsx +16 -0
package/defaults/app-with-backend/src/routes.tsx +85 -0
package/defaults/app-with-backend/src/theme.css +91 -0
package/defaults/app-with-backend/src/types.ts +14 -0
package/defaults/app-with-backend/src/utils/lazyWithPreload.tsx +42 -0
package/defaults/app-with-backend/src/utils/preloadRoutes.ts +38 -0
package/defaults/app-with-backend/tsconfig.json +24 -0
package/lib/cjs/cli-deprecated.d.ts +2 -0
package/lib/cjs/cli-methods.d.ts +67 -0
package/lib/cjs/cli.d.ts +3 -0
package/lib/cjs/commands/build-package.d.ts +9 -0
package/lib/cjs/commands/safe-yarn.d.ts +10 -0
package/lib/cjs/commands/setup-publish.d.ts +23 -0
package/lib/cjs/config-webpack-app.d.ts +112 -0
package/lib/cjs/config-webpack.d.ts +55 -0
package/lib/cjs/defineConfig.d.ts +8 -0
package/lib/cjs/index.d.ts +12 -0
package/lib/cjs/interfaces.d.ts +131 -0
package/lib/cjs/loaders/register-css-only.d.ts +2 -0
package/lib/cjs/loaders/register.d.ts +2 -0
package/lib/cjs/metadata.d.ts +1 -0
package/lib/cjs/package.json +1 -1
package/lib/cjs/plugins/check-imports.d.ts +2 -0
package/lib/cjs/plugins/declaration-plugin.d.ts +15 -0
package/lib/cjs/plugins/externalise-modules.d.ts +7 -0
package/lib/cjs/plugins/lincd-tailwind-sources.d.ts +3 -0
package/lib/cjs/plugins/watch-run.d.ts +5 -0
package/lib/cjs/tailwind.config.d.ts +8 -0
package/lib/cjs/utils.d.ts +77 -0
package/lib/esm/cli-deprecated.d.ts +2 -0
package/lib/esm/cli-methods.d.ts +67 -0
package/lib/esm/cli.d.ts +3 -0
package/lib/esm/commands/build-package.d.ts +9 -0
package/lib/esm/commands/safe-yarn.d.ts +10 -0
package/lib/esm/commands/setup-publish.d.ts +23 -0
package/lib/esm/config-webpack-app.d.ts +112 -0
package/lib/esm/config-webpack.d.ts +55 -0
package/lib/esm/defineConfig.d.ts +8 -0
package/lib/esm/index.d.ts +12 -0
package/lib/esm/interfaces.d.ts +131 -0
package/lib/esm/launch.d.ts +3 -0
package/lib/esm/loaders/register-css-only.d.ts +2 -0
package/lib/esm/loaders/register.d.ts +2 -0
package/lib/esm/metadata.d.ts +1 -0
package/lib/esm/package.json +1 -1
package/lib/esm/plugins/check-imports.d.ts +2 -0
package/lib/esm/plugins/declaration-plugin.d.ts +15 -0
package/lib/esm/plugins/externalise-modules.d.ts +7 -0
package/lib/esm/plugins/lincd-tailwind-sources.d.ts +3 -0
package/lib/esm/plugins/watch-run.d.ts +5 -0
package/lib/esm/tailwind.config.d.ts +8 -0
package/lib/esm/utils.d.ts +77 -0
package/package.json +1 -1
package/tests/e2e/create-app.spec.ts +157 -0
package/tests/unit/safeYarn.test.ts +55 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,13 @@
 # Changelog
+## 1.4.3
+### Patch Changes
+- [#28](https://github.com/linked-cm/cli/pull/28) [`1d2338c`](https://github.com/linked-cm/cli/commit/1d2338c09a38e44caec2aa69a72b3feda7d098bf) Thanks [@flyon](https://github.com/flyon)! - `.npmignore` was excluding the starter template's `defaults/app-with-backend/src/` (and `scripts/`) because the `src` pattern matched **anywhere** in the tree, overriding the `!defaults/**/*` re-include. The published tarball was missing all the template's TypeScript source files, so `linked create-app` was producing apps without `src/`.
+  Anchor the cli's own-source ignore rules to the package root (`/src`, `/*.ts`, `/tsconfig.json`) and add an explicit `!defaults/**` re-include after.
 ## 1.4.2
 ### Patch Changes

package/defaults/app-static/src/index-static.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {BrowserRouter} from 'react-router-dom';
+import App from './App';
+import {AppContextProvider} from 'lincd-server-utils/lib/components/AppContext';
+//import the storage & file configuration for the frontend
+import './config-frontend';
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AppContextProvider isNativeApp={true}>
+        <App />
+      </AppContextProvider>
+    </BrowserRouter>
+  </React.StrictMode>,
+);

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

@@ -0,0 +1,32 @@
+@import '@_linked/css/package.css';
+:global(body) {
+  font-family: var(--font-sans);
+  background: var(--bg-page);
+  color: var(--color-gray-900);
+  margin: 0;
+}
+.App {
+  min-height: 100vh;
+}
+:global(h1) {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin: 0;
+}
+:global(h2) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 --spacing(3);
+}
+:global(a) {
+  color: var(--color-primary-600);
+}
+:global(a:hover) {
+  color: var(--color-primary-700);
+}

package/defaults/app-with-backend/src/App.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import './theme.css'; //needs to be the first import before importing other components
+import React, { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Spinner } from './components/Spinner';
+import { Error } from './components/Error';
+import { AppRoot } from '@_linked/server-utils/components/AppRoot';
+import { Head } from '@_linked/server-utils/components/Head';
+import { Body } from '@_linked/server-utils/components/Body';
+import AppRoutes, { ROUTES } from './routes';
+import { ProvideAuth } from '@_linked/auth/hooks/useAuth';
+import style from './App.module.css'; //import any .module.css file like this and access the classnames from the style object
+export default function App() {
+  return (
+    <AppRoot>
+      <Head>
+        {/*  Add tags to html <head> here, for example, a font <link href='https://fonts.someapi.com/...' />*/}
+      </Head>
+      <Body routes={ROUTES} pageStyles={style} className={style.App}>
+        <Suspense fallback={<Spinner />}>
+          <ErrorBoundary FallbackComponent={Error}>
+            <ProvideAuth>
+              <AppRoutes />
+            </ProvideAuth>
+          </ErrorBoundary>
+        </Suspense>
+      </Body>
+    </AppRoot>
+  );
+}

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

@@ -0,0 +1,9 @@
+//import all ShapeProviders here or define a generic BackendProvider, see https://linked.cm
+import { BackendProvider } from '@_linked/server-utils/utils/BackendProvider';
+export class Backend extends BackendProvider {
+  constructor(server, linkedServer) {
+    super(server, linkedServer);
+  }
+}

package/defaults/app-with-backend/src/components/Error.module.css ADDED Viewed

@@ -0,0 +1,9 @@
+.error {
+  color: white;
+  margin: 2rem;
+  pre {
+    white-space: pre-wrap;
+    padding: 1rem;
+  }
+}

package/defaults/app-with-backend/src/components/Error.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import style from './Error.module.css';
+export function Error({ error }) {
+  return (
+    <div className={style.error}>
+      <h1>Application Error</h1>
+      <pre>{error.stack}</pre>
+    </div>
+  );
+}

package/defaults/app-with-backend/src/components/PersonOverview.module.css ADDED Viewed

@@ -0,0 +1,100 @@
+@import '@_linked/css/package.css';
+.Root {
+  background: var(--bg-card);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  padding: --spacing(6);
+}
+.Intro {
+  color: var(--color-gray-600);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: 0 0 --spacing(5);
+}
+.Intro code {
+  background: var(--bg-section);
+  padding: 0 --spacing(1);
+  border-radius: var(--radius-element);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+.Empty {
+  color: var(--color-gray-500);
+  font-style: italic;
+  padding: --spacing(4) 0;
+  margin: 0;
+}
+.Loading {
+  color: var(--color-gray-500);
+  padding: --spacing(4) 0;
+  margin: 0;
+}
+.List {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 --spacing(5);
+}
+.List > li {
+  padding: --spacing(3) 0;
+  border-bottom: 1px solid var(--color-gray-200);
+}
+.List > li:first-child {
+  padding-top: 0;
+}
+.List > li:last-child {
+  border-bottom: none;
+}
+.Form {
+  display: flex;
+  gap: --spacing(2);
+  flex-wrap: wrap;
+  padding-top: --spacing(4);
+  border-top: 1px solid var(--color-gray-200);
+}
+.Form 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;
+}
+.Form input:focus {
+  outline: none;
+  border-color: var(--color-primary-500);
+  box-shadow: 0 0 0 2px var(--color-primary-200);
+}
+.Form button {
+  padding: --spacing(2) --spacing(5);
+  background: var(--color-primary-500);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius-element);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.Form button:hover:not(:disabled) {
+  background: var(--color-primary-600);
+}
+.Form button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/defaults/app-with-backend/src/components/PersonOverview.tsx ADDED Viewed

@@ -0,0 +1,97 @@
+// Example PersonOverview — demonstrates @_linked/react's data binding:
+// linkedSetComponent for the list (auto-runs the query, injects results and
+// an injected _refresh); linkedComponent for each row (see PersonPreview).
+// After Person.create the form calls _refresh() to re-run the list query.
+//
+// Replace or extend this with your own shapes (see https://linked.cm).
+import React, { useCallback, useRef, useState } from 'react';
+import { linkedSetComponent } from '@_linked/react';
+import { Person } from '@_linked/schema/shapes/Person';
+import { PersonPreview } from './PersonPreview';
+import { PersonListRefreshProvider } from './PersonOverviewContext';
+import style from './PersonOverview.module.css';
+const PersonList = linkedSetComponent(
+  Person.select((p) => [p.givenName, p.familyName]),
+  ({ linkedData = [], _refresh, refreshRef }: any) => {
+    // Forward the list's _refresh up via a ref so the sibling form +
+    // child rows can trigger a re-fetch through context.
+    if (refreshRef) {
+      refreshRef.current = _refresh;
+    }
+    if (linkedData.length === 0) {
+      return (
+        <p className={style.Empty}>No people yet. Add one below.</p>
+      );
+    }
+    return (
+      <ul className={style.List} data-testid="person-list">
+        {linkedData.map((p: { id: string }) => (
+          <li key={p.id}>
+            <PersonPreview of={{ id: p.id }} />
+          </li>
+        ))}
+      </ul>
+    );
+  },
+);
+function PersonAddForm({ onAdded }: { onAdded: () => void }) {
+  const [given, setGiven] = useState('');
+  const [family, setFamily] = useState('');
+  const [busy, setBusy] = useState(false);
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!given && !family) return;
+    setBusy(true);
+    try {
+      await Person.create({ givenName: given, familyName: family });
+      setGiven('');
+      setFamily('');
+      onAdded();
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <form className={style.Form} onSubmit={submit}>
+      <input
+        value={given}
+        placeholder="First name"
+        onChange={(e) => setGiven(e.target.value)}
+      />
+      <input
+        value={family}
+        placeholder="Last name"
+        onChange={(e) => setFamily(e.target.value)}
+      />
+      <button type="submit" disabled={busy}>
+        Add
+      </button>
+    </form>
+  );
+}
+export function PersonOverview() {
+  const refreshRef = useRef<() => void>(() => {});
+  const refresh = useCallback(() => refreshRef.current(), []);
+  return (
+    <PersonListRefreshProvider value={refresh}>
+      <div className={style.Root} data-testid="person-overview">
+        <h2>People</h2>
+        <p className={style.Intro}>
+          Example code using the <code>@_linked</code> query DSL against
+          your local Fuseki dataset. Edit{' '}
+          <code>src/components/PersonOverview.tsx</code> to extend it.
+        </p>
+        <PersonList refreshRef={refreshRef} />
+        <PersonAddForm onAdded={refresh} />
+      </div>
+    </PersonListRefreshProvider>
+  );
+}

package/defaults/app-with-backend/src/components/PersonOverviewContext.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+// Small context that lets PersonPreview rows trigger a list refresh on
+// their parent PersonOverview without prop-drilling through the
+// linkedSetComponent's wrapped renderer.
+import React, { useContext } from 'react';
+const PersonListRefreshContext = React.createContext<() => void>(() => {});
+export const PersonListRefreshProvider = PersonListRefreshContext.Provider;
+export function usePersonListRefresh(): () => void {
+  return useContext(PersonListRefreshContext);
+}

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

@@ -0,0 +1,97 @@
+@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 ADDED Viewed

@@ -0,0 +1,107 @@
+// 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() {
+      setBusy(true);
+      try {
+        await Person.update({
+          givenName: draftGiven,
+          familyName: draftFamily,
+        }).for(source);
+        // Optimistic patch — no extra network round-trip needed.
+        _refresh({ givenName: draftGiven, familyName: draftFamily });
+        setEditing(false);
+      } finally {
+        setBusy(false);
+      }
+    }
+    async function remove() {
+      setBusy(true);
+      try {
+        await Person.delete(source);
+        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 ADDED Viewed

@@ -0,0 +1,17 @@
+.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 ADDED Viewed

@@ -0,0 +1,12 @@
+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 ADDED Viewed

@@ -0,0 +1,34 @@
+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 ADDED Viewed

@@ -0,0 +1,15 @@
+@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 ADDED Viewed

@@ -0,0 +1,12 @@
+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 ADDED Viewed

@@ -0,0 +1,46 @@
+@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);
+}