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

package/templates/dock-list.tsx

@@ -0,0 +1,223 @@
+import { Button } from '@astryxdesign/core/Button'
+import { EmptyState } from '@astryxdesign/core/EmptyState'
+import { Heading } from '@astryxdesign/core/Heading'
+import { Icon } from '@astryxdesign/core/Icon'
+import { List, ListItem } from '@astryxdesign/core/List'
+import { MoreMenu } from '@astryxdesign/core/MoreMenu'
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Text } from '@astryxdesign/core/Text'
+import { TextInput } from '@astryxdesign/core/TextInput'
+import { Timestamp } from '@astryxdesign/core/Timestamp'
+import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden'
+import { useTranslator } from '@astryxdesign/core/i18n'
+import { useState } from 'react'
+import { PageShell } from '@/components/layout'
+import { useCurrentLocale } from '@/i18n'
+
+const FILTERS = ['recent', 'all', 'archived'] as const
+type Filter = (typeof FILTERS)[number]
+
+const SAMPLE_ITEMS = [
+  {
+    id: 'brief',
+    titleKey: 'page.__PAGE__.item.brief.title',
+    metaKey: 'page.__PAGE__.item.brief.meta',
+    updatedAt: '2026-11-01T09:00:00.000Z',
+  },
+  {
+    id: 'notes',
+    titleKey: 'page.__PAGE__.item.notes.title',
+    metaKey: 'page.__PAGE__.item.notes.meta',
+    updatedAt: '2026-10-28T14:30:00.000Z',
+  },
+  {
+    id: 'archive',
+    titleKey: 'page.__PAGE__.item.archive.title',
+    metaKey: 'page.__PAGE__.item.archive.meta',
+    updatedAt: '2026-10-20T08:15:00.000Z',
+  },
+] as const
+// Replace with feature data
+
+function isFilter(value: string): value is Filter {
+  return FILTERS.some((filter) => filter === value)
+}
+
+export default function DockList() {
+  const locale = useCurrentLocale()
+  const t = useTranslator()
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<Filter>('recent')
+  const hasItems: boolean = SAMPLE_ITEMS.length > 0
+
+  const visibleItems = SAMPLE_ITEMS.filter((item) => {
+    const query = search.trim().toLocaleLowerCase()
+    if (!query) return true
+    return `${t(item.titleKey)} ${t(item.metaKey)}`.toLocaleLowerCase().includes(query)
+  })
+
+  return (
+    <PageShell
+      title={t('page.__PAGE__.title')}
+      backHref={`/${locale}`}
+      backLabel={t('page.__PAGE__.back')}
+      actions={
+        <Button
+          label={t('page.__PAGE__.new')}
+          size="sm"
+          variant="primary"
+          onClick={() => undefined}
+        />
+      }
+    >
+      <Stack gap={4}>
+        <TextInput
+          label={t('page.__PAGE__.search.label')}
+          isLabelHidden
+          value={search}
+          onChange={setSearch}
+          placeholder={t('page.__PAGE__.search.placeholder')}
+          startIcon={<Icon icon="search" size="sm" />}
+          hasClear
+        />
+        <SegmentedControl
+          label={t('page.__PAGE__.filter.label')}
+          value={filter}
+          onChange={(value) => {
+            if (isFilter(value)) setFilter(value)
+          }}
+          layout="fill"
+        >
+          {FILTERS.map((candidate) => (
+            <SegmentedControlItem
+              key={candidate}
+              value={candidate}
+              label={t(`page.__PAGE__.filter.${candidate}`)}
+            />
+          ))}
+        </SegmentedControl>
+
+        {!hasItems ? (
+          <EmptyState
+            title={t('page.__PAGE__.empty.title')}
+            description={t('page.__PAGE__.empty.description')}
+            actions={
+              <Button label={t('page.__PAGE__.new')} variant="primary" onClick={() => undefined} />
+            }
+          />
+        ) : visibleItems.length === 0 ? (
+          <Text type="body" color="secondary">
+            {t('page.__PAGE__.noResults')}
+          </Text>
+        ) : (
+          <List
+            density="balanced"
+            hasDividers
+            header={
+              <VisuallyHidden>
+                <Heading level={2}>{t('page.__PAGE__.listTitle')}</Heading>
+              </VisuallyHidden>
+            }
+          >
+            {visibleItems.map((item) => (
+              <ListItem
+                key={item.id}
+                label={t(item.titleKey)}
+                description={
+                  <Stack direction="horizontal" gap={2} vAlign="center" wrap="wrap">
+                    <Text type="supporting" color="secondary">
+                      {t(item.metaKey)}
+                    </Text>
+                    <Timestamp
+                      value={item.updatedAt}
+                      format="date"
+                      type="supporting"
+                      color="secondary"
+                    />
+                  </Stack>
+                }
+                onClick={() => undefined}
+                endContent={
+                  <MoreMenu
+                    label={t('page.__PAGE__.row.options')}
+                    size="sm"
+                    alignment="end"
+                    presentation="adaptive"
+                    items={[
+                      {
+                        id: 'archive',
+                        label: t('page.__PAGE__.row.archive'),
+                        icon: <Icon icon="close" size="sm" />,
+                      },
+                    ]}
+                  />
+                }
+              />
+            ))}
+          </List>
+        )}
+
+        {visibleItems.length > 0 ? (
+          <Stack direction="horizontal" hAlign="center">
+            <Button label={t('page.__PAGE__.loadMore')} variant="ghost" onClick={() => undefined} />
+          </Stack>
+        ) : null}
+      </Stack>
+    </PageShell>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Documents",
+    "page.__PAGE__.back": "Back",
+    "page.__PAGE__.new": "New",
+    "page.__PAGE__.search.label": "Search documents",
+    "page.__PAGE__.search.placeholder": "Search documents",
+    "page.__PAGE__.filter.label": "Document view",
+    "page.__PAGE__.filter.recent": "Recent",
+    "page.__PAGE__.filter.all": "All",
+    "page.__PAGE__.filter.archived": "Archived",
+    "page.__PAGE__.empty.title": "No documents yet",
+    "page.__PAGE__.empty.description": "Create the first document to start this collection.",
+    "page.__PAGE__.noResults": "No documents match this search.",
+    "page.__PAGE__.listTitle": "Documents",
+    "page.__PAGE__.row.options": "Document actions",
+    "page.__PAGE__.row.archive": "Archive",
+    "page.__PAGE__.item.brief.title": "Project brief",
+    "page.__PAGE__.item.brief.meta": "Product",
+    "page.__PAGE__.item.notes.title": "Research notes",
+    "page.__PAGE__.item.notes.meta": "Research",
+    "page.__PAGE__.item.archive.title": "Team guidelines",
+    "page.__PAGE__.item.archive.meta": "Operations",
+    "page.__PAGE__.loadMore": "Load more"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "文档",
+    "page.__PAGE__.back": "返回",
+    "page.__PAGE__.new": "新建",
+    "page.__PAGE__.search.label": "搜索文档",
+    "page.__PAGE__.search.placeholder": "搜索文档",
+    "page.__PAGE__.filter.label": "文档视图",
+    "page.__PAGE__.filter.recent": "最近",
+    "page.__PAGE__.filter.all": "全部",
+    "page.__PAGE__.filter.archived": "已归档",
+    "page.__PAGE__.empty.title": "暂无文档",
+    "page.__PAGE__.empty.description": "创建第一份文档来开始这个集合。",
+    "page.__PAGE__.noResults": "没有文档符合此搜索。",
+    "page.__PAGE__.listTitle": "文档",
+    "page.__PAGE__.row.options": "文档操作",
+    "page.__PAGE__.row.archive": "归档",
+    "page.__PAGE__.item.brief.title": "项目简介",
+    "page.__PAGE__.item.brief.meta": "产品",
+    "page.__PAGE__.item.notes.title": "研究笔记",
+    "page.__PAGE__.item.notes.meta": "研究",
+    "page.__PAGE__.item.archive.title": "团队指南",
+    "page.__PAGE__.item.archive.meta": "运营",
+    "page.__PAGE__.loadMore": "加载更多"
+  }
+}
+*/

package/templates/dock-settings.doc.mjs

@@ -0,0 +1,19 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Settings page',
+  displayName: 'Settings page',
+  description:
+    'A mobile-first settings surface with compact tabs, a wide side navigation, and one scrollable section panel.',
+  category: 'Settings - Sections',
+  keywords: [
+    'settings page',
+    'preferences',
+    'sections',
+    'mobile',
+    'mobile settings',
+    'account settings',
+  ],
+  replaces: 'settings',
+  isReady: true,
+}

package/templates/dock-settings.tsx

@@ -0,0 +1,272 @@
+import { Heading } from '@astryxdesign/core/Heading'
+import { Icon, type IconName } from '@astryxdesign/core/Icon'
+import { Selector } from '@astryxdesign/core/Selector'
+import { SideNav, SideNavItem, SideNavSection } from '@astryxdesign/core/SideNav'
+import { Stack } from '@astryxdesign/core/Stack'
+import { Switch } from '@astryxdesign/core/Switch'
+import { Tab, TabList } from '@astryxdesign/core/TabList'
+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 { useState, type ReactNode } from 'react'
+import { PageContainer } from '@/components/layout'
+
+const SECTIONS = [
+  { id: 'general', icon: 'wrench' },
+  { id: 'notifications', icon: 'info' },
+  { id: 'privacy', icon: 'eyeSlash' },
+] as const
+type SectionId = (typeof SECTIONS)[number]['id']
+
+const ROWS = {
+  general: [
+    {
+      id: 'theme',
+      icon: 'wrench',
+      titleKey: 'page.__PAGE__.general.theme.title',
+      descriptionKey: 'page.__PAGE__.general.theme.description',
+    },
+  ],
+  notifications: [
+    {
+      id: 'updates',
+      icon: 'info',
+      titleKey: 'page.__PAGE__.notifications.updates.title',
+      descriptionKey: 'page.__PAGE__.notifications.updates.description',
+    },
+  ],
+  privacy: [
+    {
+      id: 'history',
+      icon: 'eyeSlash',
+      titleKey: 'page.__PAGE__.privacy.history.title',
+      descriptionKey: 'page.__PAGE__.privacy.history.description',
+    },
+  ],
+} as const
+
+const styles = stylex.create({
+  pageColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+    overflow: 'hidden',
+    '@container (min-width: 420px)': { gap: '1.5rem' },
+  },
+  layout: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+    '@container (min-width: 640px)': { flexDirection: 'row', gap: '1.5rem' },
+  },
+  wideNav: {
+    display: 'none',
+    '@container (min-width: 640px)': { display: 'block', width: '13rem', flexShrink: 0 },
+  },
+  sideNav: { width: '100%' },
+  narrowNav: {
+    width: '100%',
+    '@container (min-width: 640px)': { display: 'none' },
+  },
+  panel: {
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    width: '100%',
+    overflowY: 'auto',
+    paddingBlockEnd: '1rem',
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: '0.75rem',
+    '@container (min-width: 480px)': {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+  },
+  copy: { minWidth: 0 },
+  control: {
+    flexShrink: 0,
+    '@container (max-width: 479px)': { width: '100%' },
+  },
+})
+
+function isSectionId(value: string): value is SectionId {
+  return SECTIONS.some((section) => section.id === value)
+}
+
+interface SettingsRowProps {
+  readonly icon: IconName
+  readonly title: string
+  readonly description: string
+  readonly control: ReactNode
+}
+
+function SettingsRow({ icon, title, description, control }: SettingsRowProps) {
+  return (
+    <Stack direction="horizontal" gap={2} vAlign="start" xstyle={styles.row}>
+      <Stack direction="horizontal" gap={2} vAlign="start" xstyle={styles.copy}>
+        <Icon icon={icon} size="sm" color="secondary" />
+        <Stack gap={0.5} xstyle={styles.copy}>
+          <Text type="body" weight="semibold">
+            {title}
+          </Text>
+          <Text type="supporting" color="secondary">
+            {description}
+          </Text>
+        </Stack>
+      </Stack>
+      <Stack xstyle={styles.control}>{control}</Stack>
+    </Stack>
+  )
+}
+
+export default function DockSettings() {
+  const t = useTranslator()
+  const [section, setSection] = useState<SectionId>('general')
+  const [theme, setTheme] = useState('neutral')
+  const [notifications, setNotifications] = useState(true)
+  const [history, setHistory] = useState(false)
+  const rows = ROWS[section]
+
+  return (
+    <PageContainer isFullHeight>
+      <VisuallyHidden>
+        <Heading level={1}>{t('page.__PAGE__.title')}</Heading>
+      </VisuallyHidden>
+      <Stack xstyle={styles.pageColumn}>
+        <Stack direction="horizontal" gap={4} xstyle={styles.layout}>
+          <TabList
+            aria-label={t('page.__PAGE__.sections')}
+            value={section}
+            onChange={(value) => {
+              if (isSectionId(value)) setSection(value)
+            }}
+            size="sm"
+            hasDivider
+            xstyle={styles.narrowNav}
+          >
+            {SECTIONS.map((candidate) => (
+              <Tab
+                key={candidate.id}
+                value={candidate.id}
+                label={t(`page.__PAGE__.section.${candidate.id}`)}
+                icon={<Icon icon={candidate.icon} size="sm" />}
+              />
+            ))}
+          </TabList>
+
+          <Stack xstyle={styles.wideNav}>
+            <SideNav aria-label={t('page.__PAGE__.sections')} xstyle={styles.sideNav}>
+              <SideNavSection title={t('page.__PAGE__.sections')} isHeaderHidden>
+                {SECTIONS.map((candidate) => (
+                  <SideNavItem
+                    key={candidate.id}
+                    label={t(`page.__PAGE__.section.${candidate.id}`)}
+                    icon={<Icon icon={candidate.icon} size="sm" />}
+                    isSelected={candidate.id === section}
+                    onClick={() => setSection(candidate.id)}
+                  />
+                ))}
+              </SideNavSection>
+            </SideNav>
+          </Stack>
+
+          <Stack gap={4} isScrollable xstyle={styles.panel}>
+            {rows.map((row) => {
+              const control =
+                row.id === 'theme' ? (
+                  <Selector
+                    label={t('page.__PAGE__.general.theme.control')}
+                    value={theme}
+                    onChange={setTheme}
+                    options={[
+                      { value: 'neutral', label: t('page.__PAGE__.general.theme.neutral') },
+                      { value: 'matcha', label: t('page.__PAGE__.general.theme.matcha') },
+                      { value: 'stone', label: t('page.__PAGE__.general.theme.stone') },
+                    ]}
+                  />
+                ) : row.id === 'updates' ? (
+                  <Switch
+                    label={t('page.__PAGE__.notifications.updates.control')}
+                    value={notifications}
+                    onChange={setNotifications}
+                  />
+                ) : (
+                  <Switch
+                    label={t('page.__PAGE__.privacy.history.control')}
+                    value={history}
+                    onChange={setHistory}
+                  />
+                )
+
+              return (
+                <SettingsRow
+                  key={row.id}
+                  icon={row.icon}
+                  title={t(row.titleKey)}
+                  description={t(row.descriptionKey)}
+                  control={control}
+                />
+              )
+            })}
+          </Stack>
+        </Stack>
+      </Stack>
+    </PageContainer>
+  )
+}
+
+/*
+astryx-messages
+{
+  "en": {
+    "page.__PAGE__.title": "Settings",
+    "page.__PAGE__.sections": "Settings sections",
+    "page.__PAGE__.section.general": "General",
+    "page.__PAGE__.section.notifications": "Notifications",
+    "page.__PAGE__.section.privacy": "Privacy",
+    "page.__PAGE__.general.theme.title": "Theme",
+    "page.__PAGE__.general.theme.description": "Choose the color system used across the workspace.",
+    "page.__PAGE__.general.theme.control": "Theme",
+    "page.__PAGE__.general.theme.neutral": "Neutral",
+    "page.__PAGE__.general.theme.matcha": "Matcha",
+    "page.__PAGE__.general.theme.stone": "Stone",
+    "page.__PAGE__.notifications.updates.title": "Product updates",
+    "page.__PAGE__.notifications.updates.description": "Receive occasional messages about new features.",
+    "page.__PAGE__.notifications.updates.control": "Product updates",
+    "page.__PAGE__.privacy.history.title": "Activity history",
+    "page.__PAGE__.privacy.history.description": "Keep recent activity available in this workspace.",
+    "page.__PAGE__.privacy.history.control": "Activity history"
+  },
+  "zh-CN": {
+    "page.__PAGE__.title": "设置",
+    "page.__PAGE__.sections": "设置分区",
+    "page.__PAGE__.section.general": "通用",
+    "page.__PAGE__.section.notifications": "通知",
+    "page.__PAGE__.section.privacy": "隐私",
+    "page.__PAGE__.general.theme.title": "主题",
+    "page.__PAGE__.general.theme.description": "选择整个工作区使用的色彩系统。",
+    "page.__PAGE__.general.theme.control": "主题",
+    "page.__PAGE__.general.theme.neutral": "中性",
+    "page.__PAGE__.general.theme.matcha": "抹茶",
+    "page.__PAGE__.general.theme.stone": "石色",
+    "page.__PAGE__.notifications.updates.title": "产品更新",
+    "page.__PAGE__.notifications.updates.description": "偶尔接收新功能消息。",
+    "page.__PAGE__.notifications.updates.control": "产品更新",
+    "page.__PAGE__.privacy.history.title": "活动历史",
+    "page.__PAGE__.privacy.history.description": "在此工作区保留最近活动。",
+    "page.__PAGE__.privacy.history.control": "活动历史"
+  }
+}
+*/

package/templates/dock-workbench.doc.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@astryxdesign/cli/authoring').IntegrationTemplateDoc} */
+export default {
+  type: 'page',
+  name: 'Workbench page',
+  displayName: 'Workbench page',
+  description:
+    'A second-level one-screen workbench with a fixed top bar, section rows, an inline add action, and configuration in a side drawer.',
+  category: 'Workspace - Workbench',
+  keywords: ['workbench page', 'workspace', 'top bar', 'sections', 'side drawer', 'mobile'],
+  isReady: true,
+}