@prenta/admin 2.7.0 → 2.8.0

package/src/views/header-footer/code-samples.ts

@@ -0,0 +1,146 @@
+/**
+ * The Developer tab's "How it's wired" samples: the kit's `CODE` strings
+ * (appearance-hf.jsx), with the names this repo ships. `@prenta/sdk` doesn't
+ * exist; `defineRegion` and `field` are on `@prenta/core/config`, the Astro
+ * helpers on `@prenta/core/astro/site`, `<Announcement>` on
+ * `@prenta/client/react`, and the public endpoint is `/public/chrome` inside
+ * the `{ data }` envelope (CONFLICTS.md §3).
+ */
+
+export type CodeSampleId = 'config' | 'render' | 'api'
+
+export interface CodeSample {
+  id: CodeSampleId
+  /** The segmented control's label. */
+  label: string
+  /** The caption over the code. */
+  file: string
+  src: string
+}
+
+export const CODE_SAMPLES: readonly CodeSample[] = [
+  {
+    id: 'config',
+    label: 'Schema',
+    file: 'prenta.config.ts',
+    src: `import { defineRegion, field } from '@prenta/core/config';
+
+// Markup stays in your components. This only declares
+// what editors can change. Saved values are typed.
+export const header = defineRegion('header', {
+  component: './src/components/site/Header.astro',
+  variants: {
+    default:  'Logo left, menu right',
+    centered: 'Centered logo',
+    minimal:  'Logo + CTA',          // landing pages
+  },
+  fields: {
+    logo:    field.brand('logo'),             // read-only, from Settings
+    menu:    field.menu({ default: 'main' }),
+    cta:     field.link({ optional: true }),
+    phone:   field.text({ optional: true, format: 'tel' }),
+    topMenu: field.menu({ optional: true, label: 'Top bar' }),
+    search:  field.boolean({ default: false }),
+    sticky:  field.boolean({ default: true }),
+  },
+});
+
+export const footer = defineRegion('footer', {
+  component: './src/components/site/Footer.astro',
+  variants: { columns: 'Columns', compact: 'Compact', minimal: 'Single line' },
+  fields: {
+    tone:      field.select(['dark', 'light'], { default: 'dark' }),
+    about:     field.textarea({ max: 200 }),
+    cols:      field.menu({ list: true, max: 3 }),
+    social:    field.social(),
+    legalMenu: field.menu({ optional: true }),
+    copy:      field.text({ tokens: ['{year}'] }),
+  },
+});`,
+  },
+  {
+    id: 'render',
+    label: 'Layout',
+    file: 'src/layouts/Base.astro',
+    src: `---
+import { createAstroSiteHelpers } from '@prenta/core/astro/site';
+import { Announcement } from '@prenta/client/react'; // headless, unstyled
+import Header from '../components/site/Header.astro';
+import Footer from '../components/site/Footer.astro';
+
+// Resolves site defaults + page overrides + schedule in one call.
+const { getChrome } = createAstroSiteHelpers();
+const { header, footer, announcement } = (await getChrome(Astro.url.pathname)) ?? {};
+---
+<Announcement data={announcement} className="ann" client:load />  <!-- or render your own -->
+{header && <Header variant={header.variant} {...header.fields} />}
+<slot />
+{footer && <Footer variant={footer.variant} {...footer.fields} />}`,
+  },
+  {
+    id: 'api',
+    label: 'API',
+    file: 'GET /api/cms/public/chrome?path=/seo-audit',
+    src: `{
+  "data": {
+    "header": {
+      "variant": "minimal",            // page override wins
+      "fields": {
+        "logo": { ... },               // from Settings > Brand
+        "menu": { "id": "main", "name": "Main", "items": [ ... ] },
+        "cta": { "label": "Get a free audit", "url": "/seo-audit" },
+        "phone": "(757) 555-0100",
+        "topMenu": null,
+        "search": false,
+        "sticky": true
+      }
+    },
+    "footer": { "variant": "columns", "fields": { ... } },
+    "announcement": {
+      "id": "ann_8f2c41d0",           // changes when the message changes
+      "text": "Free SEO audits are back for Q4. Limited spots.",
+      "link": { "label": "Book yours", "url": "/seo-audit" },
+      "tone": "brand",                 // style it with your tokens
+      "dismissible": true,
+      "endsAt": null
+    },
+    "etag": "W/\\"chrome-6b1f0c2e9a4d\\""
+  }
+}`,
+  },
+]
+
+export const LOCAL_DEV_SAMPLE = `npx prenta pull chrome   // writes .prenta/chrome.json
+npx prenta types         // generates ChromeFields types`
+
+export type CodeTokenKind = 'comment' | 'string' | 'keyword' | 'plain'
+
+export interface CodeToken {
+  kind: CodeTokenKind
+  text: string
+}
+
+const LITERALS = /(\/\/[^\n]*|<!--[^\n]*-->|'[^'\n]*'|"(?:[^"\\\n]|\\.)*")/g
+const KEYWORDS = /\b(import|from|export|const|await)\b/g
+
+/**
+ * The kit's highlighter (`hl`): comments, then strings, then a few keywords.
+ * Joining the tokens' text gives back the source exactly.
+ */
+export function highlight(src: string): CodeToken[] {
+  const tokens: CodeToken[] = []
+  src.split(LITERALS).forEach((part, index) => {
+    if (!part) return
+    if (index % 2 === 1) {
+      tokens.push({
+        kind: part.startsWith('//') || part.startsWith('<!--') ? 'comment' : 'string',
+        text: part,
+      })
+      return
+    }
+    part.split(KEYWORDS).forEach((piece, j) => {
+      if (piece) tokens.push({ kind: j % 2 === 1 ? 'keyword' : 'plain', text: piece })
+    })
+  })
+  return tokens
+}

package/src/views/header-footer/controls.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { Lock } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+/** `.ap-in`: 34px, radius 8, 13px; `.ap-in.mono` is 12px DM Mono. */
+export const INPUT =
+  'rounded-8 border-bdr bg-card text-body text-txt placeholder:text-faint focus-visible:border-acc-m h-[34px] w-full min-w-0 border px-2.5 leading-[normal] disabled:cursor-not-allowed disabled:opacity-60'
+export const MONO = 'font-mono text-[12px]'
+/** `.ap-in` as a multi-line box (the kit's textarea). */
+export const TEXTAREA =
+  'rounded-8 border-bdr bg-card text-body text-txt focus-visible:border-acc-m min-h-[60px] w-full min-w-0 resize-y border px-2.5 py-2 leading-[1.45] disabled:cursor-not-allowed disabled:opacity-60'
+
+/** `.ap-lb`: 12px / 600, 5px above the control. */
+export function FieldLabel({ htmlFor, children }: { htmlFor?: string; children: ReactNode }) {
+  return (
+    <label htmlFor={htmlFor} className="text-meta text-txt mb-[5px] block font-semibold">
+      {children}
+    </label>
+  )
+}
+
+/** `.ap-help`: 11.5px --muted, 5px under the control. */
+export function Help({
+  id,
+  tone = 'muted',
+  children,
+}: {
+  id?: string
+  tone?: 'muted' | 'error'
+  children: ReactNode
+}) {
+  return (
+    <div
+      id={id}
+      className={`text-hint mt-[5px] leading-[1.45] ${tone === 'error' ? 'text-err' : 'text-faint'}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** `.hf-key`: a field key or id as a mono chip. */
+export function KeyChip({
+  children,
+  bare = false,
+  size = 11,
+}: {
+  children: ReactNode
+  bare?: boolean
+  /** 11px; a variant card's id is 10.5px. */
+  size?: 11 | 10.5
+}) {
+  return (
+    <code
+      // 500: the admin ships DM Mono at 400 and 500 only, so 600 would be synthesized.
+      className={`text-faint overflow-hidden font-mono font-medium text-ellipsis whitespace-nowrap ${
+        size === 11 ? 'text-[11px]' : 'text-[10.5px]'
+      } ${bare ? '' : 'rounded-5 border-bdr bg-bg border px-1.5'}`}
+    >
+      {children}
+    </code>
+  )
+}
+
+/** `.hf-lock`: "Defined in code". */
+export function LockPill({ children }: { children: ReactNode }) {
+  return (
+    <span className="rounded-pill border-bdr bg-bg text-faint inline-flex items-center gap-1 border px-[7px] text-[10.5px] leading-[normal] font-[650] whitespace-nowrap">
+      <Lock size={11} strokeWidth={1.8} aria-hidden />
+      {children}
+    </span>
+  )
+}
+
+export interface PillOption {
+  id: string
+  label: string
+  /** A 12px swatch before the label (announcement tones). */
+  swatch?: string
+}
+
+/**
+ * `.mn-chks` / `.mn-chk`: radio pills. 12.5px, radius 99, padding 3px 10px
+ * 3px 8px; the checked pill has an --acc border on --acc-l.
+ */
+export function RadioPills({
+  name,
+  label,
+  options,
+  value,
+  onChange,
+  disabled,
+}: {
+  name: string
+  /** Accessible name for the group. */
+  label: string
+  options: readonly PillOption[]
+  value: string
+  onChange: (id: string) => void
+  disabled?: boolean
+}) {
+  return (
+    <div role="radiogroup" aria-label={label} className="flex flex-wrap gap-1.5">
+      {options.map((option) => {
+        const checked = option.id === value
+        return (
+          <label
+            key={option.id}
+            className={`rounded-pill text-sm2 text-txt inline-flex items-center gap-1.5 border py-[3px] pr-2.5 pl-2 leading-[normal] whitespace-nowrap ${
+              checked ? 'border-acc bg-acc-l' : 'border-bdr'
+            } ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.id}
+              checked={checked}
+              disabled={disabled}
+              onChange={() => onChange(option.id)}
+              className="accent-acc m-0"
+            />
+            {option.swatch ? (
+              <i
+                aria-hidden
+                className="inline-block h-3 w-3 rounded-[3px]"
+                style={{ background: option.swatch }}
+              />
+            ) : null}
+            {option.label}
+          </label>
+        )
+      })}
+    </div>
+  )
+}
+
+/** A card heading row (`.ap-ch`) with the title, a subline and an optional right slot. */
+export function CardHead({
+  title,
+  description,
+  id,
+  children,
+}: {
+  title: string
+  description?: ReactNode
+  id?: string
+  children?: ReactNode
+}) {
+  return (
+    <div className="border-bdr flex items-center gap-2.5 border-b px-4 py-[13px]">
+      <div className="min-w-0 flex-1">
+        <h2 id={id} className="text-card-title text-txt m-0 leading-[normal] font-[650]">
+          {title}
+        </h2>
+        {description ? (
+          <p className="text-meta text-sub m-0 mt-px leading-[normal]">{description}</p>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+/** `.ap-card`: --card, 1px --bdr, radius 12, --shd. */
+export const CARD = 'rounded-12 border-bdr bg-card shadow-shd text-txt min-w-0 border'

package/dist/views/Jobs/placeholders.d.ts

@@ -1,6 +0,0 @@
-export interface NewBatchJobProps {
-    onClose: () => void;
-}
-/** The new batch AI job wizard. Until then, batches start from a list's bulk actions. */
-export declare function NewBatchJob({ onClose }: NewBatchJobProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=placeholders.d.ts.map

package/dist/views/Jobs/placeholders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"placeholders.d.ts","sourceRoot":"","sources":["../../../src/views/Jobs/placeholders.tsx"],"names":[],"mappings":"AAmDA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CASxD"}

package/dist/views/Jobs/placeholders.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Dialog from '@radix-ui/react-dialog';
-import { Button } from '../../components/ui/Button.js';
-import { adminPortalContainer } from '../../lib/portal-container.js';
-import { useReturnFocus } from './focus.js';
-/*
- * Stand-in until the batch wizard (P-20, jobs-new.jsx) is built. The list
- * already opens it with the props the kit passes, so it's swapped by
- * replacing the component here.
- */
-function StandIn({ title, description, onClose, onFocusFallback, }) {
-    const returnFocus = useReturnFocus(onFocusFallback);
-    return (_jsx(Dialog.Root, { open: true, onOpenChange: (open) => (open ? undefined : onClose()), children: _jsxs(Dialog.Portal, { container: adminPortalContainer(), children: [_jsx(Dialog.Overlay, { className: "bg-scrim-drawer fixed inset-0 z-[var(--z-modal)]" }), _jsxs(Dialog.Content, { ...returnFocus, className: "bg-card border-bdr rounded-14 shadow-shd2 fixed top-1/2 left-1/2 z-[var(--z-modal)] flex w-[min(460px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 border p-5 leading-[normal]", children: [_jsx(Dialog.Title, { className: "text-txt m-0 text-[length:var(--fs-drawer)] font-bold", children: title }), _jsx(Dialog.Description, { className: "text-body text-sub m-0 leading-[1.55]", children: description }), _jsx("div", { className: "mt-1 flex justify-end", children: _jsx(Dialog.Close, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Close" }) }) })] })] }) }));
-}
-/** The new batch AI job wizard. Until then, batches start from a list's bulk actions. */
-export function NewBatchJob({ onClose }) {
-    return (_jsx(StandIn, { title: "New batch AI job", description: "Select posts or pages in their list, then pick Meta descriptions, Alt text or Summaries in the selection bar.", onClose: onClose, onFocusFallback: () => document.querySelector('[data-jobs-new]')?.focus() }));
-}
-//# sourceMappingURL=placeholders.js.map

package/dist/views/Jobs/placeholders.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"placeholders.js","sourceRoot":"","sources":["../../../src/views/Jobs/placeholders.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C;;;;GAIG;AAEH,SAAS,OAAO,CAAC,EACf,KAAK,EACL,WAAW,EACX,OAAO,EACP,eAAe,GAMhB;IACC,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,CAAC,CAAA;IACnD,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IAAC,IAAI,QAAC,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,YACtE,MAAC,MAAM,CAAC,MAAM,IAAC,SAAS,EAAE,oBAAoB,EAAE,aAC9C,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAC,kDAAkD,GAAG,EAC/E,MAAC,MAAM,CAAC,OAAO,OACT,WAAW,EACf,SAAS,EAAC,sMAAsM,aAEhN,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,uDAAuD,YAC5E,KAAK,GACO,EACf,KAAC,MAAM,CAAC,WAAW,IAAC,SAAS,EAAC,uCAAuC,YAClE,WAAW,GACO,EACrB,cAAK,SAAS,EAAC,uBAAuB,YACpC,KAAC,MAAM,CAAC,KAAK,IAAC,OAAO,kBACnB,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,sBAAe,GAC7B,GACX,IACS,IACH,GACJ,CACf,CAAA;AACH,CAAC;AAMD,yFAAyF;AACzF,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,EAAoB;IACvD,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,+GAA+G,EAC3H,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAc,iBAAiB,CAAC,EAAE,KAAK,EAAE,GACtF,CACH,CAAA;AACH,CAAC"}

package/src/views/Jobs/placeholders.tsx

@@ -1,66 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import * as Dialog from '@radix-ui/react-dialog'
-import { Button } from '../../components/ui/Button.js'
-import { adminPortalContainer } from '../../lib/portal-container.js'
-import { useReturnFocus } from './focus.js'
-
-/*
- * Stand-in until the batch wizard (P-20, jobs-new.jsx) is built. The list
- * already opens it with the props the kit passes, so it's swapped by
- * replacing the component here.
- */
-
-function StandIn({
-  title,
-  description,
-  onClose,
-  onFocusFallback,
-}: {
-  title: string
-  description: ReactNode
-  onClose: () => void
-  onFocusFallback: () => void
-}) {
-  const returnFocus = useReturnFocus(onFocusFallback)
-  return (
-    <Dialog.Root open onOpenChange={(open) => (open ? undefined : onClose())}>
-      <Dialog.Portal container={adminPortalContainer()}>
-        <Dialog.Overlay className="bg-scrim-drawer fixed inset-0 z-[var(--z-modal)]" />
-        <Dialog.Content
-          {...returnFocus}
-          className="bg-card border-bdr rounded-14 shadow-shd2 fixed top-1/2 left-1/2 z-[var(--z-modal)] flex w-[min(460px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 border p-5 leading-[normal]"
-        >
-          <Dialog.Title className="text-txt m-0 text-[length:var(--fs-drawer)] font-bold">
-            {title}
-          </Dialog.Title>
-          <Dialog.Description className="text-body text-sub m-0 leading-[1.55]">
-            {description}
-          </Dialog.Description>
-          <div className="mt-1 flex justify-end">
-            <Dialog.Close asChild>
-              <Button variant="secondary">Close</Button>
-            </Dialog.Close>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  )
-}
-
-export interface NewBatchJobProps {
-  onClose: () => void
-}
-
-/** The new batch AI job wizard. Until then, batches start from a list's bulk actions. */
-export function NewBatchJob({ onClose }: NewBatchJobProps) {
-  return (
-    <StandIn
-      title="New batch AI job"
-      description="Select posts or pages in their list, then pick Meta descriptions, Alt text or Summaries in the selection bar."
-      onClose={onClose}
-      onFocusFallback={() => document.querySelector<HTMLElement>('[data-jobs-new]')?.focus()}
-    />
-  )
-}