@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/settings-profile/settings-nav.ts

@@ -0,0 +1,98 @@
+import { Bell, Building2, CreditCard, KeyRound, Palette, Plug, ShieldCheck, User, Users } from '@gntik-ai/icons';
+import type { BreadcrumbItem, NavGroup } from '@gntik-ai/ui';
+
+/** The nine settings pages, in nav order. */
+export type SettingsPageId =
+  | 'profile'
+  | 'security'
+  | 'notifications'
+  | 'appearance'
+  | 'workspace'
+  | 'members'
+  | 'billing'
+  | 'api-keys'
+  | 'integrations';
+
+export const SETTINGS_TITLES: Record<SettingsPageId, string> = {
+  profile: 'Profile',
+  security: 'Security',
+  notifications: 'Notifications',
+  appearance: 'Appearance',
+  workspace: 'Workspace',
+  members: 'Members',
+  billing: 'Billing',
+  'api-keys': 'API keys',
+  integrations: 'Integrations',
+};
+
+/** A product's own settings page, added to the shared section nav. */
+export interface SettingsNavExtraItem {
+  /** Page id (also the URL segment under `basePath`). */
+  id: string;
+  label: string;
+  icon?: NavGroup['items'][number]['icon'];
+  /** Explicit href; defaults to `${basePath}/${id}` when a basePath is set. */
+  href?: string;
+  /** Group label: "Account", "Workspace" or a new group (appended after them). Default "Workspace". */
+  group?: string;
+}
+
+/** Title of a built-in settings page; other ids fall back to the id itself. */
+export function settingsTitle(page: string): string {
+  return (SETTINGS_TITLES as Record<string, string | undefined>)[page] ?? page;
+}
+
+/**
+ * Section nav shared by every settings template. Items are keyed by page id; pass a `basePath`
+ * (e.g. "/settings") to render them as links (`/settings/profile`), otherwise they are buttons
+ * and the template's `onNavigate` does the routing. `extraItems` adds a product's own pages,
+ * at the end of their group.
+ */
+export function settingsNav(basePath?: string, extraItems: readonly SettingsNavExtraItem[] = []): NavGroup[] {
+  const href = (id: string) => (basePath === undefined ? undefined : `${basePath}/${id}`);
+  const item = (id: SettingsPageId, icon: NavGroup['items'][number]['icon']) => ({
+    id,
+    label: SETTINGS_TITLES[id],
+    icon,
+    href: href(id),
+  });
+  const groups: NavGroup[] = [
+    {
+      label: 'Account',
+      items: [
+        item('profile', User),
+        item('security', ShieldCheck),
+        item('notifications', Bell),
+        item('appearance', Palette),
+      ],
+    },
+    {
+      label: 'Workspace',
+      items: [
+        item('workspace', Building2),
+        item('members', Users),
+        item('billing', CreditCard),
+        item('api-keys', KeyRound),
+        item('integrations', Plug),
+      ],
+    },
+  ];
+  for (const extra of extraItems) {
+    const label = extra.group ?? 'Workspace';
+    let group = groups.find((g) => g.label === label);
+    if (!group) {
+      group = { label, items: [] };
+      groups.push(group);
+    }
+    group.items = [
+      ...group.items,
+      { id: extra.id, label: extra.label, icon: extra.icon, href: extra.href ?? href(extra.id) },
+    ];
+  }
+  return groups;
+}
+
+/** Topbar breadcrumb for a settings page. */
+export function settingsBreadcrumbs(page: SettingsPageId | (string & {}), title?: string): BreadcrumbItem[] {
+  return [{ label: 'Settings', href: '/settings' }, { label: title ?? settingsTitle(page) }];
+}

package/src/settings-profile/template.meta.ts

@@ -0,0 +1,21 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Profile settings',
+  family: 'Settings',
+  priority: 'P1',
+  status: 'beta',
+  description:
+    "Personal profile defaults to mode='editable': avatar header, name and email, locale and time zone, with a sticky save bar. Opt into mode='read-only' for an initials avatar without upload or Edit actions, identity and optional context description lists, and optional ordered roles badges. identity/context accept { id, label, value, mono } rows; value may be a link. contextFallback supplies missing-value text; emptyRolesMessage supplies the empty roles state. Omitted roles/context hide their sections. Read-only mode passes saveBar='none' through SettingsFrame and has no profile form controls, copy buttons or save actions; the responsive section navigation remains available.",
+  layout: 'SettingsLayout',
+  blocks: [
+    'app-sidebar',
+    'app-topbar',
+    'page-header',
+    'profile-header',
+    'form-section',
+    'sticky-action-bar',
+    'description-list-card',
+    'section-header',
+  ],
+};

package/src/settings-security/MfaSetupDialog.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  OtpInput,
+  useI18n,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+
+export interface MfaSetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  setupKey: string;
+  /** Checks the 6-digit code; resolve `true` to finish enrolment. */
+  onVerify: (code: string) => boolean | Promise<boolean>;
+}
+
+/** Authenticator enrolment: manual setup key and a 6-digit OtpInput, verified on completion. */
+export function MfaSetupDialog({ open, onOpenChange, setupKey, onVerify }: MfaSetupDialogProps) {
+  const { t } = useI18n();
+  const [code, setCode] = useState('');
+  const [invalid, setInvalid] = useState(false);
+  const [checking, setChecking] = useState(false);
+
+  const change = (next: boolean) => {
+    if (!next) {
+      setCode('');
+      setInvalid(false);
+    }
+    onOpenChange(next);
+  };
+
+  const verify = async (value: string) => {
+    if (value.length < 6 || checking) return;
+    setChecking(true);
+    const ok = await onVerify(value);
+    setChecking(false);
+    if (ok) change(false);
+    else setInvalid(true);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={change}>
+      <DialogContent>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void verify(code);
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Set up two-factor authentication</DialogTitle>
+            <DialogDescription>
+              Add this account to your authenticator app, then enter the code it shows.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody className="flex flex-col gap-5">
+            <p className="text-[12.5px] text-muted-foreground">
+              Setup key: <span className="font-mono text-foreground">{setupKey}</span>
+            </p>
+            <Field invalid={invalid}>
+              <FieldLabel>Verification code</FieldLabel>
+              <OtpInput
+                groupSize={3}
+                value={code}
+                onValueChange={(v) => {
+                  setCode(v);
+                  setInvalid(false);
+                }}
+                onComplete={(v) => void verify(v)}
+              />
+              <FieldDescription>Enter the 6-digit code from your authenticator app.</FieldDescription>
+              <FieldError match={invalid}>That code is not valid. Try again.</FieldError>
+            </Field>
+          </DialogBody>
+          <DialogFooter>
+            <DialogClose render={<Button variant="ghost" />}>{t('common.cancel')}</DialogClose>
+            <Button type="submit" loading={checking} disabled={code.length < 6}>
+              Verify and enable
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/settings-security/Page.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsSecurityPage from './Page';
+
+describe('SettingsSecurityPage', () => {
+  it('renders the password, MFA and sessions sections', () => {
+    render(<SettingsSecurityPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Security' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Security/ })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('heading', { name: 'Password' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Sessions and devices' })).toBeInTheDocument();
+  }, 15000);
+
+  it('validates the password change', async () => {
+    const onPasswordChange = vi.fn();
+    render(<SettingsSecurityPage onPasswordChange={onPasswordChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Update password' }));
+    expect(onPasswordChange).not.toHaveBeenCalled();
+    expect(screen.getByText('Enter your current password.')).toBeInTheDocument();
+    await userEvent.type(screen.getByLabelText('Current password'), 'old-password');
+    await userEvent.type(screen.getByLabelText('New password'), 'a-much-longer-secret');
+    await userEvent.type(screen.getByLabelText('Confirm new password'), 'a-much-longer-secret');
+    await userEvent.click(screen.getByRole('button', { name: 'Update password' }));
+    expect(onPasswordChange).toHaveBeenCalledWith({ current: 'old-password', next: 'a-much-longer-secret' });
+  }, 15000);
+
+  it('enables MFA through the setup dialog', async () => {
+    const onMfaChange = vi.fn();
+    render(<SettingsSecurityPage onMfaChange={onMfaChange} />);
+    await userEvent.click(screen.getByRole('switch', { name: 'Authenticator app' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Set up two-factor authentication' });
+    expect(dialog).toBeInTheDocument();
+    await userEvent.keyboard('123456');
+    expect(onMfaChange).toHaveBeenCalledWith(true);
+    expect(await screen.findByText('Enabled')).toBeInTheDocument();
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsSecurityPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-security/Page.tsx

@@ -0,0 +1,158 @@
+import { FormSection, SessionsDevices, SettingsRow, type DeviceSession } from '@gntik-ai/blocks';
+import {
+  Alert,
+  Badge,
+  Button,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  PasswordInput,
+  Stack,
+} from '@gntik-ai/ui';
+import { useState, type FormEvent } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import { DEMO_MFA_CODE, PASSWORD_MIN_LENGTH, mfaSetupKey, sessions as defaultSessions } from './data';
+import { MfaSetupDialog } from './MfaSetupDialog';
+
+export interface PasswordChange {
+  current: string;
+  next: string;
+}
+
+export interface SettingsSecurityProps extends SettingsFrameOptions {
+  sessions: DeviceSession[];
+  /** Whether two-factor authentication is on. */
+  mfaEnabled: boolean;
+  mfaSetupKey: string;
+  /** Checks an enrolment code; defaults to the demo code 123456. */
+  onVerifyMfa: (code: string) => boolean | Promise<boolean>;
+  onMfaChange: (enabled: boolean) => void;
+  /** Changes the password. A rejection shows its message. */
+  onPasswordChange: (change: PasswordChange) => void | Promise<void>;
+  onRevokeSession: (session: DeviceSession) => void;
+  onRevokeOtherSessions: (sessions: DeviceSession[]) => void;
+}
+
+/** Security settings: password FormSection, MFA SettingsRow with an OtpInput setup dialog, SessionsDevices. */
+export default function SettingsSecurityPage({
+  sessions = defaultSessions,
+  mfaEnabled = false,
+  mfaSetupKey: setupKey = mfaSetupKey,
+  onVerifyMfa = (code) => code === DEMO_MFA_CODE,
+  onMfaChange,
+  onPasswordChange,
+  onRevokeSession,
+  onRevokeOtherSessions,
+  ...frame
+}: Partial<SettingsSecurityProps>) {
+  const [current, setCurrent] = useState('');
+  const [next, setNext] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);
+  const [mfa, setMfa] = useState(mfaEnabled);
+  const [setupOpen, setSetupOpen] = useState(false);
+
+  const tooShort = next.length < PASSWORD_MIN_LENGTH;
+  const mismatch = confirm !== next;
+  const missingCurrent = current.length === 0;
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setResult(null);
+    if (tooShort || mismatch || missingCurrent) return;
+    setSaving(true);
+    try {
+      await onPasswordChange?.({ current, next });
+      setResult({ ok: true, message: 'Password updated. Other sessions stay signed in.' });
+      setCurrent('');
+      setNext('');
+      setConfirm('');
+      setSubmitted(false);
+    } catch (err) {
+      setResult({ ok: false, message: err instanceof Error ? err.message : 'Could not update the password.' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggleMfa = (on: boolean) => {
+    if (on) {
+      setSetupOpen(true);
+      return;
+    }
+    setMfa(false);
+    onMfaChange?.(false);
+  };
+
+  const verify = async (code: string) => {
+    const ok = await onVerifyMfa(code);
+    if (ok) {
+      setMfa(true);
+      onMfaChange?.(true);
+    }
+    return ok;
+  };
+
+  return (
+    <SettingsFrame page="security" description="Sign-in methods and the devices signed in to your account." {...frame}>
+      <form noValidate onSubmit={(e) => void submit(e)}>
+        <FormSection
+          title="Password"
+          description={`Use at least ${PASSWORD_MIN_LENGTH} characters. Changing it keeps your other sessions signed in.`}
+          actions={
+            <Button type="submit" loading={saving}>
+              Update password
+            </Button>
+          }
+        >
+          <Stack gap={4}>
+            {result && <Alert tone={result.ok ? 'success' : 'destructive'} title={result.message} role="status" />}
+            <Field invalid={submitted && missingCurrent}>
+              <FieldLabel>Current password</FieldLabel>
+              <PasswordInput value={current} onValueChange={setCurrent} autoComplete="current-password" />
+              <FieldError match={submitted && missingCurrent}>Enter your current password.</FieldError>
+            </Field>
+            <Field invalid={submitted && tooShort}>
+              <FieldLabel>New password</FieldLabel>
+              <PasswordInput value={next} onValueChange={setNext} showStrength autoComplete="new-password" />
+              <FieldError match={submitted && tooShort}>Use at least {PASSWORD_MIN_LENGTH} characters.</FieldError>
+            </Field>
+            <Field invalid={submitted && mismatch}>
+              <FieldLabel>Confirm new password</FieldLabel>
+              <PasswordInput value={confirm} onValueChange={setConfirm} autoComplete="new-password" />
+              <FieldDescription>Type the new password again.</FieldDescription>
+              <FieldError match={submitted && mismatch}>The passwords do not match.</FieldError>
+            </Field>
+          </Stack>
+        </FormSection>
+      </form>
+      <FormSection
+        title="Two-factor authentication"
+        description="Ask for a one-time code from an authenticator app when you sign in."
+        divided
+      >
+        <SettingsRow
+          label="Authenticator app"
+          description={
+            mfa
+              ? 'Codes from your authenticator app are required at sign-in.'
+              : 'Off. Turning it on opens the setup steps.'
+          }
+          checked={mfa}
+          onCheckedChange={toggleMfa}
+          className="pt-0"
+        >
+          <Badge size="sm" tone={mfa ? 'success' : 'neutral'} dot className="mt-2">
+            {mfa ? 'Enabled' : 'Not set up'}
+          </Badge>
+        </SettingsRow>
+      </FormSection>
+      <SessionsDevices sessions={sessions} onRevoke={onRevokeSession} onRevokeOthers={onRevokeOtherSessions} />
+      <MfaSetupDialog open={setupOpen} onOpenChange={setSetupOpen} setupKey={setupKey} onVerify={verify} />
+    </SettingsFrame>
+  );
+}

package/src/settings-security/data.ts

@@ -0,0 +1,11 @@
+import { sampleDeviceSessions, type DeviceSession } from '@gntik-ai/blocks';
+
+export const sessions: DeviceSession[] = sampleDeviceSessions;
+
+/** Demo verification code accepted by the MFA setup dialog. */
+export const DEMO_MFA_CODE = '123456';
+
+/** Shown in the setup dialog for manual entry (the QR code comes from your auth provider). */
+export const mfaSetupKey = 'JBSW Y3DP EHPK 3PXP';
+
+export const PASSWORD_MIN_LENGTH = 12;

package/src/settings-security/template.meta.ts

@@ -0,0 +1,11 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Security settings',
+  family: 'Settings',
+  priority: 'P1',
+  status: 'beta',
+  description: 'Password change, two-factor setup with a one-time code dialog, and signed-in sessions and devices.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'form-section', 'settings-row', 'sessions-devices'],
+};

package/src/settings-workspace/Page.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsWorkspacePage from './Page';
+
+describe('SettingsWorkspacePage', () => {
+  it('renders the general, logo, region and danger zone sections', () => {
+    render(<SettingsWorkspacePage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Workspace' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Workspace/ })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('group', { name: 'Workspace logo' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Danger zone' })).toBeInTheDocument();
+  }, 15000);
+
+  it('saves an edited name', async () => {
+    const onSave = vi.fn();
+    render(<SettingsWorkspacePage onSave={onSave} />);
+    const name = screen.getByLabelText('Workspace name');
+    await userEvent.clear(name);
+    await userEvent.type(name, 'Northwind');
+    await userEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Northwind', slug: 'northwind-labs' }));
+  }, 15000);
+
+  it('asks to type the slug before deleting', async () => {
+    const onDangerAction = vi.fn();
+    render(<SettingsWorkspacePage onDangerAction={onDangerAction} />);
+    const zone = screen.getByRole('region', { name: 'Danger zone' });
+    await userEvent.click(within(zone).getByRole('button', { name: 'Delete workspace' }));
+    const dialog = await screen.findByRole('alertdialog');
+    const confirm = within(dialog).getByRole('button', { name: 'Delete workspace' });
+    expect(confirm).toBeDisabled();
+    await userEvent.type(within(dialog).getByRole('textbox'), 'northwind-labs');
+    expect(confirm).toBeEnabled();
+    await userEvent.click(confirm);
+    expect(onDangerAction).toHaveBeenCalledWith('delete');
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsWorkspacePage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-workspace/Page.tsx

@@ -0,0 +1,120 @@
+import { DangerZone, FileUploadPanel, FormSection, StickyActionBar, type DangerZoneAction } from '@gntik-ai/blocks';
+import { Field, FieldDescription, FieldError, FieldLabel, Input, SimpleSelect, Stack } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import {
+  SLUG_RE,
+  regions as defaultRegions,
+  workspaceDangerActions,
+  workspaceValues,
+  type RegionOption,
+  type WorkspaceValues,
+} from './data';
+
+export interface SettingsWorkspaceProps extends SettingsFrameOptions {
+  values: WorkspaceValues;
+  regions: RegionOption[];
+  /** URL prefix shown before the slug. */
+  urlPrefix: string;
+  /** Danger zone rows; defaults to transfer and delete (typing the slug). */
+  dangerActions: DangerZoneAction[];
+  onSave: (values: WorkspaceValues) => void | Promise<void>;
+  /** Uploads the logo; defaults to a demo upload. */
+  onLogoUpload: (file: File, onProgress: (pct: number) => void) => Promise<void>;
+  onDangerAction: (actionId: string) => void | Promise<void>;
+}
+
+/** Workspace settings: general FormSection (name, slug, region), logo FileUploadPanel, DangerZone. */
+export default function SettingsWorkspacePage({
+  values: saved = workspaceValues,
+  regions = defaultRegions,
+  urlPrefix = 'app.example.com/',
+  dangerActions,
+  onSave,
+  onLogoUpload,
+  onDangerAction,
+  ...frame
+}: Partial<SettingsWorkspaceProps>) {
+  const [base, setBase] = useState(saved);
+  const [draft, setDraft] = useState(saved);
+  const [saving, setSaving] = useState(false);
+  const dirty = draft.name !== base.name || draft.slug !== base.slug || draft.region !== base.region;
+  const slugInvalid = !SLUG_RE.test(draft.slug);
+  const set = (key: keyof WorkspaceValues) => (value: string | null) => setDraft((d) => ({ ...d, [key]: value ?? '' }));
+
+  const save = async () => {
+    if (slugInvalid) return;
+    setSaving(true);
+    try {
+      await onSave?.(draft);
+      setBase(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <SettingsFrame page="workspace" description="Details every member sees, and where your data is stored." {...frame}>
+      <Stack gap={8}>
+        <FormSection title="General" description="The name and URL of this workspace.">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <Field>
+              <FieldLabel>Workspace name</FieldLabel>
+              <Input value={draft.name} onValueChange={set('name')} />
+            </Field>
+            <Field invalid={slugInvalid}>
+              <FieldLabel>URL slug</FieldLabel>
+              <Input
+                value={draft.slug}
+                onValueChange={set('slug')}
+                leadingAddon={urlPrefix}
+                inputClassName="font-mono"
+              />
+              <FieldDescription>Lowercase letters, numbers and dashes.</FieldDescription>
+              <FieldError match={slugInvalid}>Use lowercase letters, numbers and single dashes.</FieldError>
+            </Field>
+          </div>
+        </FormSection>
+        <FormSection
+          title="Logo"
+          description="Shown in the sidebar and in emails. Square PNG or SVG, at least 256 px."
+          divided
+        >
+          <FileUploadPanel
+            label="Workspace logo"
+            accept=".png,.svg,.jpg"
+            maxSize={2 * 1024 * 1024}
+            multiple={false}
+            defaultFiles={[]}
+            onUpload={onLogoUpload}
+          />
+        </FormSection>
+        <FormSection
+          title="Data region"
+          description="Where projects, logs and backups are stored. Moving regions is done by support."
+          divided
+        >
+          <SimpleSelect
+            label="Region"
+            items={regions}
+            value={draft.region}
+            onValueChange={set('region')}
+            className="w-full sm:w-80"
+          />
+        </FormSection>
+      </Stack>
+      <DangerZone
+        description="These actions affect the whole workspace and every member in it."
+        actions={dangerActions ?? workspaceDangerActions(base.slug)}
+        onConfirm={onDangerAction}
+      />
+      <StickyActionBar
+        dirty={dirty}
+        saving={saving}
+        onSave={() => void save()}
+        onCancel={() => setDraft(base)}
+        aria-label="Workspace changes"
+      />
+    </SettingsFrame>
+  );
+}

package/src/settings-workspace/data.ts

@@ -0,0 +1,44 @@
+import type { DangerZoneAction } from '@gntik-ai/blocks';
+
+export interface WorkspaceValues {
+  name: string;
+  slug: string;
+  region: string;
+}
+
+export interface RegionOption {
+  value: string;
+  label: string;
+}
+
+export const workspaceValues: WorkspaceValues = {
+  name: 'Northwind Labs',
+  slug: 'northwind-labs',
+  region: 'eu-west',
+};
+
+export const regions: RegionOption[] = [
+  { value: 'eu-west', label: 'EU West · Frankfurt' },
+  { value: 'us-east', label: 'US East · Virginia' },
+  { value: 'us-west', label: 'US West · Oregon' },
+  { value: 'ap-south', label: 'AP South · Singapore' },
+];
+
+export const workspaceDangerActions = (slug: string): DangerZoneAction[] => [
+  {
+    id: 'transfer',
+    title: 'Transfer ownership',
+    description: 'Make another admin the owner of this workspace. You stay on as an admin.',
+    actionLabel: 'Transfer',
+    destructive: false,
+  },
+  {
+    id: 'delete',
+    title: 'Delete workspace',
+    description: `Permanently deletes ${slug}, its projects, members and billing history. This cannot be undone.`,
+    actionLabel: 'Delete workspace',
+    confirmText: slug,
+  },
+];
+
+export const SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;

package/src/settings-workspace/template.meta.ts

@@ -0,0 +1,19 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Workspace settings',
+  family: 'Settings',
+  priority: 'P1',
+  status: 'beta',
+  description: 'Workspace name, URL slug, logo upload and data region, with a danger zone for transfer and deletion.',
+  layout: 'SettingsLayout',
+  blocks: [
+    'app-sidebar',
+    'app-topbar',
+    'page-header',
+    'form-section',
+    'file-upload-panel',
+    'sticky-action-bar',
+    'danger-zone',
+  ],
+};