@hcgstudio/ogma 0.0.0

package/src/viewer/client.tsx

@@ -0,0 +1,18 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { runtimeConfig } from 'virtual:ogma-config';
+import { review } from 'virtual:ogma-design';
+import { OgmaReviewApp } from './OgmaReviewApp.js';
+import './styles.css';
+
+const root = document.getElementById('ogma-root');
+
+if (!root) {
+  throw new Error('Ogma could not find #ogma-root.');
+}
+
+createRoot(root).render(
+  <StrictMode>
+    <OgmaReviewApp config={runtimeConfig} review={review} />
+  </StrictMode>
+);

package/src/viewer/defaultReview.tsx

@@ -0,0 +1,168 @@
+import type { OgmaReviewDefinition, OgmaPrototypeScreenProps } from '../types.js';
+
+function DashboardScreen() {
+  return (
+    <div className="ogma-demo-screen">
+      <aside className="ogma-demo-sidebar">
+        <div className="ogma-demo-brand">O</div>
+        <span className="ogma-demo-nav is-active">Overview</span>
+        <span className="ogma-demo-nav">Signals</span>
+        <span className="ogma-demo-nav">Queue</span>
+        <span className="ogma-demo-nav">Settings</span>
+      </aside>
+      <main className="ogma-demo-content">
+        <div className="ogma-demo-header">
+          <div>
+            <p>Dashboard</p>
+            <h2>Atlas Brief</h2>
+          </div>
+          <button type="button">Review ready</button>
+        </div>
+        <div className="ogma-demo-grid">
+          <section className="ogma-demo-card is-wide">
+            <div className="ogma-demo-card-title" />
+            <div className="ogma-demo-chart">
+              {[42, 68, 53, 81, 61, 75, 88].map((value) => (
+                <span key={value} style={{ height: `${value}%` }} />
+              ))}
+            </div>
+          </section>
+          <section className="ogma-demo-card is-accent">
+            <strong>91%</strong>
+            <p>Review confidence</p>
+          </section>
+          <section className="ogma-demo-card">
+            <div className="ogma-demo-list-row" />
+            <div className="ogma-demo-list-row is-medium" />
+            <div className="ogma-demo-list-row is-short" />
+          </section>
+          <section className="ogma-demo-card is-action">
+            <strong>2</strong>
+            <p>Copy edits before approval</p>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function DesignSpecScreen() {
+  return (
+    <div className="ogma-spec-screen">
+      <header>
+        <p>Design spec</p>
+        <h2>Decision System</h2>
+      </header>
+      <div className="ogma-spec-grid">
+        {['Information density', 'Review confidence', 'Agent handoff', 'Mobile parity'].map(
+          (item, index) => (
+            <section key={item}>
+              <span>{`0${index + 1}`}</span>
+              <h3>{item}</h3>
+              <p>Prototype state prepared for pinned reviewer feedback and agent follow-up.</p>
+            </section>
+          )
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CheckoutFlowScreen() {
+  return (
+    <div className="ogma-flow-screen">
+      <header>
+        <p>Checkout flow</p>
+        <h2>Approve Plan</h2>
+      </header>
+      <div className="ogma-flow-columns">
+        {['Cart', 'Review', 'Confirm'].map((step, index) => (
+          <section key={step}>
+            <span>{index + 1}</span>
+            <h3>{step}</h3>
+            <div className="ogma-flow-line" />
+            <button type="button">{index === 2 ? 'Approve' : 'Continue'}</button>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MobileNavigationScreen() {
+  return (
+    <div className="ogma-mobile-screen">
+      <div className="ogma-phone">
+        <header>
+          <span>Ogma</span>
+          <button type="button">New</button>
+        </header>
+        <main>
+          <section>
+            <p>Mobile nav</p>
+            <h2>Design queue</h2>
+          </section>
+          <div className="ogma-phone-list">
+            <span />
+            <span />
+            <span />
+          </div>
+        </main>
+        <nav>
+          <span className="is-active" />
+          <span />
+          <span />
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+export function createDefaultOgmaReview(): OgmaReviewDefinition {
+  return {
+    title: 'Ogma starter review',
+    description: 'A local starter review used until an agent writes project-specific JSX screens.',
+    notes:
+      'Use this starter review to confirm Ogma is running, then replace it with product-specific JSX screens and product notes in designs/ogma.',
+    metadata: {
+      source: 'ogma-default',
+      updatedAt: new Date().toISOString()
+    },
+    screens: [
+      {
+        id: 'dashboard',
+        title: 'Dashboard',
+        description: 'Main review workspace for desktop inspection.',
+        component: DashboardScreen
+      },
+      {
+        id: 'design-spec',
+        title: 'Design spec',
+        description: 'Product decisions and design rationale.',
+        component: DesignSpecScreen
+      },
+      {
+        id: 'checkout-flow',
+        title: 'Checkout flow',
+        description: 'Interaction state for a step-based product path.',
+        component: CheckoutFlowScreen
+      },
+      {
+        id: 'mobile-navigation',
+        title: 'Mobile nav',
+        description: 'Compact viewport state for mobile review.',
+        component: MobileNavigationScreen,
+        width: 390
+      }
+    ]
+  };
+}
+
+export function MissingScreen({ screen }: OgmaPrototypeScreenProps) {
+  return (
+    <div className="ogma-empty-screen">
+      <h2>{screen.title}</h2>
+      <p>This screen is missing a React component export.</p>
+    </div>
+  );
+}

package/src/viewer/normalizeReviewModule.ts

@@ -0,0 +1,87 @@
+import type { ComponentType } from 'react';
+import type { OgmaPrototypeScreen, OgmaPrototypeScreenProps, OgmaReviewDefinition } from '../types.js';
+import { createDefaultOgmaReview, MissingScreen } from './defaultReview.js';
+
+interface ReviewModuleShape {
+  default?: unknown;
+  review?: unknown;
+  ogmaReview?: unknown;
+  screens?: unknown;
+  title?: unknown;
+  description?: unknown;
+  notes?: unknown;
+  metadata?: unknown;
+}
+
+function slugify(value: string, fallback: string) {
+  const slug = value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  return slug || fallback;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function normalizeScreen(value: unknown, index: number): OgmaPrototypeScreen | null {
+  if (!isObject(value)) {
+    return null;
+  }
+
+  const title = typeof value.title === 'string' ? value.title : `Screen ${index + 1}`;
+  const component = (
+    typeof value.component === 'function'
+      ? (value.component as ComponentType)
+      : typeof value.Component === 'function'
+        ? (value.Component as ComponentType)
+        : MissingScreen
+  ) as ComponentType<OgmaPrototypeScreenProps>;
+
+  return {
+    id: typeof value.id === 'string' ? slugify(value.id, `screen-${index + 1}`) : slugify(title, `screen-${index + 1}`),
+    title,
+    description: typeof value.description === 'string' ? value.description : undefined,
+    width: typeof value.width === 'number' ? value.width : undefined,
+    height: typeof value.height === 'number' ? value.height : undefined,
+    component
+  };
+}
+
+function pickReviewCandidate(moduleValue: ReviewModuleShape) {
+  return moduleValue.default ?? moduleValue.review ?? moduleValue.ogmaReview ?? moduleValue;
+}
+
+export function normalizeReviewModule(moduleValue: unknown, productNotes = ''): OgmaReviewDefinition {
+  const fallback = createDefaultOgmaReview();
+
+  if (!isObject(moduleValue)) {
+    return { ...fallback, notes: productNotes || fallback.notes };
+  }
+
+  const candidate = pickReviewCandidate(moduleValue);
+
+  if (!isObject(candidate) || !Array.isArray(candidate.screens)) {
+    return { ...fallback, notes: productNotes || fallback.notes };
+  }
+
+  const screens = candidate.screens
+    .map((screen, index) => normalizeScreen(screen, index))
+    .filter((screen): screen is OgmaPrototypeScreen => screen !== null);
+
+  if (screens.length === 0) {
+    return { ...fallback, notes: productNotes || fallback.notes };
+  }
+
+  return {
+    title: typeof candidate.title === 'string' ? candidate.title : fallback.title,
+    description:
+      typeof candidate.description === 'string' ? candidate.description : fallback.description,
+    screens,
+    notes: productNotes || (typeof candidate.notes === 'string' ? candidate.notes : fallback.notes),
+    metadata: isObject(candidate.metadata) ? candidate.metadata : fallback.metadata
+  };
+}