@byline/host-tanstack-start 0.9.3

package/package.json

@@ -0,0 +1,164 @@
+{
+  "name": "@byline/host-tanstack-start",
+  "private": false,
+  "type": "module",
+  "license": "MPL-2.0",
+  "version": "0.9.3",
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "description": "TanStack Start host adapter for Byline CMS — server fns, auth context, integration glue, admin shell, and route factories",
+  "keywords": [
+    "cms",
+    "headless cms",
+    "content management",
+    "tanstack",
+    "tanstack start"
+  ],
+  "homepage": "https://github.com/Byline-CMS/bylinecms.dev",
+  "bugs": {
+    "url": "https://github.com/Byline-CMS/bylinecms.dev/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byline-CMS/bylinecms.dev.git",
+    "directory": "packages/host-tanstack-start"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "main": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./server-fns/admin-account": {
+      "types": "./dist/server-fns/admin-account/index.d.ts",
+      "import": "./dist/server-fns/admin-account/index.js"
+    },
+    "./server-fns/admin-permissions": {
+      "types": "./dist/server-fns/admin-permissions/index.d.ts",
+      "import": "./dist/server-fns/admin-permissions/index.js"
+    },
+    "./server-fns/admin-roles": {
+      "types": "./dist/server-fns/admin-roles/index.d.ts",
+      "import": "./dist/server-fns/admin-roles/index.js"
+    },
+    "./server-fns/admin-users": {
+      "types": "./dist/server-fns/admin-users/index.d.ts",
+      "import": "./dist/server-fns/admin-users/index.js"
+    },
+    "./server-fns/auth": {
+      "types": "./dist/server-fns/auth/index.d.ts",
+      "import": "./dist/server-fns/auth/index.js"
+    },
+    "./server-fns/collections": {
+      "types": "./dist/server-fns/collections/index.d.ts",
+      "import": "./dist/server-fns/collections/index.js"
+    },
+    "./server-fns/preview": {
+      "types": "./dist/server-fns/preview/index.d.ts",
+      "import": "./dist/server-fns/preview/index.js"
+    },
+    "./server-fns/*": {
+      "types": "./dist/server-fns/*.d.ts",
+      "import": "./dist/server-fns/*.js"
+    },
+    "./auth/*": {
+      "types": "./dist/auth/*.d.ts",
+      "import": "./dist/auth/*.js"
+    },
+    "./integrations/*": {
+      "types": "./dist/integrations/*.d.ts",
+      "import": "./dist/integrations/*.js"
+    },
+    "./admin-shell/*": {
+      "types": "./dist/admin-shell/*.d.ts",
+      "import": "./dist/admin-shell/*.js"
+    },
+    "./routes": {
+      "types": "./dist/routes/index.d.ts",
+      "import": "./dist/routes/index.js"
+    },
+    "./routes/*": {
+      "types": "./dist/routes/*.d.ts",
+      "import": "./dist/routes/*.js"
+    }
+  },
+  "dependencies": {
+    "@infonomic/uikit": "^6.7.1",
+    "classnames": "^2.5.1",
+    "npm-run-all": "^4.1.5",
+    "react-json-view-lite": "^2.5.0",
+    "react-swipeable": "^7.0.2",
+    "uuid": "^14.0.0",
+    "zod": "^4.4.2",
+    "@byline/admin": "0.9.3",
+    "@byline/auth": "0.9.3",
+    "@byline/core": "0.9.3",
+    "@byline/ui": "0.9.3",
+    "@byline/client": "0.9.3"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "^1.167.0",
+    "@tanstack/react-start": "^1.167.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@byline/db-postgres": "0.9.3",
+    "@byline/storage-local": "0.9.3"
+  },
+  "peerDependenciesMeta": {
+    "@byline/db-postgres": {
+      "optional": false
+    },
+    "@byline/storage-local": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.14",
+    "@rsbuild/plugin-react": "^2.0.0",
+    "@rslib/core": "^0.21.3",
+    "@tanstack/react-router": "^1.169.1",
+    "@tanstack/react-start": "^1.167.61",
+    "@types/node": "^25.6.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "lightningcss": "^1.32.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "rimraf": "^6.1.3",
+    "typescript": "6.0.3",
+    "typescript-plugin-css-modules": "^5.2.0",
+    "vitest": "^4.1.5",
+    "@byline/db-postgres": "0.9.3",
+    "@byline/storage-local": "0.9.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "files": [
+      "dist/",
+      "src/"
+    ]
+  },
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:code": "rslib build --watch",
+    "build": "run-s build:*",
+    "build:clean": "rimraf dist build",
+    "build:code": "rslib build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf node_modules dist build types .turbo",
+    "lint": "biome check --write --unsafe --diagnostic-level=error",
+    "test": "vitest run --mode=node"
+  }
+}

package/src/admin-shell/admin-roles/container.module.css

@@ -0,0 +1,132 @@
+/**
+ * RoleContainer — detail view shell for a single admin role.
+ *
+ * Override handles:
+ *   .byline-role-detail-card        — top role-details panel
+ *   .byline-role-detail-head        — title + action-buttons row
+ *   .byline-role-detail-actions     — Edit/Delete buttons cluster
+ *   .byline-role-detail-grid        — main metadata grid
+ *   .byline-role-detail-meta        — created/updated tiny grid
+ *   .byline-role-detail-not-set     — italic "Not set" markers
+ *   .byline-role-detail-drawer-content — scrollable drawer body
+ *   .byline-role-detail-modal       — modal container sizing
+ *   .byline-role-detail-modal-head  — modal title + close
+ */
+
+.card,
+:global(.byline-role-detail-card) {
+  margin-bottom: 1.5rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: 0.125rem;
+  background-color: var(--canvas-25);
+  padding: 1rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .card,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-role-detail-card) {
+  border-color: var(--gray-700);
+  background-color: var(--canvas-800);
+}
+
+.head,
+:global(.byline-role-detail-head) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.actions,
+:global(.byline-role-detail-actions) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.title,
+:global(.byline-role-detail-title) {
+  margin: 0;
+}
+
+.grid,
+:global(.byline-role-detail-grid) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+@media (min-width: 40rem) {
+  .grid,
+  :global(.byline-role-detail-grid) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .gridFull,
+  :global(.byline-role-detail-grid-full) {
+    grid-column: span 2 / span 2;
+  }
+}
+
+.row,
+:global(.byline-role-detail-row) {
+  margin: 0;
+}
+
+.meta,
+:global(.byline-role-detail-meta) {
+  display: grid;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+}
+
+@media (min-width: 40rem) {
+  .meta,
+  :global(.byline-role-detail-meta) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.notSet,
+:global(.byline-role-detail-not-set) {
+  font-style: italic;
+}
+
+.drawerContent,
+:global(.byline-role-detail-drawer-content) {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+}
+
+.drawer,
+:global(.byline-role-detail-drawer) {
+  /* width handled via uikit prop */
+}
+
+@media (min-width: 48rem) {
+  .drawer,
+  :global(.byline-role-detail-drawer) {
+    width: 500px;
+  }
+}
+
+.modal,
+:global(.byline-role-detail-modal) {
+  /* default sizing applied via uikit's Modal.Container */
+}
+
+@media (min-width: 40rem) {
+  .modal,
+  :global(.byline-role-detail-modal) {
+    margin-bottom: 6rem;
+    max-width: 550px;
+  }
+}
+
+.modalHead,
+:global(.byline-role-detail-modal-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}

package/src/admin-shell/admin-roles/container.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Detail view for a single admin role.
+ *
+ * Layout:
+ *   - **Header panel** (single, full-width): role identity (name,
+ *     machine_name, description, timestamps) plus `Edit Details` and
+ *     `Delete Role` buttons. The drawer continues to host the edit
+ *     form; the modal hosts the delete confirmation.
+ *   - **Permissions list** (full-width, inline): the per-role ability
+ *     editor in `RolePermissions`. Defaults to view mode; click Edit
+ *     in its controls row to switch to interactive checkboxes.
+ *
+ * The drawer is now used only for editing role details; the permissions
+ * editor is inline. This trades a single drawer surface for a full-page
+ * inspector-style view.
+ */
+
+import type React from 'react'
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { LocalDateTime, RolePermissions, UpdateRole } from '@byline/ui'
+import {
+  Button,
+  CloseIcon,
+  Drawer,
+  IconButton,
+  Modal,
+  useToastManager,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './container.module.css'
+import { DeleteRole } from './delete.js'
+import type {
+  ListRegisteredAbilitiesResponse,
+  SetRoleAbilitiesResponse,
+} from '../../server-fns/admin-permissions/index.js'
+import type { AdminRoleResponse } from '../../server-fns/admin-roles/index.js'
+
+type ComponentKey = 'update' | 'delete_role' | 'empty'
+
+interface PanelProps {
+  role: AdminRoleResponse
+  onClose?: () => void
+  onSuccess?: (role: AdminRoleResponse) => void
+}
+
+const panels: Record<ComponentKey, { title: string; component: React.ComponentType<PanelProps> }> =
+  {
+    update: { title: 'Role Details', component: UpdateRole },
+    delete_role: { title: 'Delete Admin Role', component: DeleteRole },
+    empty: { title: '', component: () => null },
+  }
+
+interface RoleContainerProps {
+  role: AdminRoleResponse
+  registered: ListRegisteredAbilitiesResponse
+  initialAbilities: string[]
+}
+
+export function RoleContainer({ role, registered, initialAbilities }: RoleContainerProps) {
+  const router = useRouter()
+  const toastManager = useToastManager()
+  const [currentRole, setCurrentRole] = useState<AdminRoleResponse>(role)
+  const [currentAbilities, setCurrentAbilities] = useState<string[]>(initialAbilities)
+  const [current, setCurrent] = useState<ComponentKey>('empty')
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const openDrawer = (key: ComponentKey) => () => {
+    setCurrent(key)
+    setIsDrawerOpen(true)
+  }
+  const openModal = (key: ComponentKey) => () => {
+    setCurrent(key)
+    setIsModalOpen(true)
+  }
+  const closeDrawer = () => {
+    setCurrent('empty')
+    setIsDrawerOpen(false)
+  }
+  const closeModal = () => {
+    setCurrent('empty')
+    setIsModalOpen(false)
+  }
+
+  const handleSuccess = (updated: AdminRoleResponse) => {
+    setCurrentRole(updated)
+  }
+
+  const handlePermissionsSaved = (response: SetRoleAbilitiesResponse) => {
+    setCurrentAbilities(response.abilities)
+    void router.invalidate()
+    toastManager.add({
+      title: 'Permissions saved',
+      description: `${response.abilities.length} abilities granted to ${currentRole.name}.`,
+      data: { intent: 'success' },
+    })
+  }
+
+  const Panel = panels[current].component
+
+  return (
+    <>
+      <div className={cx('byline-role-detail-card', styles.card)}>
+        <div className={cx('byline-role-detail-head', styles.head)}>
+          <h2 className={cx('byline-role-detail-title', styles.title)}>Role Details</h2>
+          <div className={cx('byline-role-detail-actions', styles.actions)}>
+            <Button size="xs" intent="secondary" onClick={openDrawer('update')}>
+              Edit Details
+            </Button>
+            <Button size="xs" intent="danger" onClick={openModal('delete_role')}>
+              Delete Role
+            </Button>
+          </div>
+        </div>
+        <div className={cx('byline-role-detail-grid', styles.grid)}>
+          <p className={cx('byline-role-detail-row', styles.row)}>
+            <span className="muted">Name:</span> {currentRole.name}
+          </p>
+          <p className={cx('byline-role-detail-row', styles.row)}>
+            <span className="muted">Machine name:</span> {currentRole.machine_name}
+          </p>
+          <p
+            className={cx(
+              'byline-role-detail-row byline-role-detail-grid-full',
+              styles.row,
+              styles.gridFull
+            )}
+          >
+            <span className="muted">Description:</span>{' '}
+            {currentRole.description ?? (
+              <span className={cx('muted byline-role-detail-not-set', styles.notSet)}>Not set</span>
+            )}
+          </p>
+        </div>
+        <div className={cx('muted byline-role-detail-meta', styles.meta)}>
+          <p className={cx('byline-role-detail-row', styles.row)}>
+            <span className="font-bold">Created:&nbsp;</span>
+            <LocalDateTime value={currentRole.created_at} />
+          </p>
+          <p className={cx('byline-role-detail-row', styles.row)}>
+            <span className="font-bold">Updated:&nbsp;</span>
+            <LocalDateTime value={currentRole.updated_at} />
+          </p>
+        </div>
+      </div>
+
+      <RolePermissions
+        role={currentRole}
+        registered={registered}
+        initialAbilities={currentAbilities}
+        onSaved={handlePermissionsSaved}
+      />
+
+      <Drawer
+        id="admin-role-drawer"
+        closeOnOverlayClick={false}
+        width="medium"
+        topOffset="46px"
+        isOpen={isDrawerOpen}
+        onDismiss={closeDrawer}
+        className={cx('byline-role-detail-drawer', styles.drawer)}
+      >
+        <Drawer.Container aria-hidden={!isDrawerOpen} className="p-2">
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton aria-label="Close" size="sm" onClick={closeDrawer}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header>
+            <h2>{panels[current].title}</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={cx('byline-role-detail-drawer-content', styles.drawerContent)}>
+              <Panel role={currentRole} onClose={closeDrawer} onSuccess={handleSuccess} />
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+
+      <Modal isOpen={isModalOpen} onDismiss={closeModal} closeOnOverlayClick={false}>
+        <Modal.Container className={cx('byline-role-detail-modal', styles.modal)}>
+          <Modal.Header className={cx('byline-role-detail-modal-head', styles.modalHead)}>
+            <h3 className="m-0">{panels[current].title}</h3>
+            <IconButton aria-label="Close" size="sm" onClick={closeModal}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Panel role={currentRole} onClose={closeModal} onSuccess={handleSuccess} />
+        </Modal.Container>
+      </Modal>
+    </>
+  )
+}

package/src/admin-shell/admin-roles/delete.module.css

@@ -0,0 +1,52 @@
+/**
+ * DeleteRole — modal body for permanent role deletion.
+ *
+ * Override handles:
+ *   .byline-role-delete-content   — outer Modal.Content (gap)
+ *   .byline-role-delete-body      — vertical stack of role identity rows
+ *   .byline-role-delete-warning   — red warning paragraph
+ *   .byline-role-delete-actions   — Cancel/Delete row
+ *   .byline-role-delete-button    — action buttons (min-width)
+ */
+
+.content,
+:global(.byline-role-delete-content) {
+  gap: 0.25rem;
+}
+
+.body,
+:global(.byline-role-delete-body) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row,
+:global(.byline-role-delete-row) {
+  margin: 0;
+}
+
+.warning,
+:global(.byline-role-delete-warning) {
+  margin-top: 0.75rem;
+  color: var(--red-600);
+}
+
+:is([data-theme="dark"], :global(.dark)) .warning,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-role-delete-warning) {
+  color: var(--red-300);
+}
+
+.actions,
+:global(.byline-role-delete-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.button,
+:global(.byline-role-delete-button) {
+  min-width: 4rem;
+}

package/src/admin-shell/admin-roles/delete.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * Delete-role modal body. Rendered inside the role-detail container's
+ * `<Modal.Container>`. On success we navigate back to the role list —
+ * the record that hosts this view no longer exists.
+ *
+ * Cascading deletes remove role ↔ user assignments and per-role
+ * permission grants automatically (FK cascades on the join tables).
+ */
+
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { Alert, Button, LoaderEllipsis, Modal } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { type AdminRoleResponse, deleteAdminRole } from '../../server-fns/admin-roles/index.js'
+import { useNavigate } from '../chrome/loose-router.js'
+import styles from './delete.module.css'
+
+interface DeleteRoleProps {
+  role: AdminRoleResponse
+  onClose?: () => void
+  onSuccess?: (role: AdminRoleResponse) => void
+}
+
+export function DeleteRole({ role, onClose }: DeleteRoleProps) {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+
+  async function handleDelete() {
+    if (pending) return
+    setPending(true)
+    setError(null)
+    try {
+      await deleteAdminRole({ data: { id: role.id, vid: role.vid } })
+      onClose?.()
+      // Invalidate before navigating so the list-route loader is
+      // forced to re-fetch — without this, TanStack Router can serve
+      // the cached pre-delete list.
+      await router.invalidate()
+      navigate({ to: '/admin/roles' as never })
+    } catch (err) {
+      const code = getErrorCode(err)
+      if (code === 'admin.roles.versionConflict') {
+        setError(
+          'This role has been modified elsewhere since you opened this dialog. Close and reload before trying again.'
+        )
+      } else if (code === 'admin.roles.notFound') {
+        setError('This role has already been deleted.')
+      } else {
+        setError('Could not delete this role. Please try again.')
+      }
+      setPending(false)
+    }
+  }
+
+  return (
+    <Modal.Content className={cx('byline-role-delete-content', styles.content)}>
+      <div className={cx('byline-role-delete-body', styles.body)}>
+        {error ? (
+          <Alert intent="danger" close={false}>
+            {error}
+          </Alert>
+        ) : null}
+        <p className={cx('byline-role-delete-row', styles.row)}>
+          <span className="muted">Role:</span> {role.name}
+        </p>
+        <p className={cx('byline-role-delete-row', styles.row)}>
+          <span className="muted">Machine name:</span> {role.machine_name}
+        </p>
+        <p className={cx('byline-role-delete-warning', styles.warning)}>
+          This will permanently delete the role. Any users assigned to it lose the role; any
+          per-role ability grants are removed. The action cannot be undone.
+        </p>
+      </div>
+      <div className={cx('byline-role-delete-actions', styles.actions)}>
+        <Button
+          type="button"
+          intent="secondary"
+          size="sm"
+          onClick={onClose}
+          disabled={pending}
+          className={cx('byline-role-delete-button', styles.button)}
+        >
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          intent="danger"
+          onClick={handleDelete}
+          disabled={pending}
+          className={cx('byline-role-delete-button', styles.button)}
+        >
+          {pending === true ? <LoaderEllipsis size={42} /> : 'Delete Role'}
+        </Button>
+      </div>
+    </Modal.Content>
+  )
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}