@byline/host-tanstack-start 0.9.3

package/src/admin-shell/chrome/preview-toggle.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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
+ */
+
+/**
+ * Drawer-side toggle for front-end preview mode — the source-of-truth
+ * affordance for the `byline_preview` cookie.
+ *
+ * Sits above Account in the menu drawer. Reflects the current cookie
+ * state (which is httpOnly, so we read it via `getPreviewStateFn`) and
+ * flips it via `enablePreviewModeFn` / `disablePreviewModeFn`. The
+ * per-document `<PreviewLink>` icon also enables the cookie as a side
+ * effect of clicking through, but the toggle is what makes the state
+ * visible and reversible from the admin UI itself.
+ *
+ * Renders nothing until the initial cookie state has resolved — keeps
+ * the toggle from flickering ON→OFF on first paint.
+ */
+
+import { useEffect, useState } from 'react'
+
+import { EyeClosedIcon, EyeOpenIcon } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import {
+  disablePreviewModeFn,
+  enablePreviewModeFn,
+  getPreviewStateFn,
+} from '../../server-fns/preview/index.js'
+
+interface PreviewToggleProps {
+  compact: boolean
+}
+
+export function PreviewToggle({ compact }: PreviewToggleProps) {
+  const [preview, setPreview] = useState<boolean | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    getPreviewStateFn()
+      .then((res) => {
+        if (!cancelled) setPreview(res.preview)
+      })
+      .catch(() => {
+        if (!cancelled) setPreview(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const handleToggle = async () => {
+    if (busy || preview == null) return
+    setBusy(true)
+    try {
+      if (preview) {
+        await disablePreviewModeFn()
+        setPreview(false)
+      } else {
+        await enablePreviewModeFn()
+        setPreview(true)
+      }
+    } catch {
+      // No toast surface from inside the drawer; revert by re-fetching.
+      try {
+        const res = await getPreviewStateFn()
+        setPreview(res.preview)
+      } catch {
+        setPreview(false)
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Hide entirely until first read resolves so the label doesn't flicker.
+  if (preview == null) return null
+
+  const label = preview ? 'Preview ON' : 'Preview OFF'
+  const icon = preview ? (
+    <EyeOpenIcon width="20px" height="20px" />
+  ) : (
+    <EyeClosedIcon width="20px" height="20px" />
+  )
+
+  return (
+    <li className={cx('menu-item byline-preview-toggle', { compact, active: preview })}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        disabled={busy}
+        aria-label={preview ? 'Disable preview mode' : 'Enable preview mode'}
+        title={
+          preview ? 'Drafts are visible on the public site' : 'Public site shows published only'
+        }
+      >
+        <span className="icon">{icon}</span>
+        <span className="label">{label}</span>
+      </button>
+    </li>
+  )
+}

package/src/admin-shell/chrome/route-error.module.css

@@ -0,0 +1,114 @@
+/**
+ * Route-level error / not-found components.
+ *
+ * Override handles:
+ *   .byline-route-error                — outer Section
+ *   .byline-route-error-container      — inner Container
+ *   .byline-route-error-message        — alert body paragraph
+ *   .byline-route-error-actions        — button row
+ *   .byline-route-error-link           — secondary "Go to homepage" link
+ *   .byline-root-error                 — root fallback wrapper
+ *   .byline-root-error-inner           — root fallback content
+ *   .byline-root-error-title           — root fallback heading
+ *   .byline-root-error-detail          — root fallback message
+ *   .byline-root-error-button          — root fallback retry button
+ */
+
+.section,
+:global(.byline-route-error) {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.container,
+:global(.byline-route-error-container) {
+  margin-top: 8vh;
+  max-width: 42rem;
+}
+
+@media (min-width: 40rem) {
+  .container,
+  :global(.byline-route-error-container) {
+    margin-top: 12vh;
+  }
+}
+
+.message,
+:global(.byline-route-error-message) {
+  margin-top: 0.25rem;
+}
+
+.actions,
+:global(.byline-route-error-actions) {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.link,
+:global(.byline-route-error-link) {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875rem;
+  text-decoration: underline;
+}
+.link:hover,
+:global(.byline-route-error-link:hover) {
+  text-decoration: none;
+}
+
+.rootRoot,
+:global(.byline-root-error) {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.rootInner,
+:global(.byline-root-error-inner) {
+  max-width: 28rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.rootTitle,
+:global(.byline-root-error-title) {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #dc2626;
+}
+
+:is([data-theme="dark"], :global(.dark)) .rootTitle,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-title) {
+  color: #f87171;
+}
+
+.rootDetail,
+:global(.byline-root-error-detail) {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+}
+
+:is([data-theme="dark"], :global(.dark)) .rootDetail,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-detail) {
+  color: var(--gray-400);
+}
+
+.rootButton,
+:global(.byline-root-error-button) {
+  border-radius: 0.25rem;
+  background-color: #dc2626;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: #ffffff;
+  border: 0;
+  cursor: pointer;
+}
+.rootButton:hover,
+:global(.byline-root-error-button:hover) {
+  background-color: #b91c1c;
+}

package/src/admin-shell/chrome/route-error.tsx

@@ -0,0 +1,125 @@
+/**
+ * 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
+ *
+ * Route-level error and not-found components for TanStack Router.
+ *
+ * These are designed to be used as `errorComponent` and `notFoundComponent`
+ * on layout routes (root, admin, public) so that errors render inside the
+ * appropriate shell rather than blowing away the entire page.
+ */
+
+import type { ErrorComponentProps, NotFoundRouteProps } from '@tanstack/react-router'
+import { useRouter } from '@tanstack/react-router'
+
+import { BylineError, ErrorCodes } from '@byline/core'
+import { Alert, Button, Container, Section } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import styles from './route-error.module.css'
+
+const ERROR_TITLES: Record<string, string> = {
+  [ErrorCodes.NOT_FOUND]: 'Not Found',
+  [ErrorCodes.VALIDATION]: 'Validation Error',
+  [ErrorCodes.CONFLICT]: 'Conflict',
+  [ErrorCodes.INVALID_TRANSITION]: 'Invalid Transition',
+  [ErrorCodes.PATCH_FAILED]: 'Update Failed',
+  [ErrorCodes.DATABASE]: 'Database Error',
+  [ErrorCodes.STORAGE]: 'Storage Error',
+  [ErrorCodes.UNHANDLED]: 'Unexpected Error',
+}
+
+function getErrorTitle(error: unknown): string {
+  if (error instanceof BylineError) {
+    return ERROR_TITLES[error.code] ?? 'Unexpected Error'
+  }
+  return 'Unexpected Error'
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof BylineError) {
+    return error.message
+  }
+  if (error instanceof Error) {
+    return error.message
+  }
+  return 'An unexpected error occurred. Please try again.'
+}
+
+export function RouteError({ error, reset }: ErrorComponentProps) {
+  const router = useRouter()
+
+  return (
+    <Section className={cx('byline-route-error', styles.section)}>
+      <Container className={cx('byline-route-error-container', styles.container)}>
+        <Alert intent="danger" icon close={false} title={getErrorTitle(error)}>
+          <p className={cx('byline-route-error-message', styles.message)}>
+            {getErrorMessage(error)}
+          </p>
+          <div className={cx('byline-route-error-actions', styles.actions)}>
+            <Button
+              variant="outlined"
+              size="sm"
+              intent="danger"
+              onClick={() => {
+                reset()
+                router.invalidate()
+              }}
+            >
+              Try again
+            </Button>
+            <a href="/" className={cx('byline-route-error-link', styles.link)}>
+              Go to homepage
+            </a>
+          </div>
+        </Alert>
+      </Container>
+    </Section>
+  )
+}
+
+export function RouteNotFound(_props: NotFoundRouteProps) {
+  return (
+    <Section className={cx('byline-route-error', styles.section)}>
+      <Container className={cx('byline-route-error-container', styles.container)}>
+        <Alert intent="warning" icon close={false} title="Page Not Found">
+          <p className={cx('byline-route-error-message', styles.message)}>
+            The page you are looking for does not exist or has been moved.
+          </p>
+          <div className={cx('byline-route-error-actions', styles.actions)}>
+            <a href="/" className={cx('byline-route-error-link', styles.link)}>
+              Go to homepage
+            </a>
+          </div>
+        </Alert>
+      </Container>
+    </Section>
+  )
+}
+
+/**
+ * Minimal fallback for when providers may be broken. Used at the root
+ * route, where wrapping in Container/Section may itself be unsafe.
+ */
+export function RootError({ error, reset }: ErrorComponentProps) {
+  return (
+    <div className={cx('byline-root-error', styles.rootRoot)}>
+      <div className={cx('byline-root-error-inner', styles.rootInner)}>
+        <h1 className={cx('byline-root-error-title', styles.rootTitle)}>Something went wrong</h1>
+        <p className={cx('byline-root-error-detail', styles.rootDetail)}>
+          {getErrorMessage(error)}
+        </p>
+        <button
+          type="button"
+          onClick={reset}
+          className={cx('byline-root-error-button', styles.rootButton)}
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/admin-shell/chrome/router-pager.tsx

@@ -0,0 +1,179 @@
+/**
+ * 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
+ */
+
+import { useRouterState } from '@tanstack/react-router'
+
+import type { PaginationProps } from '@infonomic/uikit/react'
+import {
+  ChevronLeftDoubleIcon,
+  ChevronLeftIcon,
+  ChevronRightDoubleIcon,
+  ChevronRightIcon,
+  Pagination,
+} from '@infonomic/uikit/react'
+
+import { Link } from './loose-router.js'
+
+interface RouterPageProps extends PaginationProps {
+  smoothScrollToTop?: boolean
+}
+
+/**
+ * A convenience pager wrapped around uikit's Pagination with `asChild`
+ * targets that delegate to TanStack Router's `<Link>`. `asChild` merges
+ * the existing button styles into the rendered Link.
+ */
+export function RouterPager({
+  className,
+  smoothScrollToTop,
+  'aria-label': ariaLabel,
+  ...rest
+}: RouterPageProps): React.JSX.Element {
+  const location = useRouterState({ select: (s) => s.location })
+
+  return (
+    <Pagination variant="dashboard" {...rest}>
+      <Pagination.Root className={className} ariaLabel={ariaLabel}>
+        <Pagination.Pager
+          renderFirst={(key, item) => {
+            const params = structuredClone(location.search)
+            delete params.page
+            return (
+              <Pagination.First
+                render={
+                  item.disabled ? (
+                    <div />
+                  ) : (
+                    <Link
+                      resetScroll={smoothScrollToTop !== true}
+                      to={location.pathname as never}
+                      search={params}
+                    />
+                  )
+                }
+                key={key}
+                disabled={item.disabled}
+              >
+                <ChevronLeftDoubleIcon />
+              </Pagination.First>
+            )
+          }}
+          renderPrevious={(key, item) => {
+            const params = structuredClone(location.search)
+            if (item?.page) {
+              params.page = item.page
+            }
+            return (
+              <Pagination.Previous
+                render={
+                  item.disabled ? (
+                    <div />
+                  ) : (
+                    <Link
+                      resetScroll={smoothScrollToTop !== true}
+                      to={location.pathname as never}
+                      search={params}
+                    />
+                  )
+                }
+                key={key}
+                disabled={item.disabled}
+              >
+                <ChevronLeftIcon />
+              </Pagination.Previous>
+            )
+          }}
+          renderPageNumber={(key, item) => {
+            const params = structuredClone(location.search)
+            if (item?.page === 1) {
+              delete params.page
+            } else if (item?.page) {
+              params.page = item.page
+            }
+            return (
+              <Pagination.Number
+                render={
+                  item.disabled ? (
+                    <div />
+                  ) : (
+                    <Link
+                      resetScroll={smoothScrollToTop !== true}
+                      to={location.pathname as never}
+                      search={params}
+                    />
+                  )
+                }
+                key={key}
+                page={item.page}
+                selected={item.selected}
+                disabled={item.disabled}
+              >
+                {item.page}
+              </Pagination.Number>
+            )
+          }}
+          renderNext={(key, item) => {
+            const params = structuredClone(location.search)
+            if (item?.page) {
+              params.page = item.page
+            }
+            return (
+              <Pagination.Next
+                render={
+                  item.disabled ? (
+                    <div />
+                  ) : (
+                    <Link
+                      resetScroll={smoothScrollToTop !== true}
+                      to={location.pathname as never}
+                      search={params}
+                    />
+                  )
+                }
+                key={key}
+                page={item.page}
+                disabled={item.disabled}
+              >
+                <ChevronRightIcon />
+              </Pagination.Next>
+            )
+          }}
+          renderLast={(key, item, count) => {
+            const params = structuredClone(location.search)
+            if (count) {
+              params.page = count
+            }
+            return (
+              <Pagination.Last
+                render={
+                  item.disabled ? (
+                    <div />
+                  ) : (
+                    <Link
+                      resetScroll={smoothScrollToTop !== true}
+                      to={location.pathname as never}
+                      search={params}
+                    />
+                  )
+                }
+                key={key}
+                disabled={item.disabled}
+                count={count}
+              >
+                <ChevronRightDoubleIcon />
+              </Pagination.Last>
+            )
+          }}
+          renderEllipses={(key) => {
+            return <Pagination.Ellipses key={key} />
+          }}
+        />
+      </Pagination.Root>
+    </Pagination>
+  )
+}

package/src/admin-shell/chrome/sign-in-page.module.css

@@ -0,0 +1,32 @@
+/**
+ * SignInPage — outer wrapper for the sign-in form.
+ *
+ * Override handles:
+ *   .byline-sign-in-page    — outer <main>
+ *   .byline-sign-in-page-inner — vertically-centred card container
+ */
+
+.main,
+:global(.byline-sign-in-page) {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.inner,
+:global(.byline-sign-in-page-inner) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 8vh;
+}
+
+@media (min-width: 40rem) {
+  .inner,
+  :global(.byline-sign-in-page-inner) {
+    margin-top: 14vh;
+  }
+}

package/src/admin-shell/chrome/sign-in-page.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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
+ */
+
+import { BylineAdminServicesProvider, SignInForm } from '@byline/ui'
+import cx from 'classnames'
+
+import { bylineAdminServices } from '../../integrations/byline-admin-services.js'
+import styles from './sign-in-page.module.css'
+
+interface SignInPageProps {
+  callbackUrl?: string
+}
+
+/**
+ * Sign-in page chrome — rendered outside the authenticated admin
+ * layout (no app bar, breadcrumbs, or menu drawer). Wraps the
+ * `SignInForm` from `@byline/ui` in the admin services provider so
+ * the form can call `signIn` via the typed contract.
+ */
+export function SignInPage({ callbackUrl }: SignInPageProps) {
+  return (
+    <BylineAdminServicesProvider services={bylineAdminServices}>
+      <main className={cx('byline-sign-in-page', styles.main)}>
+        <div className={cx('byline-sign-in-page-inner', styles.inner)}>
+          <SignInForm callbackUrl={callbackUrl} />
+        </div>
+      </main>
+    </BylineAdminServicesProvider>
+  )
+}