@gcsa/console-core 0.1.0

package/src/gcsaLocale.ts

@@ -0,0 +1,431 @@
+/** BCP 47，与 GCSA 主站语言一致 */
+export type GcsaConsoleLocale = 'zh-CN' | 'zh-TW' | 'en-US';
+
+export const GCSA_DEFAULT_LOCALE: GcsaConsoleLocale = 'zh-CN';
+
+export type GcsaDatePickerLocaleStrings = {
+  placeholder: string;
+  placeholderDateTime: string;
+  selectTime: string;
+  now: string;
+  placeholderStart: string;
+  placeholderEnd: string;
+  placeholderMonth: string;
+  placeholderStartMonth: string;
+  placeholderEndMonth: string;
+  rangeSeparator: string;
+  openCalendar: string;
+  prevMonth: string;
+  nextMonth: string;
+  prevYear: string;
+  nextYear: string;
+  today: string;
+};
+
+export type GcsaConsoleLocaleMessages = {
+  close: string;
+  remove: string;
+  open: string;
+  menu: string;
+  hoverToView: string;
+  confirm: string;
+  cancel: string;
+  delete: string;
+  confirmAction: string;
+  validationFailed: string;
+  formValidationFailed: string;
+  datePicker: GcsaDatePickerLocaleStrings;
+  uploadSelectFile: string;
+  uploadRemoveFile: string;
+  uploadDragHint: string;
+  uploadUploading: string;
+  uploadFailed: string;
+  uploadRetry: string;
+  inputNumberDecrease: string;
+  inputNumberIncrease: string;
+  shellCloseNav: string;
+  shellOpenNav: string;
+  shellExpandSider: string;
+  shellCollapseSider: string;
+  chatPlaceholder: string;
+  chatSend: string;
+  chatSending: string;
+  chatEmpty: string;
+  chatCopy: string;
+  chatCopySuccess: string;
+  chatCopyError: string;
+  formSubmit: string;
+  formReset: string;
+  paginationLabel: string;
+  paginationPrev: string;
+  paginationNext: string;
+  paginationPageSize: string;
+  paginationPageSizeAria: string;
+  paginationJumper: string;
+  selectListHint: string;
+  selectPlaceholder: string;
+  searchPlaceholder: string;
+  noOptions: string;
+  emptyDefault: string;
+  loading: string;
+  retry: string;
+  dataTableEmpty: string;
+  dataTableLoading: string;
+  dataTableTotal: string;
+  dataTableSelected: string;
+  dataTableRange: string;
+  dataTableFilter: string;
+  dataTableSummary: string;
+  dataTableSelectAll: string;
+  dataTableSelectRow: string;
+  dataTableResizeColumn: string;
+  dataTableExpandRow: string;
+  dataTableCollapseRow: string;
+  dataTableLoadChildren: string;
+  dataTableRetryChildren: string;
+  dataTableTreeLoading: string;
+  dataTableTreeLoadError: string;
+  timePickerPlaceholder: string;
+  timePickerOpen: string;
+  timePickerClear: string;
+  timePickerSelect: string;
+  timeHour: string;
+  timeMinute: string;
+  timeSecond: string;
+  transferSourceTitle: string;
+  transferTargetTitle: string;
+  transferMoveRight: string;
+  transferMoveLeft: string;
+  imagePreview: string;
+  imagePreviewClose: string;
+  stepsLabel: string;
+  timelineLabel: string;
+  breadcrumbLabel: string;
+  consoleNavLabel: string;
+};
+
+const LOCALE_MESSAGES: Record<GcsaConsoleLocale, GcsaConsoleLocaleMessages> = {
+  'zh-CN': {
+    close: '关闭',
+    remove: '移除',
+    open: '打开',
+    menu: '菜单',
+    hoverToView: '悬停查看',
+    confirm: '确认',
+    cancel: '取消',
+    delete: '删除',
+    confirmAction: '确认操作？',
+    validationFailed: '校验失败',
+    formValidationFailed: '表单校验失败',
+    datePicker: {
+      placeholder: '选择日期',
+      placeholderDateTime: '选择日期时间',
+      selectTime: '选择时间',
+      now: '此刻',
+      placeholderStart: '开始日期',
+      placeholderEnd: '结束日期',
+      placeholderMonth: '选择月份',
+      placeholderStartMonth: '开始月份',
+      placeholderEndMonth: '结束月份',
+      rangeSeparator: '至',
+      openCalendar: '打开日历',
+      prevMonth: '上一月',
+      nextMonth: '下一月',
+      prevYear: '上一年',
+      nextYear: '下一年',
+      today: '今天'
+    },
+    uploadSelectFile: '选择文件',
+    uploadRemoveFile: '移除文件',
+    uploadDragHint: '拖拽文件到此处，或点击选择',
+    uploadUploading: '上传中…',
+    uploadFailed: '上传失败',
+    uploadRetry: '重试',
+    inputNumberDecrease: '减少',
+    inputNumberIncrease: '增加',
+    shellCloseNav: '关闭导航',
+    shellOpenNav: '打开导航',
+    shellExpandSider: '展开侧栏',
+    shellCollapseSider: '收起侧栏',
+    chatPlaceholder: '输入消息…',
+    chatSend: '发送',
+    chatSending: '发送中…',
+    chatEmpty: '开始对话吧',
+    chatCopy: '复制',
+    chatCopySuccess: '已复制',
+    chatCopyError: '复制失败',
+    formSubmit: '保存',
+    formReset: '重置',
+    paginationLabel: '分页',
+    paginationPrev: '上一页',
+    paginationNext: '下一页',
+    paginationPageSize: '每页',
+    paginationPageSizeAria: '每页条数',
+    paginationJumper: '跳至',
+    selectListHint: '共 {count} 项，可滚动浏览',
+    selectPlaceholder: '请选择',
+    searchPlaceholder: '搜索',
+    noOptions: '暂无选项',
+    emptyDefault: '暂无数据',
+    loading: '加载中…',
+    retry: '重试',
+    dataTableEmpty: '暂无数据',
+    dataTableLoading: '加载中…',
+    dataTableTotal: '共 {count} 条',
+    dataTableSelected: '已选 {count}',
+    dataTableRange: '第 {start}-{end} 条，共 {total} 条',
+    dataTableFilter: '筛选',
+    dataTableSummary: '合计',
+    dataTableSelectAll: '选择当前页全部行',
+    dataTableSelectRow: '选择此行',
+    dataTableResizeColumn: '调整列宽',
+    dataTableExpandRow: '展开行',
+    dataTableCollapseRow: '收起行',
+    dataTableLoadChildren: '加载子节点',
+    dataTableRetryChildren: '重试加载子节点',
+    dataTableTreeLoading: '加载中…',
+    dataTableTreeLoadError: '加载失败，重试',
+    timePickerPlaceholder: '请选择时间',
+    timePickerOpen: '打开时间选择面板',
+    timePickerClear: '清空时间',
+    timePickerSelect: '选择时间',
+    timeHour: '小时',
+    timeMinute: '分钟',
+    timeSecond: '秒',
+    transferSourceTitle: '可选项',
+    transferTargetTitle: '已选项',
+    transferMoveRight: '移入已选',
+    transferMoveLeft: '移回可选',
+    imagePreview: '图片预览',
+    imagePreviewClose: '关闭预览',
+    stepsLabel: '步骤',
+    timelineLabel: '时间线',
+    breadcrumbLabel: '面包屑',
+    consoleNavLabel: '控制台导航'
+  },
+  'zh-TW': {
+    close: '關閉',
+    remove: '移除',
+    open: '打開',
+    menu: '選單',
+    hoverToView: '懸停查看',
+    confirm: '確認',
+    cancel: '取消',
+    delete: '刪除',
+    confirmAction: '確認操作？',
+    validationFailed: '校驗失敗',
+    formValidationFailed: '表單校驗失敗',
+    datePicker: {
+      placeholder: '選擇日期',
+      placeholderDateTime: '選擇日期時間',
+      selectTime: '選擇時間',
+      now: '此刻',
+      placeholderStart: '開始日期',
+      placeholderEnd: '結束日期',
+      placeholderMonth: '選擇月份',
+      placeholderStartMonth: '開始月份',
+      placeholderEndMonth: '結束月份',
+      rangeSeparator: '至',
+      openCalendar: '打開日曆',
+      prevMonth: '上一月',
+      nextMonth: '下一月',
+      prevYear: '上一年',
+      nextYear: '下一年',
+      today: '今天'
+    },
+    uploadSelectFile: '選擇檔案',
+    uploadRemoveFile: '移除檔案',
+    uploadDragHint: '拖曳檔案到此處，或點擊選擇',
+    uploadUploading: '上傳中…',
+    uploadFailed: '上傳失敗',
+    uploadRetry: '重試',
+    inputNumberDecrease: '減少',
+    inputNumberIncrease: '增加',
+    shellCloseNav: '關閉導覽',
+    shellOpenNav: '打開導覽',
+    shellExpandSider: '展開側欄',
+    shellCollapseSider: '收起側欄',
+    chatPlaceholder: '輸入訊息…',
+    chatSend: '傳送',
+    chatSending: '傳送中…',
+    chatEmpty: '開始對話吧',
+    chatCopy: '複製',
+    chatCopySuccess: '已複製',
+    chatCopyError: '複製失敗',
+    formSubmit: '儲存',
+    formReset: '重置',
+    paginationLabel: '分頁',
+    paginationPrev: '上一頁',
+    paginationNext: '下一頁',
+    paginationPageSize: '每頁',
+    paginationPageSizeAria: '每頁筆數',
+    paginationJumper: '跳至',
+    selectListHint: '共 {count} 項，可捲動瀏覽',
+    selectPlaceholder: '請選擇',
+    searchPlaceholder: '搜尋',
+    noOptions: '暫無選項',
+    emptyDefault: '暫無資料',
+    loading: '載入中…',
+    retry: '重試',
+    dataTableEmpty: '暫無資料',
+    dataTableLoading: '載入中…',
+    dataTableTotal: '共 {count} 條',
+    dataTableSelected: '已選 {count}',
+    dataTableRange: '第 {start}-{end} 條，共 {total} 條',
+    dataTableFilter: '篩選',
+    dataTableSummary: '合計',
+    dataTableSelectAll: '選擇目前頁全部列',
+    dataTableSelectRow: '選擇此列',
+    dataTableResizeColumn: '調整欄寬',
+    dataTableExpandRow: '展開列',
+    dataTableCollapseRow: '收起列',
+    dataTableLoadChildren: '載入子節點',
+    dataTableRetryChildren: '重試載入子節點',
+    dataTableTreeLoading: '載入中…',
+    dataTableTreeLoadError: '載入失敗，重試',
+    timePickerPlaceholder: '請選擇時間',
+    timePickerOpen: '打開時間選擇面板',
+    timePickerClear: '清空時間',
+    timePickerSelect: '選擇時間',
+    timeHour: '小時',
+    timeMinute: '分鐘',
+    timeSecond: '秒',
+    transferSourceTitle: '可選項',
+    transferTargetTitle: '已選項',
+    transferMoveRight: '移入已選',
+    transferMoveLeft: '移回可選',
+    imagePreview: '圖片預覽',
+    imagePreviewClose: '關閉預覽',
+    stepsLabel: '步驟',
+    timelineLabel: '時間線',
+    breadcrumbLabel: '麵包屑',
+    consoleNavLabel: '控制台導覽'
+  },
+  'en-US': {
+    close: 'Close',
+    remove: 'Remove',
+    open: 'Open',
+    menu: 'Menu',
+    hoverToView: 'Hover to view',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    confirmAction: 'Confirm this action?',
+    validationFailed: 'Validation failed',
+    formValidationFailed: 'Form validation failed',
+    datePicker: {
+      placeholder: 'Select date',
+      placeholderDateTime: 'Select date and time',
+      selectTime: 'Select time',
+      now: 'Now',
+      placeholderStart: 'Start date',
+      placeholderEnd: 'End date',
+      placeholderMonth: 'Select month',
+      placeholderStartMonth: 'Start month',
+      placeholderEndMonth: 'End month',
+      rangeSeparator: 'to',
+      openCalendar: 'Open calendar',
+      prevMonth: 'Previous month',
+      nextMonth: 'Next month',
+      prevYear: 'Previous year',
+      nextYear: 'Next year',
+      today: 'Today'
+    },
+    uploadSelectFile: 'Choose file',
+    uploadRemoveFile: 'Remove file',
+    uploadDragHint: 'Drop files here, or click to browse',
+    uploadUploading: 'Uploading…',
+    uploadFailed: 'Upload failed',
+    uploadRetry: 'Retry',
+    inputNumberDecrease: 'Decrease',
+    inputNumberIncrease: 'Increase',
+    shellCloseNav: 'Close navigation',
+    shellOpenNav: 'Open navigation',
+    shellExpandSider: 'Expand sidebar',
+    shellCollapseSider: 'Collapse sidebar',
+    chatPlaceholder: 'Type a message…',
+    chatSend: 'Send',
+    chatSending: 'Sending…',
+    chatEmpty: 'Start a conversation',
+    chatCopy: 'Copy',
+    chatCopySuccess: 'Copied',
+    chatCopyError: 'Copy failed',
+    formSubmit: 'Save',
+    formReset: 'Reset',
+    paginationLabel: 'Pagination',
+    paginationPrev: 'Previous',
+    paginationNext: 'Next',
+    paginationPageSize: 'Per page',
+    paginationPageSizeAria: 'Items per page',
+    paginationJumper: 'Go to',
+    selectListHint: '{count} items — scroll to browse',
+    selectPlaceholder: 'Please select',
+    searchPlaceholder: 'Search',
+    noOptions: 'No options',
+    emptyDefault: 'No data',
+    loading: 'Loading…',
+    retry: 'Retry',
+    dataTableEmpty: 'No data',
+    dataTableLoading: 'Loading…',
+    dataTableTotal: '{count} items',
+    dataTableSelected: '{count} selected',
+    dataTableRange: '{start}-{end} of {total}',
+    dataTableFilter: 'Filter',
+    dataTableSummary: 'Total',
+    dataTableSelectAll: 'Select all rows on this page',
+    dataTableSelectRow: 'Select this row',
+    dataTableResizeColumn: 'Resize column',
+    dataTableExpandRow: 'Expand row',
+    dataTableCollapseRow: 'Collapse row',
+    dataTableLoadChildren: 'Loading children',
+    dataTableRetryChildren: 'Retry loading children',
+    dataTableTreeLoading: 'Loading…',
+    dataTableTreeLoadError: 'Failed to load — retry',
+    timePickerPlaceholder: 'Select time',
+    timePickerOpen: 'Open time picker',
+    timePickerClear: 'Clear time',
+    timePickerSelect: 'Select time',
+    timeHour: 'Hour',
+    timeMinute: 'Minute',
+    timeSecond: 'Second',
+    transferSourceTitle: 'Available',
+    transferTargetTitle: 'Selected',
+    transferMoveRight: 'Move to selected',
+    transferMoveLeft: 'Move to available',
+    imagePreview: 'Image preview',
+    imagePreviewClose: 'Close preview',
+    stepsLabel: 'Steps',
+    timelineLabel: 'Timeline',
+    breadcrumbLabel: 'Breadcrumb',
+    consoleNavLabel: 'Console navigation'
+  }
+};
+
+export function normalizeGcsaLocale(locale?: string): GcsaConsoleLocale {
+  if (locale === 'zh-CN' || locale === 'zh-TW' || locale === 'en-US') return locale;
+  if (locale?.startsWith('zh')) {
+    return locale.includes('TW') || locale.includes('Hant') ? 'zh-TW' : 'zh-CN';
+  }
+  if (locale?.startsWith('en')) return 'en-US';
+  return GCSA_DEFAULT_LOCALE;
+}
+
+export function getGcsaLocaleMessages(locale: GcsaConsoleLocale): GcsaConsoleLocaleMessages {
+  return LOCALE_MESSAGES[locale] ?? LOCALE_MESSAGES[GCSA_DEFAULT_LOCALE];
+}
+
+export function getGcsaDatePickerMessages(locale: GcsaConsoleLocale): GcsaDatePickerLocaleStrings {
+  return getGcsaLocaleMessages(locale).datePicker;
+}
+
+/** 周起始日：中文周一，英文周日 */
+export function getGcsaStartOfWeek(locale: GcsaConsoleLocale): 0 | 1 {
+  return locale === 'en-US' ? 0 : 1;
+}
+
+export function formatGcsaLocaleMessage(
+  template: string,
+  vars: Record<string, string | number>
+): string {
+  return template.replace(/\{(\w+)\}/g, (_, key: string) => String(vars[key] ?? ''));
+}

package/src/gcsaMarkdown.ts

@@ -0,0 +1,19 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+let configured = false;
+
+function ensureMarked() {
+  if (configured) return;
+  marked.setOptions({ breaks: true, gfm: true });
+  configured = true;
+}
+
+export function renderGcsaMarkdown(content: string): string {
+  const raw = content || '';
+  if (!raw.trim()) return '';
+  ensureMarked();
+  const parsed = marked.parse(raw, { async: false }) as string;
+  if (typeof window === 'undefined') return parsed;
+  return DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
+}

package/src/gcsaMenu.ts

@@ -0,0 +1,43 @@
+export type GcsaMenuIconKey = 'dashboard' | 'alert' | 'assets' | 'settings' | 'users' | 'chat';
+
+export type GcsaMenuItem = {
+  key: string;
+  label: string;
+  iconKey?: GcsaMenuIconKey;
+  /** 自定义图标节点（React/Vue 插槽）；侧栏可暂用 @ant-design/icons */
+  icon?: unknown;
+  href?: string;
+  disabled?: boolean;
+  type?: 'item' | 'group' | 'divider';
+  children?: GcsaMenuItem[];
+};
+
+export function navItemsToMenuItems(
+  items: Array<{
+    key: string;
+    label: string;
+    iconKey?: GcsaMenuIconKey;
+    href?: string;
+  }>
+): GcsaMenuItem[] {
+  return items.map(item => ({
+    key: item.key,
+    label: item.label,
+    iconKey: item.iconKey,
+    href: item.href
+  }));
+}
+
+export type GcsaMenuMode = 'vertical' | 'horizontal' | 'inline';
+
+export function collectGcsaMenuBranchKeys(items: GcsaMenuItem[]): string[] {
+  const keys: string[] = [];
+  for (const item of items) {
+    if (item.type === 'group' || item.type === 'divider') continue;
+    if (item.children?.length) {
+      keys.push(item.key);
+      keys.push(...collectGcsaMenuBranchKeys(item.children));
+    }
+  }
+  return keys;
+}

package/src/gcsaMessage.ts

@@ -0,0 +1,3 @@
+export type GcsaMessageType = 'success' | 'error' | 'info';
+
+export const GCSA_MESSAGE_DURATION_MS = 3200;

package/src/gcsaPagination.ts

@@ -0,0 +1,68 @@
+export type GcsaPaginationItem = number | 'ellipsis-start' | 'ellipsis-end';
+
+export type GcsaPaginationAlign = 'left' | 'center' | 'right';
+
+export type GcsaPaginationLayoutPart = 'total' | 'sizes' | 'prev' | 'pager' | 'next' | 'jumper';
+
+export const GCSA_PAGINATION_LAYOUT_PARTS = [
+  'total',
+  'sizes',
+  'prev',
+  'pager',
+  'next',
+  'jumper'
+] as const satisfies readonly GcsaPaginationLayoutPart[];
+
+const paginationLayoutPartSet = new Set<string>(GCSA_PAGINATION_LAYOUT_PARTS);
+
+export function parseGcsaPaginationLayout(
+  layout: string | readonly GcsaPaginationLayoutPart[]
+): GcsaPaginationLayoutPart[] {
+  const parts =
+    typeof layout === 'string'
+      ? layout
+          .split(',')
+          .map(part => part.trim())
+          .filter(Boolean)
+      : [...layout];
+
+  return parts.filter((part): part is GcsaPaginationLayoutPart => paginationLayoutPartSet.has(part));
+}
+
+export function resolveGcsaPaginationLayout(options: {
+  layout?: string | readonly GcsaPaginationLayoutPart[];
+  showPageSize?: boolean;
+  showJumper?: boolean;
+}): GcsaPaginationLayoutPart[] {
+  if (options.layout) {
+    return parseGcsaPaginationLayout(options.layout);
+  }
+
+  const parts: GcsaPaginationLayoutPart[] = ['prev', 'pager', 'next'];
+  if (options.showPageSize) parts.push('sizes');
+  if (options.showJumper) parts.push('jumper');
+  return parts;
+}
+
+export function getGcsaPaginationAlignClass(align: GcsaPaginationAlign = 'right'): string {
+  return `gcsa-pagination--align-${align}`;
+}
+
+export function getGcsaPaginationItems(page: number, totalPages: number, maxVisible = 7): GcsaPaginationItem[] {
+  const count = Math.max(1, Math.floor(totalPages));
+  const current = Math.min(Math.max(1, Math.floor(page)), count);
+  const visible = Math.max(5, Math.floor(maxVisible));
+  if (count <= visible) return Array.from({ length: count }, (_, index) => index + 1);
+
+  const innerCount = visible - 2;
+  let start = Math.max(2, current - Math.floor(innerCount / 2));
+  let end = Math.min(count - 1, start + innerCount - 1);
+  start = Math.max(2, end - innerCount + 1);
+
+  const items: GcsaPaginationItem[] = [1];
+  if (start > 2) items.push('ellipsis-start');
+  for (let value = start; value <= end; value += 1) items.push(value);
+  if (end < count - 1) items.push('ellipsis-end');
+  items.push(count);
+  return items;
+}

package/src/gcsaPopupCollision.ts

@@ -0,0 +1,111 @@
+import {
+  computePosition,
+  flip,
+  limitShift,
+  offset,
+  shift,
+  size,
+  type Middleware,
+  type Placement
+} from '@floating-ui/dom';
+import {
+  createGcsaPopupPositioning,
+  type GcsaPopupPositioningOptions
+} from './gcsaPopupPositioning';
+
+export type GcsaPopupRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type GcsaViewportRect = {
+  width: number;
+  height: number;
+};
+
+/** 与 Zag popper get-placement 对齐的 middleware 组合 */
+export function buildGcsaPopupMiddleware(
+  options: ReturnType<typeof createGcsaPopupPositioning>
+): Middleware[] {
+  const middleware: Middleware[] = [
+    offset(options.gutter),
+    flip({ padding: options.overflowPadding }),
+    shift({
+      padding: options.overflowPadding,
+      mainAxis: options.slide,
+      crossAxis: options.overlap,
+      limiter: limitShift()
+    }),
+    size({
+      padding: options.overflowPadding,
+      apply({ elements, rects, availableWidth, availableHeight }) {
+        const floating = elements.floating as HTMLElement;
+        floating.style.setProperty('--reference-width', `${Math.round(rects.reference.width)}px`);
+        floating.style.setProperty('--reference-height', `${Math.round(rects.reference.height)}px`);
+        floating.style.setProperty('--available-width', `${Math.floor(availableWidth)}px`);
+        floating.style.setProperty('--available-height', `${Math.floor(availableHeight)}px`);
+        if (options.sameWidth) {
+          floating.style.width = `${Math.round(rects.reference.width)}px`;
+        }
+        if (options.fitViewport) {
+          floating.style.maxWidth = `${Math.floor(availableWidth)}px`;
+        }
+      }
+    })
+  ];
+  return middleware;
+}
+
+export async function computeGcsaPopupPosition(
+  reference: Element,
+  floating: HTMLElement,
+  options: GcsaPopupPositioningOptions = {}
+) {
+  const config = createGcsaPopupPositioning(options);
+  return computePosition(reference, floating, {
+    placement: config.placement as Placement,
+    strategy: config.strategy,
+    middleware: buildGcsaPopupMiddleware(config)
+  });
+}
+
+export function getFloatingBox(
+  position: { x: number; y: number },
+  floating: Element
+): GcsaPopupRect {
+  const rect = floating.getBoundingClientRect();
+  return {
+    x: position.x,
+    y: position.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+/** 断言浮层在视口内并保留 overflowPadding */
+export function assertFloatingWithinViewport(
+  box: GcsaPopupRect,
+  viewport: GcsaViewportRect,
+  overflowPadding = 8
+) {
+  const errors: string[] = [];
+  if (box.x < overflowPadding) {
+    errors.push(`left overflow: x=${box.x} < padding=${overflowPadding}`);
+  }
+  if (box.y < overflowPadding) {
+    errors.push(`top overflow: y=${box.y} < padding=${overflowPadding}`);
+  }
+  if (box.x + box.width > viewport.width - overflowPadding) {
+    errors.push(
+      `right overflow: x+w=${box.x + box.width} > viewport-padding=${viewport.width - overflowPadding}`
+    );
+  }
+  if (box.y + box.height > viewport.height - overflowPadding) {
+    errors.push(
+      `bottom overflow: y+h=${box.y + box.height} > viewport-padding=${viewport.height - overflowPadding}`
+    );
+  }
+  return errors;
+}