@mohou/ui 1.0.20

package/src/hooks/use-html-dark.ts

@@ -0,0 +1,36 @@
+
+import { useEffect, useState } from 'react'
+
+/** True when the iframe/host document is in dark mode (class, data-theme, or --background). */
+export function htmlIsDark(el?: HTMLElement | null): boolean {
+  if (typeof document === 'undefined') return false
+  const root = el ?? document.documentElement
+  if (root.classList.contains('dark')) return true
+  if (root.classList.contains('light')) return false
+  const theme = root.getAttribute('data-theme')
+  if (theme === 'dark') return true
+  if (theme === 'light') return false
+  try {
+    const bg =
+      root.style.getPropertyValue('--background').trim() ||
+      getComputedStyle(root).getPropertyValue('--background').trim()
+    const oklch = bg.match(/oklch\(\s*([0-9.]+)/i)
+    if (oklch) return Number(oklch[1]) < 0.5
+  } catch {
+    /* jsdom */
+  }
+  return false
+}
+
+export function useHtmlDark(): boolean {
+  const [dark, setDark] = useState(() => htmlIsDark())
+  useEffect(() => {
+    const el = document.documentElement
+    const read = () => setDark(htmlIsDark(el))
+    read()
+    const obs = new MutationObserver(read)
+    obs.observe(el, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] })
+    return () => obs.disconnect()
+  }, [])
+  return dark
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    // SSR, node-render harnesses and bare jsdom have no matchMedia; a layout hook must not be
+    // the reason a view throws. Treat "unknown" as wide.
+    if (typeof window.matchMedia !== 'function') return
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/i18n/context.tsx

@@ -0,0 +1,71 @@
+
+import * as React from 'react'
+import { enUS, zhCN } from 'date-fns/locale'
+import type { Locale } from 'date-fns'
+
+import { en, type UiMessages } from './en'
+import { zh } from './zh'
+
+export type UiLocale = 'en' | 'zh'
+
+type UiI18nValue = {
+  locale: UiLocale
+  messages: UiMessages
+  dateLocale: Locale
+}
+
+const dictionaries: Record<UiLocale, UiMessages> = { en, zh }
+const dateLocales: Record<UiLocale, Locale> = { en: enUS, zh: zhCN }
+
+const UiI18nContext = React.createContext<UiI18nValue>({
+  locale: 'en',
+  messages: en,
+  dateLocale: enUS,
+})
+
+export function UiProvider({
+  locale = 'en',
+  messages,
+  children,
+}: {
+  locale?: UiLocale
+  messages?: UiMessages
+  children: React.ReactNode
+}) {
+  const value = React.useMemo<UiI18nValue>(
+    () => ({
+      locale,
+      messages: messages ?? dictionaries[locale],
+      dateLocale: dateLocales[locale],
+    }),
+    [locale, messages],
+  )
+  return <UiI18nContext.Provider value={value}>{children}</UiI18nContext.Provider>
+}
+
+export function useUiI18n() {
+  return React.useContext(UiI18nContext)
+}
+
+export function useUiMessages() {
+  return useUiI18n().messages
+}
+
+export function useUiLocale() {
+  return useUiI18n().locale
+}
+
+export function useDateLocale() {
+  return useUiI18n().dateLocale
+}
+
+export function useLabels<K extends keyof UiMessages>(
+  key: K,
+  override?: Partial<UiMessages[K]>,
+): UiMessages[K] {
+  const group = useUiMessages()[key]
+  if (!override) return group
+  return { ...group, ...override }
+}
+
+export { en, zh, dictionaries }

package/src/i18n/en.ts

@@ -0,0 +1,308 @@
+export const en = {
+  common: {
+    today: 'Today',
+    clear: 'Clear',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    save: 'Save',
+    delete: 'Delete',
+    search: 'Search…',
+    previous: 'Previous',
+    next: 'Next',
+    copy: 'Copy',
+    close: 'Close',
+  },
+  datePicker: {
+    placeholder: 'Pick a date',
+  },
+  dateRangePicker: {
+    placeholder: 'Pick a date range',
+  },
+  dateTimePicker: {
+    placeholder: 'Pick date and time',
+  },
+  dateTimeRange: {
+    start: 'Start',
+    end: 'End',
+  },
+  timeRange: {
+    to: 'to',
+  },
+  timezoneSelect: {
+    search: 'Search city or offset…',
+    empty: 'No timezone found.',
+    common: 'Common',
+    typeToSearch: (count: number) => `Type to search ${count} timezones`,
+    aria: (city: string) => `Timezone ${city}`,
+  },
+  relativeDate: {
+    today: 'Today',
+    last7d: 'Last 7d',
+    last30d: 'Last 30d',
+    sprint: 'This sprint',
+    custom: 'Custom',
+  },
+  searchInput: {
+    placeholder: 'Search…',
+  },
+  tagInput: {
+    placeholder: 'Add tag…',
+  },
+  userPicker: {
+    placeholder: 'Select user',
+  },
+  passwordField: {
+    show: 'Show password',
+    hide: 'Hide password',
+  },
+  numberField: {
+    decrease: 'Decrease',
+    increase: 'Increase',
+  },
+  durationInput: {
+    hours: 'h',
+    minutes: 'm',
+    decrease: (unit: string) => `Decrease ${unit}`,
+    increase: (unit: string) => `Increase ${unit}`,
+  },
+  copyable: {
+    copy: 'Copy',
+  },
+  confirmDialog: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+  },
+  eventCalendar: {
+    today: 'Today',
+    prev: 'Prev',
+    next: 'Next',
+    month: 'Month',
+    week: 'Week',
+    day: 'Day',
+    year: 'Year',
+    agenda: 'Agenda',
+    noEvents: 'No events in this range',
+    happeningNow: 'Happening now',
+    noAppointments: 'No appointments or consultations at the moment',
+    allDay: 'All day',
+    newEvent: 'New event',
+    editEvent: 'Edit event',
+    addEvent: 'Add Event',
+    eventTitle: 'Event title',
+    titlePlaceholder: 'Title',
+    descriptionPlaceholder: 'Description',
+    start: 'Start',
+    end: 'End',
+    save: 'Save',
+    saveChanges: 'Save Changes',
+    createEvent: 'Create Event',
+    delete: 'Delete',
+    more: (count: number) => `+${count} more`,
+    eventsCount: (count: number) => `${count} events`,
+    allUsers: 'All',
+    selectUser: 'Select a user',
+    clearFilter: 'Clear Filter',
+    settings: 'Calendar settings',
+    settingsAria: 'Calendar settings',
+    useDotBadge: 'Use dot badge',
+    use24Hour: 'Use 24 hour format',
+    scrollHour: 'Scroll hour',
+    agendaGroupBy: 'Agenda view group by',
+    groupByDate: 'Date',
+    groupByColor: 'Color',
+    searchAgenda: 'Type a command or search...',
+    formatError: 'Error while formatting',
+    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as [
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+    ],
+    weekdaysSun: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as [
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+      string,
+    ],
+  },
+  dataGrid: {
+    search: 'Search…',
+    filterColumn: (label: string) => `Filter ${label}…`,
+    clear: 'Clear',
+    clearFilters: 'Clear filters',
+    noResults: 'No results',
+    noResultsHint: 'Try a different search, or clear column filters.',
+    selectAll: 'Select all',
+    selectRow: 'Select row',
+    row: 'row',
+    rows: 'rows',
+    rowsLabel: 'Rows',
+    export: 'Export',
+    view: 'View',
+    columns: 'Columns',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    selected: (count: number) => `${count} selected`,
+  },
+  fileDropzone: {
+    drop: 'Drop files here, or click to browse',
+  },
+  kanbanIssue: {
+    assignee: 'Assignee',
+    reporter: 'Reporter',
+    updated: 'Updated',
+    unassigned: 'Unassigned',
+    description: 'Description',
+    noDescription: 'No description.',
+    comments: 'Comments',
+    noComments: 'No comments.',
+  },
+  markdownEditor: {
+    edit: 'Edit',
+    split: 'Split',
+    preview: 'Preview',
+  },
+  codeEditor: {
+    find: 'Find',
+    replace: 'Replace',
+    next: 'next',
+    previous: 'previous',
+    all: 'all',
+    matchCase: 'match case',
+    regexp: 'regexp',
+    byWord: 'by word',
+    replaceOne: 'replace',
+    replaceAll: 'replace all',
+    close: 'close',
+    goToLine: 'Go to line',
+    go: 'go',
+    currentMatch: 'current match',
+    onLine: 'on line',
+  },
+  richText: {
+    placeholder: 'Write…',
+    bold: 'Bold',
+    italic: 'Italic',
+    bullet: 'Bullet list',
+    ordered: 'Ordered list',
+    code: 'Code',
+  },
+  pagination: {
+    previous: 'Previous',
+    next: 'Next',
+    previousPage: 'Go to previous page',
+    nextPage: 'Go to next page',
+  },
+  questionnaire: {
+    previous: 'Previous',
+    skip: 'Skip',
+    next: 'Next',
+    submit: 'Submit',
+  },
+  command: {
+    title: 'Command Palette',
+    description: 'Search for a command to run...',
+  },
+  jiraWiki: {
+    empty: 'Empty',
+  },
+  jqlInput: {
+    placeholder: 'project = TMS AND status = Open',
+  },
+  logViewer: {
+    title: 'Logs',
+    search: 'Search',
+    closeSearch: 'Close search',
+    pauseScroll: 'Pause auto-scroll',
+    resumeScroll: 'Resume auto-scroll',
+    copyAll: 'Copy all logs',
+    copied: 'Copied',
+    download: 'Download logs',
+    clear: 'Clear logs',
+    filterPlaceholder: 'Filter logs…',
+    clearSearch: 'Clear search',
+    empty: 'No log entries.',
+    emptySearch: 'No matching log entries.',
+    newBelow: 'New logs below',
+    scrollLatest: 'Scroll to latest',
+    lines: (n: number) => `${n} lines`,
+    linesFiltered: (shown: number, total: number) =>
+      `${shown} / ${total} lines`,
+  },
+  envTable: {
+    empty: 'No environment variables.',
+    hideAll: 'Hide all',
+    revealAll: 'Reveal all',
+    hideAllValues: 'Hide all values',
+    revealAllValues: 'Reveal all values',
+    copyEnv: 'Copy .env',
+    copied: 'Copied!',
+    hideKey: (key: string) => `Hide ${key}`,
+    revealKey: (key: string) => `Reveal ${key}`,
+    copyValue: (key: string) => `Copy ${key} value`,
+  },
+  commitGraph: {
+    empty: 'No commits.',
+    parent: 'Parent',
+    parents: 'Parents',
+    justNow: 'just now',
+    minutesAgo: (n: number) => `${n}m ago`,
+    hoursAgo: (n: number) => `${n}h ago`,
+    daysAgo: (n: number) => `${n}d ago`,
+  },
+  appError: {
+    title: 'This mini-app hit an error',
+    renderHint:
+      'A component threw while rendering. Nothing else in the panel is affected.',
+    moduleHint: 'The UI bundle did not load — it usually needs recompiling.',
+    uncaughtHint: 'An unhandled error stopped this view.',
+    asyncHint: 'A background task failed without being handled.',
+    retry: 'Retry',
+    details: 'Show details',
+    hideDetails: 'Hide details',
+    reported: 'Reported to the host',
+  },
+  listDetail: {
+    back: 'Back to list',
+  },
+  formSheet: {
+    discardTitle: 'Discard these changes?',
+    discardBody: 'They have not been saved. Closing now throws them away.',
+    keepEditing: 'Keep editing',
+    discard: 'Discard',
+  },
+  wizardShell: {
+    back: 'Back',
+    next: 'Next',
+    finish: 'Finish',
+    working: 'Working…',
+    stepOf: (n: number, total: number) => `Step ${n} of ${total}`,
+  },
+  settingsSplit: {
+    nav: 'Section navigation',
+  },
+  liveRefresh: {
+    live: 'LIVE',
+    off: 'Tap to enable live refresh',
+    paused: 'paused',
+    refreshing: 'Refreshing…',
+    failed: 'Refresh failed',
+    turnOff: 'Off',
+    custom: 'Custom',
+    customUnit: 'min · Enter',
+    customInvalid: 'One decimal, 0.1–99.9 min',
+    justNow: 'just now',
+    secondsAgo: (n: number) => `${n}s ago`,
+    minutesAgo: (n: number) => `${n}m ago`,
+    everySeconds: (n: number) => `Every ${n}s`,
+    everyMinutes: (n: number) => `Every ${n} min`,
+  },
+}
+
+export type UiMessages = typeof en