@genispace/geniapp 0.2.0 → 0.4.0

package/dist/components/internal/workbench/mobile/utils/mobileComponentProps.d.ts

@@ -0,0 +1,44 @@
+import { TableColumnType } from '../../types/renderers';
+
+export declare const MOBILE_ADAPTED_COMPONENT_TYPES: Set<string>;
+export declare function isMobileWorkbenchViewport(): boolean;
+export declare function isMobileAdaptedComponentType(type: string): boolean;
+export declare function mapTableColumnsForMobile(columns?: TableColumnType[]): {
+    key: string;
+    title: string;
+}[];
+export declare function mapChartRowsForMobile(rows?: Record<string, unknown>[], xField?: string, yField?: string): {
+    label: string;
+    value: number;
+}[];
+export type MobileChartDisplayType = 'line' | 'bar' | 'pie';
+export interface MobileEChartsChartData {
+    title?: string;
+    displayType: MobileChartDisplayType;
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    gaugeValue?: number;
+}
+export declare function mapEChartsRowsForMobile(rows?: Record<string, unknown>[], options?: {
+    chartType?: string;
+    nameField?: string;
+    valueField?: string;
+    categoryField?: string;
+    multiLineValueFields?: string[];
+    gaugeValue?: number;
+    title?: string;
+}): MobileEChartsChartData;
+export interface MobileStatisticItem {
+    title: string;
+    value: string | number;
+    trend?: number;
+    trendLabel?: string;
+}
+export declare function mapStatisticItemsForMobile(items?: Array<Record<string, unknown>>): MobileStatisticItem[];
+export declare function sortGrid24ComponentsForMobileFlow<T extends {
+    id?: string;
+    rowStart?: number;
+    colStart?: number;
+}>(components: T[], mobileOrder?: string[]): T[];

package/dist/components/internal/workbench/mobile/utils/mobileFormDisplayUtils.d.ts

@@ -0,0 +1,4 @@
+import { FormField } from '../../types';
+
+export declare function formatMobileFormDisplayValue(field: FormField, value: unknown): string;
+export declare function getVisibleMobileFormFields(fields?: FormField[]): FormField[];

package/dist/components/internal/workbench/mobile/utils/mobileNavigationStore.d.ts

@@ -0,0 +1,35 @@
+export interface MobileNavEntry {
+    pathname: string;
+    search: string;
+}
+export declare function isMobileWorkbenchPath(pathname: string): boolean;
+export declare function subscribeMobileNavigation(listener: () => void): () => void;
+export declare function subscribeMobileTabTransition(listener: () => void): () => void;
+export declare function getMobileTabTransitionDirection(): -1 | 0 | 1;
+export declare function setMobileTabTransitionDirection(direction: -1 | 0 | 1): void;
+export declare function resetMobileTabTransitionDirection(): void;
+export declare function getMobileNavigationCanGoBack(): boolean;
+export declare function resetMobileNavigationStack(): void;
+export declare function pushMobileNavigationEntry(location: {
+    pathname: string;
+    search: string;
+}): void;
+export declare function popMobileNavigationEntry(): MobileNavEntry | undefined;
+export declare function formatMobileNavEntry(entry: MobileNavEntry): string;
+export declare function shouldPushMobileNavigation(location: {
+    pathname: string;
+    search: string;
+}, targetPath: string): boolean;
+/** Record current page and navigate — used for in-app page jumps on mobile. */
+export declare function mobilePushNavigate(navigate: (to: string, options?: {
+    replace?: boolean;
+}) => void, location: {
+    pathname: string;
+    search: string;
+}, to: string, options?: {
+    replace?: boolean;
+}): void;
+/** Bottom tab navigation — clears stack and opens a root tab page. */
+export declare function mobileNavigateFromBottomTab(navigate: (to: string, options?: {
+    replace?: boolean;
+}) => void, to: string): void;

package/dist/components/internal/workbench/mobile/utils/mobileToolbarNav.d.ts

@@ -0,0 +1,13 @@
+import { NavigationItem } from '../../types';
+import { VisibleWhenContext } from '../../utils/visibleWhen';
+import { MobileBottomNavTab } from './mobileBottomNav';
+
+export type MobileToolbarNavItem = MobileBottomNavTab;
+/**
+ * Top-level navigation items flagged `mobileToolbar: true`, rendered as entries in the
+ * mobile top toolbar ("..." panel). The device gate is intentionally NOT applied here —
+ * these items typically carry `visibility.devices: ['desktop']` precisely so they stay
+ * out of the mobile bottom nav while remaining reachable from the toolbar. Member and
+ * visibleWhen gates still apply.
+ */
+export declare function resolveMobileToolbarNavItems(items: NavigationItem[] | undefined | null, currentMemberId?: string | null, language?: string, visibleWhenContext?: VisibleWhenContext): MobileToolbarNavItem[];

package/dist/components/internal/workbench/mobile/utils/mobileUA.d.ts

@@ -0,0 +1 @@
+export declare function isMobileUserAgent(userAgent?: string): boolean;

package/dist/components/internal/workbench/mobile/utils/mobileWorkbenchSpaceSync.d.ts

@@ -0,0 +1,60 @@
+import { SpaceModel } from '../../../shared-ui/index.ts';
+
+export type MobileWorkbenchSpaceSyncResult = {
+    action: 'proceed';
+} | {
+    action: 'pending';
+} | {
+    action: 'switch';
+    targetSpaceId: string;
+} | {
+    action: 'denied';
+};
+export interface MobileWorkbenchSpaceSyncInput {
+    workbenchSpaceId: string;
+    serverSpaceId?: string | null;
+    currentSpaceId?: string | null;
+    persistedSpaceId?: string | null;
+    userSpaceIds: string[];
+    isDemoWorkbench: boolean;
+    alreadyAttemptedSwitch: boolean;
+    /** When false, mismatched space may still be valid once the list loads. */
+    spacesReady?: boolean;
+}
+export type AlignMobileWorkbenchSpaceResult = {
+    status: 'aligned';
+} | {
+    status: 'pending';
+} | {
+    status: 'switched';
+} | {
+    status: 'denied';
+} | {
+    status: 'switch_failed';
+};
+export interface AlignMobileWorkbenchSpaceParams {
+    workbenchId: string;
+    workbenchSpaceId: string;
+    currentSpaceId: string | null | undefined;
+    spaces: SpaceModel[];
+    spacesReady?: boolean;
+    isDemoWorkbench: boolean;
+    switchSpace: (space: SpaceModel, options?: {
+        skipNavigation?: boolean;
+    }) => Promise<void>;
+    fetchUserCurrentSpaceId?: () => Promise<string | null>;
+}
+/** Server settings first, then cookie, then React context. */
+export declare function resolveEffectiveCurrentSpaceId(input: {
+    serverSpaceId?: string | null;
+    persistedSpaceId?: string | null;
+    currentSpaceId?: string | null;
+}): string | null | undefined;
+export declare function markMobileWorkbenchSpaceSyncAttempted(workbenchId: string): void;
+export declare function hasMobileWorkbenchSpaceSyncAttempted(workbenchId: string): boolean;
+export declare function clearMobileWorkbenchSpaceSyncAttempts(workbenchId?: string): void;
+/**
+ * Decide whether mobile workbench entry should proceed, switch space, or deny access.
+ */
+export declare function resolveMobileWorkbenchSpaceSync(input: MobileWorkbenchSpaceSyncInput): MobileWorkbenchSpaceSyncResult;
+export declare function alignMobileWorkbenchSpace(params: AlignMobileWorkbenchSpaceParams): Promise<AlignMobileWorkbenchSpaceResult>;

package/dist/components/internal/workbench/mobile/utils/wecomDetector.d.ts

@@ -0,0 +1,9 @@
+declare global {
+    interface Window {
+        __WECOM_DEVICE__?: string;
+        WxWork?: {
+            jsENV?: unknown;
+        };
+    }
+}
+export declare function isWeComEnvironment(): boolean;

package/dist/components/internal/workbench/mobile/utils/workbenchSpaceSyncGate.d.ts

@@ -0,0 +1,7 @@
+/** Block datasource auto-fetch while mobile workbench space is being aligned. */
+export declare function beginWorkbenchSpaceSync(reason: string): void;
+export declare function endWorkbenchSpaceSync(reason: string): void;
+export declare function releaseWorkbenchSpaceSyncForMobileContent(): void;
+export declare function isWorkbenchSpaceSyncPending(): boolean;
+export declare function resetWorkbenchSpaceSyncGate(): void;
+export declare function subscribeWorkbenchSpaceSyncGate(listener: () => void): () => void;

package/dist/components/internal/workbench/mocks/index.d.ts

@@ -0,0 +1,13 @@
+export * from './templateRegistry';
+export * from './types';
+export interface MockDataRegistry {
+    [key: string]: any;
+}
+export declare const mockRegistry: MockDataRegistry;
+export declare function getMockData(workbenchId: string): any | null;
+export declare function isDemoWorkbench(workbenchId: string | undefined): boolean;
+export declare function getAvailableDemos(): Array<{
+    id: string;
+    name: string;
+    url: string;
+}>;

package/dist/components/internal/workbench/mocks/templateRegistry.d.ts

@@ -0,0 +1,16 @@
+import { getAllCategories, clearTemplateCache, setDefaultTemplateLanguage, TemplateCategory } from '../../workbench-templates/index.ts';
+
+export * from '../../workbench-templates/index.ts';
+export declare function getAllTemplates(): import('../../workbench-templates/index.ts').Template[];
+export declare function getTemplatesByCategory(category: TemplateCategory): import('../../workbench-templates/index.ts').Template[];
+export declare function getTemplateById(id: string): import('../../workbench-templates/index.ts').Template;
+export declare function searchTemplates(keyword: string): import('../../workbench-templates/index.ts').Template[];
+export declare function createWorkbenchConfigFromTemplate(templateId: string, customName?: string): {
+    name: string;
+    description: string;
+    config: {
+        appConfig: any;
+        pages: Record<string, any>;
+    };
+};
+export { getAllCategories, clearTemplateCache, setDefaultTemplateLanguage };

package/dist/components/internal/workbench/mocks/types.d.ts

@@ -0,0 +1 @@
+export * from '../../workbench-templates/index.ts';

package/dist/components/internal/workbench/styles/grid24.css

@@ -0,0 +1,359 @@
+.grid-24 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.grid-24-fill {
+  height: 100%;
+  flex: 1;
+}
+
+.grid-24-fill .grid-24-inner {
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+
+.grid-24-fill .grid-24-cell > * {
+  height: 100%;
+  min-height: 0;
+}
+
+.grid-24-fill .grid-24-cell--fit-content {
+  height: auto;
+  min-height: 0;
+  overflow: visible;
+  align-self: stretch;
+}
+
+.grid-24-fill .grid-24-cell--fit-content > * {
+  height: auto;
+  min-height: 0;
+}
+
+/* StatisticGroup in fullscreen: single-row groups use auto row height; scale inner content with viewport */
+.statistic-group--fullscreen {
+  gap: clamp(0.375rem, 0.8vh, 1rem);
+}
+
+.statistic-group--fullscreen .statistic-card {
+  min-height: 0;
+}
+
+.statistic-group--fullscreen .statistic-content {
+  padding: clamp(0.5rem, 1.1vh, 1.5rem) clamp(0.625rem, 1.2vh, 1rem);
+}
+
+.statistic-group--fullscreen .statistic-title {
+  font-size: clamp(0.6875rem, 1.35vh, 0.875rem);
+  line-height: 1.25;
+}
+
+.statistic-group--fullscreen .statistic-value {
+  font-size: clamp(1rem, 3vh, 1.875rem);
+  line-height: 1.1;
+}
+
+.statistic-group--fullscreen .statistic-icon {
+  padding: clamp(0.375rem, 0.75vh, 0.75rem);
+}
+
+.statistic-group--fullscreen .statistic-icon svg {
+  width: clamp(1rem, 2.2vh, 1.5rem);
+  height: clamp(1rem, 2.2vh, 1.5rem);
+}
+
+.grid-24-inner {
+  display: grid;
+  width: 100%;
+  min-height: 0;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+}
+
+.grid-24-cell {
+  min-width: 0;
+  min-height: 0;
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s;
+}
+
+@media (min-width: 640px) {
+  .grid-24-cell:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  }
+}
+
+@media (max-width: 639px) {
+  .grid-24-inner {
+    grid-template-columns: 1fr !important;
+  }
+
+  .grid-24-cell {
+    grid-column: 1 / -1 !important;
+    grid-row: auto !important;
+  }
+}
+
+.grid-24-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: hsl(var(--muted) / 0.45);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.dark .grid-24-editor {
+  background: hsl(var(--muted) / 0.35);
+}
+
+.grid-24-editor-canvas {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: hsl(var(--card));
+  border: 1px dashed hsl(var(--border));
+  border-radius: 0.5rem;
+  padding: 1rem;
+  min-height: 300px;
+  overflow: auto;
+}
+
+.dark .grid-24-editor-canvas {
+  background: hsl(var(--card));
+  border-color: hsl(var(--border));
+}
+
+.grid-24-editor-grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  position: relative;
+  background-image: linear-gradient(to right, hsl(var(--border) / 0.65) 1px, transparent 1px);
+  background-size: calc(100% / 24) 100%;
+}
+
+.dark .grid-24-editor-grid {
+  background-image: linear-gradient(to right, hsl(var(--border) / 0.85) 1px, transparent 1px);
+}
+
+.grid-24-editor-component {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: calc(var(--radius) - 2px);
+  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.06);
+  cursor: grab;
+  font-weight: 500;
+  font-size: 0.875rem;
+  min-height: 48px;
+  padding: 0.5rem;
+  text-align: center;
+  word-break: break-word;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.grid-24-editor-component:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+  border-color: hsl(var(--border));
+  box-shadow:
+    0 1px 2px hsl(var(--foreground) / 0.06),
+    0 4px 14px hsl(var(--foreground) / 0.08);
+}
+
+.dark .grid-24-editor-component:hover {
+  box-shadow:
+    0 1px 2px hsl(0 0% 0% / 0.35),
+    0 6px 18px hsl(0 0% 0% / 0.45);
+}
+
+.grid-24-editor-component.dragging {
+  opacity: 0.55;
+  cursor: grabbing;
+}
+
+.grid-24-editor-component.selected {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+  border-color: hsl(var(--primary));
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+
+.grid-24-editor-component.overlap-warning {
+  background: hsl(var(--destructive) / 0.14);
+  color: hsl(var(--destructive));
+  border-color: hsl(var(--destructive) / 0.55);
+}
+
+.dark .grid-24-editor-component.overlap-warning {
+  background: hsl(var(--destructive) / 0.22);
+  color: hsl(var(--destructive));
+  border-color: hsl(var(--destructive) / 0.65);
+}
+
+.grid-24-overlap-warning {
+  padding: 0.5rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #ef4444;
+  border-radius: 0.375rem;
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+.dark .grid-24-overlap-warning {
+  background: rgb(127 29 29 / 0.25);
+  color: #fecaca;
+  border-color: rgb(127 29 29);
+}
+
+.grid-24-property-panel {
+  position: fixed;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 280px;
+  max-height: 90vh;
+  overflow: auto;
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  box-shadow:
+    0 4px 20px hsl(var(--foreground) / 0.08),
+    0 0 0 1px hsl(var(--border) / 0.4);
+  padding: 1rem;
+  z-index: 100;
+}
+
+.dark .grid-24-property-panel {
+  box-shadow:
+    0 8px 28px hsl(0 0% 0% / 0.55),
+    0 0 0 1px hsl(var(--border) / 0.5);
+}
+
+.grid-24-property-panel-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.dark .grid-24-property-panel-title {
+  border-color: hsl(var(--border));
+}
+
+.grid-24-property-field {
+  margin-bottom: 0.75rem;
+}
+
+.grid-24-property-field label {
+  display: block;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 0.25rem;
+}
+
+.grid-24-property-field input {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid hsl(var(--input));
+  border-radius: calc(var(--radius) - 4px);
+  font-size: 0.875rem;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.dark .grid-24-property-field input {
+  background: hsl(var(--background));
+  border-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+}
+
+.grid-24-property-field input:focus {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
+}
+
+.grid-24-nesting-warning {
+  padding: 0.75rem 1rem;
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 0.375rem;
+  color: #92400e;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+.dark .grid-24-nesting-warning {
+  background: rgb(113 63 18 / 0.25);
+  color: #fcd34d;
+  border-color: rgb(180 83 9);
+}
+
+.grid-24-cell-droppable {
+  border: 1px dashed transparent;
+  border-radius: 4px;
+  min-height: 8px;
+}
+
+.grid-24-cell-droppable.is-over {
+  border-color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.1);
+}
+
+/* Sizing capability model: fill-mode cells render at EXACTLY the edited band
+   height (inline px from Grid24Renderer) and stretch the component into it —
+   the component's flex chain provides internal scrolling. */
+.grid-24-cell--fill {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.grid-24-cell--fill > * {
+  flex: 1 1 0%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* StatisticGroup cards must consume the fill band — otherwise content-sized
+   cards leave a transparent strip under the row inside a taller cell. */
+.grid-24-cell--fill .statistic-group {
+  flex: 1 1 0%;
+  height: 100%;
+  min-height: 0;
+  align-content: stretch;
+  align-items: stretch;
+  grid-auto-rows: minmax(0, 1fr);
+}
+.grid-24-cell--fill .statistic-group > .statistic-card {
+  height: 100%;
+  min-height: 0;
+  align-self: stretch;
+}
+
+/* Narrow-desktop stacked fallback (<640px media query stacks cells): the
+   desktop band height must yield — inline px would clip stacked content. */
+@media (max-width: 639px) {
+  .grid-24-cell--fill {
+    height: auto !important;
+    overflow: visible;
+  }
+}