@cogito.ai/astryx-web 0.0.0-stage → 0.1.0

package/docs/dock-touch-mobile.doc.mjs

@@ -0,0 +1,27 @@
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export default {
+  type: 'generic',
+  name: 'dock-touch-mobile',
+  title: 'Dock Touch Mobile',
+  description: 'Touch targets, safe areas, compact navigation, and mobile interaction rules.',
+  sections: [
+    {
+      title: 'Touch and mobile',
+      content: [
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            'Touch targets are at least 44×44px. 32px is allowed only in dense toolbars that never appear on touch screens.',
+            'On compact containers, first-level destinations live in the bottom navigation, and the primary action of a flow sits in a bottom bar within thumb reach.',
+            'Respect safe areas: `viewport-fit=cover` and `env(safe-area-inset-*)` padding on fixed bars.',
+            'Use `100dvh`, not `100vh`.',
+            'Inputs use at least a 16px font so iOS does not zoom.',
+            'Anything revealed on hover must also work by tap; gate hover styles with `@media (hover: hover)`.',
+            'Secondary choices on compact containers open as bottom sheets, not floating menus.',
+          ],
+        },
+      ],
+    },
+  ],
+}

package/docs/dock-visual-acceptance.doc.mjs

@@ -0,0 +1,23 @@
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export default {
+  type: 'generic',
+  name: 'dock-visual-acceptance',
+  title: 'Dock Visual Acceptance',
+  description: 'The render matrix and visual review rules for UI work.',
+  sections: [
+    {
+      title: 'Visual acceptance',
+      content: [
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            'Render the changed pages at 390×844 and 1440×900, in light and dark.',
+            'Check them against A1–A9. Fix everything you find in one batch. At most two rounds, then hand over.',
+            'Screenshots are for judging what the user sees. Never use them to watch CI, pipelines, or progress; read the API.',
+          ],
+        },
+      ],
+    },
+  ],
+}

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@cogito.ai/astryx-web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Mobile-first page archetypes and design guidance for AgentDock web projects",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "astryx-web": "./bin/astryx-web.mjs"
+  },
+  "exports": {
+    "./templates/dock-landing": "./templates/dock-landing.tsx",
+    "./templates/dock-workbench": "./templates/dock-workbench.tsx",
+    "./templates/dock-list": "./templates/dock-list.tsx",
+    "./templates/dock-form-flow": "./templates/dock-form-flow.tsx",
+    "./templates/dock-settings": "./templates/dock-settings.tsx",
+    "./templates/dock-editor-frame": "./templates/dock-editor-frame.tsx"
+  },
+  "files": [
+    "astryx.integration.mjs",
+    "templates/",
+    "docs/",
+    "skills/",
+    "bin/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22.13.0"
+  },
+  "peerDependencies": {
+    "@astryxdesign/cli": ">=0.7.0",
+    "@astryxdesign/core": "^0.7.5"
+  },
+  "peerDependenciesMeta": {
+    "@astryxdesign/cli": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@astryxdesign/cli": "0.7.5",
+    "@astryxdesign/core": "0.7.5",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "check": "pnpm test && pnpm run check:integration && pnpm run check:templates && pnpm run check:intents",
+    "check:integration": "astryx integration check --strict && astryx integration verify",
+    "check:templates": "node scripts/check-templates.mjs",
+    "check:intents": "node scripts/golden-intents.mjs",
+    "check-types": "pnpm run check",
+    "test": "node --test test/*.test.mjs"
+  }
 }

package/templates/dock-editor-frame.doc.mjs

@@ -0,0 +1,19 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Editor frame',
+  displayName: 'Editor frame',
+  description:
+    'A full-bleed editor workspace with a named content slot, floating tools, an overflow menu, and compact bottom navigation.',
+  category: 'Editor - Canvas',
+  keywords: [
+    'canvas editor',
+    'diagram editor',
+    'workspace',
+    'editor frame',
+    'floating toolbar',
+    'mobile',
+  ],
+  replaces: 'canvas-editor',
+  isReady: true,
+}

package/templates/dock-editor-frame.tsx

@@ -0,0 +1,229 @@
+import { DropdownMenu } from '@astryxdesign/core/DropdownMenu'
+import { Icon } from '@astryxdesign/core/Icon'
+import { IconButton } from '@astryxdesign/core/IconButton'
+import { MoreMenu } from '@astryxdesign/core/MoreMenu'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import * as stylex from '@stylexjs/stylex'
+
+const styles = stylex.create({
+  frame: {
+    position: 'relative',
+    flex: 1,
+    minHeight: 0,
+    width: 'calc(100% + 1.5rem)',
+    marginInline: '-0.75rem',
+    marginBlock: '-0.75rem',
+    overflow: 'hidden',
+    backgroundColor: 'var(--color-background-muted)',
+    '@container (min-width: 420px)': {
+      width: 'calc(100% + 2.5rem)',
+      marginInline: '-1.25rem',
+      marginBlock: '-1.25rem',
+    },
+  },
+  tools: {
+    position: 'absolute',
+    top: 'max(0.75rem, env(safe-area-inset-top))',
+    left: 'max(0.75rem, env(safe-area-inset-left))',
+    zIndex: 2,
+    padding: '0.25rem',
+    borderRadius: 'var(--radius-element)',
+    backgroundColor: 'var(--color-background-card)',
+    boxShadow: 'var(--shadow-med)',
+    '@container (min-width: 640px)': {
+      top: 'max(1.5rem, env(safe-area-inset-top))',
+      left: 'max(1.5rem, env(safe-area-inset-left))',
+    },
+  },
+  menu: {
+    position: 'absolute',
+    top: 'max(0.75rem, env(safe-area-inset-top))',
+    right: 'max(0.75rem, env(safe-area-inset-right))',
+    zIndex: 2,
+    '@container (min-width: 640px)': {
+      top: 'max(1.5rem, env(safe-area-inset-top))',
+      right: 'max(1.5rem, env(safe-area-inset-right))',
+    },
+  },
+  bottomNav: {
+    position: 'absolute',
+    left: '50%',
+    bottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+    transform: 'translateX(-50%)',
+    zIndex: 2,
+    padding: '0.25rem',
+    borderRadius: 'var(--radius-full)',
+    backgroundColor: 'var(--color-background-card)',
+    boxShadow: 'var(--shadow-med)',
+  },
+})
+
+function EditorSlot() {
+  const t = useTranslator()
+
+  return (
+    <Stack
+      aria-label={t('page.__PAGE__.slot.label')}
+      height="100%"
+      hAlign="center"
+      vAlign="center"
+      gap={2}
+    >
+      <Text type="body" weight="semibold">
+        {t('page.__PAGE__.slot.title')}
+      </Text>
+      <Text type="supporting" color="secondary">
+        {t('page.__PAGE__.slot.description')}
+      </Text>
+    </Stack>
+  )
+}
+
+export default function DockEditorFrame() {
+  const t = useTranslator()
+
+  return (
+    <Stack width="100%" xstyle={styles.frame}>
+      <EditorSlot />
+
+      <Stack direction="horizontal" gap={1} xstyle={styles.tools}>
+        <IconButton
+          label={t('page.__PAGE__.tool.select')}
+          icon={<Icon icon="arrowUp" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.tool.move')}
+          icon={<Icon icon="arrowDown" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.tool.find')}
+          icon={<Icon icon="search" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.tool.layers')}
+          icon={<Icon icon="viewColumns" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.tool.adjust')}
+          icon={<Icon icon="wrench" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <MoreMenu
+          label={t('page.__PAGE__.tool.more')}
+          size="sm"
+          presentation="adaptive"
+          items={[
+            {
+              id: 'duplicate',
+              label: t('page.__PAGE__.action.duplicate'),
+              icon: <Icon icon="copy" size="sm" />,
+            },
+            {
+              id: 'delete',
+              label: t('page.__PAGE__.action.delete'),
+              variant: 'destructive',
+              icon: <Icon icon="close" size="sm" />,
+            },
+          ]}
+        />
+      </Stack>
+
+      <DropdownMenu
+        xstyle={styles.menu}
+        hasChevron={false}
+        button={{
+          label: t('page.__PAGE__.menu'),
+          icon: <Icon icon="menu" size="sm" />,
+          variant: 'secondary',
+          size: 'sm',
+        }}
+        items={[
+          {
+            id: 'rename',
+            label: t('page.__PAGE__.action.rename'),
+          },
+          {
+            id: 'export',
+            label: t('page.__PAGE__.action.export'),
+          },
+        ]}
+      />
+
+      <Stack direction="horizontal" gap={1} xstyle={styles.bottomNav}>
+        <IconButton
+          label={t('page.__PAGE__.nav.back')}
+          icon={<Icon icon="chevronLeft" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.nav.history')}
+          icon={<Icon icon="clock" size="sm" />}
+          variant="ghost"
+          size="sm"
+        />
+        <IconButton
+          label={t('page.__PAGE__.nav.done')}
+          icon={<Icon icon="check" size="sm" />}
+          variant="primary"
+          size="sm"
+        />
+      </Stack>
+    </Stack>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.slot.label": "Editor content",
+    "page.__PAGE__.slot.title": "Editor canvas",
+    "page.__PAGE__.slot.description": "Put the domain editor in this slot.",
+    "page.__PAGE__.tool.select": "Select",
+    "page.__PAGE__.tool.move": "Move",
+    "page.__PAGE__.tool.find": "Find",
+    "page.__PAGE__.tool.layers": "Layers",
+    "page.__PAGE__.tool.adjust": "Adjust",
+    "page.__PAGE__.tool.more": "More tools",
+    "page.__PAGE__.menu": "Editor menu",
+    "page.__PAGE__.action.duplicate": "Duplicate",
+    "page.__PAGE__.action.delete": "Delete",
+    "page.__PAGE__.action.rename": "Rename",
+    "page.__PAGE__.action.export": "Export",
+    "page.__PAGE__.nav.back": "Back",
+    "page.__PAGE__.nav.history": "History",
+    "page.__PAGE__.nav.done": "Done"
+  },
+  "zh-CN": {
+    "page.__PAGE__.slot.label": "编辑器内容",
+    "page.__PAGE__.slot.title": "编辑器画布",
+    "page.__PAGE__.slot.description": "在此插槽中放入领域编辑器。",
+    "page.__PAGE__.tool.select": "选择",
+    "page.__PAGE__.tool.move": "移动",
+    "page.__PAGE__.tool.find": "查找",
+    "page.__PAGE__.tool.layers": "图层",
+    "page.__PAGE__.tool.adjust": "调整",
+    "page.__PAGE__.tool.more": "更多工具",
+    "page.__PAGE__.menu": "编辑器菜单",
+    "page.__PAGE__.action.duplicate": "复制",
+    "page.__PAGE__.action.delete": "删除",
+    "page.__PAGE__.action.rename": "重命名",
+    "page.__PAGE__.action.export": "导出",
+    "page.__PAGE__.nav.back": "返回",
+    "page.__PAGE__.nav.history": "历史",
+    "page.__PAGE__.nav.done": "完成"
+  }
+}
+*/

package/templates/dock-form-flow.doc.mjs

@@ -0,0 +1,19 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Form flow',
+  displayName: 'Form flow',
+  description:
+    'A mobile-first creation form or wizard with one step per screen, inline validation, and actions within thumb reach.',
+  category: 'Form - Flow',
+  keywords: [
+    'creation form',
+    'multi-step form',
+    'wizard form',
+    'mobile form',
+    'mobile',
+    'several steps',
+  ],
+  replaces: 'form-wizard',
+  isReady: true,
+}

package/templates/dock-form-flow.tsx

@@ -0,0 +1,169 @@
+import { Button } from '@astryxdesign/core/Button'
+import { FormLayout } from '@astryxdesign/core/FormLayout'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { TextArea } from '@astryxdesign/core/TextArea'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import { PageShell } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const styles = stylex.create({
+  fields: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    gap: '0.75rem',
+    '@container (min-width: 640px)': {
+      gridTemplateColumns: 'auto minmax(0, 1fr)',
+      gap: '0.75rem 1rem',
+    },
+  },
+  actions: {
+    position: 'sticky',
+    bottom: 0,
+    marginBlockStart: 'auto',
+    paddingBlock: '0.75rem',
+    paddingBlockEnd: 'max(0.75rem, env(safe-area-inset-bottom))',
+    backgroundColor: 'var(--color-background-surface)',
+    '@container (min-width: 640px)': {
+      position: 'static',
+      justifyContent: 'flex-end',
+      marginBlockStart: 0,
+      paddingBlock: 0,
+    },
+  },
+})
+
+type Step = 0 | 1
+
+export default function DockFormFlow() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+  const [step, setStep] = useState<Step>(0)
+  const [name, setName] = useState('')
+  const [details, setDetails] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  function goNext() {
+    if (!name.trim()) {
+      setError(t('page.__PAGE__.error.name'))
+      return
+    }
+    setError(null)
+    setStep(1)
+  }
+
+  return (
+    <PageShell
+      title={t('page.__PAGE__.title')}
+      backHref={`/${locale}`}
+      backLabel={t('page.__PAGE__.back')}
+    >
+      <Stack gap={4} minHeight="100%">
+        <Text type="supporting" color="secondary">
+          {t('page.__PAGE__.step', { current: step + 1, total: 2 })}
+        </Text>
+        <Stack gap={1}>
+          <Heading level={2}>
+            {step === 0 ? t('page.__PAGE__.step.details') : t('page.__PAGE__.step.review')}
+          </Heading>
+          <Text type="supporting" color="secondary">
+            {step === 0
+              ? t('page.__PAGE__.step.details.description')
+              : t('page.__PAGE__.step.review.description')}
+          </Text>
+        </Stack>
+
+        {step === 0 ? (
+          <Stack gap={4}>
+            <FormLayout direction="horizontal-labels" xstyle={styles.fields}>
+              <TextInput
+                label={t('page.__PAGE__.field.name')}
+                value={name}
+                onChange={(value) => {
+                  setName(value)
+                  if (error) setError(null)
+                }}
+                placeholder={t('page.__PAGE__.field.name.placeholder')}
+                isRequired
+                status={error ? { type: 'error', message: error } : undefined}
+              />
+            </FormLayout>
+            <TextArea
+              label={t('page.__PAGE__.field.details')}
+              value={details}
+              onChange={setDetails}
+              placeholder={t('page.__PAGE__.field.details.placeholder')}
+            />
+          </Stack>
+        ) : (
+          <Stack gap={2}>
+            <Text type="body">{name}</Text>
+            <Text type="supporting" color="secondary">
+              {details || t('page.__PAGE__.review.noDetails')}
+            </Text>
+          </Stack>
+        )}
+
+        <Stack direction="horizontal" hAlign="between" gap={2} width="100%" xstyle={styles.actions}>
+          <Button
+            label={t('page.__PAGE__.backStep')}
+            variant="secondary"
+            isDisabled={step === 0}
+            onClick={() => setStep(0)}
+          />
+          <Button
+            label={step === 0 ? t('page.__PAGE__.next') : t('page.__PAGE__.create')}
+            variant="primary"
+            onClick={step === 0 ? goNext : () => undefined}
+          />
+        </Stack>
+      </Stack>
+    </PageShell>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Create item",
+    "page.__PAGE__.back": "Back",
+    "page.__PAGE__.step": "Step {current} of {total}",
+    "page.__PAGE__.step.details": "Details",
+    "page.__PAGE__.step.review": "Review",
+    "page.__PAGE__.step.details.description": "Add the information needed for this item.",
+    "page.__PAGE__.step.review.description": "Check the information before creating the item.",
+    "page.__PAGE__.field.name": "Name",
+    "page.__PAGE__.field.name.placeholder": "Name this item",
+    "page.__PAGE__.field.details": "Details",
+    "page.__PAGE__.field.details.placeholder": "Add anything the next person should know",
+    "page.__PAGE__.error.name": "Enter a name to continue.",
+    "page.__PAGE__.review.noDetails": "No details added.",
+    "page.__PAGE__.backStep": "Back",
+    "page.__PAGE__.next": "Next",
+    "page.__PAGE__.create": "Create"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "创建事项",
+    "page.__PAGE__.back": "返回",
+    "page.__PAGE__.step": "第 {current} 步，共 {total} 步",
+    "page.__PAGE__.step.details": "详细信息",
+    "page.__PAGE__.step.review": "检查",
+    "page.__PAGE__.step.details.description": "添加此事项所需的信息。",
+    "page.__PAGE__.step.review.description": "创建前检查这些信息。",
+    "page.__PAGE__.field.name": "名称",
+    "page.__PAGE__.field.name.placeholder": "为此事项命名",
+    "page.__PAGE__.field.details": "详细信息",
+    "page.__PAGE__.field.details.placeholder": "添加下一位处理者需要了解的内容",
+    "page.__PAGE__.error.name": "请输入名称后继续。",
+    "page.__PAGE__.review.noDetails": "尚未添加详细信息。",
+    "page.__PAGE__.backStep": "上一步",
+    "page.__PAGE__.next": "下一步",
+    "page.__PAGE__.create": "创建"
+  }
+}
+*/

package/templates/dock-landing.doc.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Landing page',
+  displayName: 'Landing page',
+  description:
+    'A first-level landing page with a short orientation line and module entries that lead one route deeper.',
+  category: 'Landing - Modules',
+  keywords: ['landing page', 'home', 'index', 'module entries', 'mobile', 'mobile landing'],
+  isReady: true,
+}

package/templates/dock-landing.tsx

@@ -0,0 +1,104 @@
+import { Blockquote } from '@astryxdesign/core/Blockquote'
+import { ClickableCard } from '@astryxdesign/core/ClickableCard'
+import { Grid } from '@astryxdesign/core/Grid'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import * as stylex from '@stylexjs/stylex'
+import { PageContainer } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const styles = stylex.create({
+  entries: {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+    '@container (min-width: 600px)': {
+      gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+    },
+  },
+})
+
+const SAMPLE_MODULES = [
+  {
+    id: 'primary',
+    path: 'primary',
+    titleKey: 'page.__PAGE__.module.primary.title',
+    descriptionKey: 'page.__PAGE__.module.primary.description',
+  },
+  {
+    id: 'secondary',
+    path: 'secondary',
+    titleKey: 'page.__PAGE__.module.secondary.title',
+    descriptionKey: 'page.__PAGE__.module.secondary.description',
+  },
+  {
+    id: 'settings',
+    path: 'settings',
+    titleKey: 'page.__PAGE__.module.settings.title',
+    descriptionKey: 'page.__PAGE__.module.settings.description',
+  },
+] as const
+// Replace with feature data
+
+export default function DockLanding() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+
+  return (
+    <PageContainer>
+      <VisuallyHidden>
+        <Heading level={1}>{t('page.__PAGE__.title')}</Heading>
+      </VisuallyHidden>
+      <Blockquote>{t('page.__PAGE__.orientation')}</Blockquote>
+      <Grid columns={3} gap={3} xstyle={styles.entries}>
+        {SAMPLE_MODULES.map((module) => {
+          const title = t(module.titleKey)
+          return (
+            <ClickableCard
+              key={module.id}
+              label={title}
+              href={`/${locale}/${module.path}`}
+              padding={3}
+            >
+              <Stack gap={1}>
+                <Text type="body" weight="semibold">
+                  {title}
+                </Text>
+                <Text type="supporting" color="secondary">
+                  {t(module.descriptionKey)}
+                </Text>
+              </Stack>
+            </ClickableCard>
+          )
+        })}
+      </Grid>
+    </PageContainer>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Overview",
+    "page.__PAGE__.orientation": "Choose a module to continue.",
+    "page.__PAGE__.module.primary.title": "Primary workspace",
+    "page.__PAGE__.module.primary.description": "Open the main work for this page.",
+    "page.__PAGE__.module.secondary.title": "Recent activity",
+    "page.__PAGE__.module.secondary.description": "Review the latest changes and decisions.",
+    "page.__PAGE__.module.settings.title": "Settings",
+    "page.__PAGE__.module.settings.description": "Adjust preferences for this workspace."
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "概览",
+    "page.__PAGE__.orientation": "选择一个模块继续。",
+    "page.__PAGE__.module.primary.title": "主工作区",
+    "page.__PAGE__.module.primary.description": "打开此页面的主要工作。",
+    "page.__PAGE__.module.secondary.title": "最近活动",
+    "page.__PAGE__.module.secondary.description": "查看最近的更改与决定。",
+    "page.__PAGE__.module.settings.title": "设置",
+    "page.__PAGE__.module.settings.description": "调整此工作区的偏好。"
+  }
+}
+*/

package/templates/dock-list.doc.mjs

@@ -0,0 +1,20 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'List page',
+  displayName: 'List page',
+  description:
+    'A searchable collection with a primary action, a compact filter, list rows, an empty state, and load-more pagination.',
+  category: 'List - Collection',
+  keywords: [
+    'list page',
+    'library',
+    'collection',
+    'search',
+    'recent items',
+    'mobile',
+    'mobile list',
+  ],
+  replaces: 'library',
+  isReady: true,
+}