@almadar/orb-shell-typescript-linux-x64 18.0.0 → 19.1.0

package/templates/almadar-renderers-typescript/src/components/core/molecules/CommitRow.tsx

@@ -0,0 +1,138 @@
+'use client';
+/**
+ * CommitRow Molecule
+ *
+ * One entry of a version history: message, short sha, author, time, what
+ * made it (a user save, an agent turn, a restore, an undo) and line stats.
+ * Selecting the row and restoring to it are separate controls.
+ */
+import React, { useCallback } from 'react';
+import type { EventEmit, A11yProps } from '@almadar/core';
+import { cn } from '../../../core';
+import { useEventBus } from '../../../core';
+import { useTranslate } from '../../../core';
+import { Box } from '../../../core';
+import { Button } from '../../../core';
+import { Badge } from '../../../core';
+import { Icon } from '../../../core';
+import { Typography } from '../../../core';
+import { VStack, HStack } from '../../../core';
+
+import { domPassthrough } from '../../../core';
+export type CommitKind = 'user' | 'agent' | 'restore' | 'undo' | 'redo' | 'snapshot' | 'merge';
+
+const KIND_ICONS: Record<CommitKind, string> = {
+  user: 'user',
+  agent: 'sparkles',
+  restore: 'rotate-ccw',
+  undo: 'undo-2',
+  redo: 'redo-2',
+  snapshot: 'camera',
+  merge: 'git-merge',
+};
+
+/**
+ * One version in a history list — a commit row with select and restore.
+ *
+ * @capabilities version history row, commit entry, revision list item, change log entry, restore point, undo history item
+ */
+export interface CommitRowProps extends A11yProps {
+  /** Commit id; the first 7 characters are shown, the whole id on hover. */
+  sha: string;
+  /** Commit message. */
+  message: string;
+  author?: string;
+  /** Display time (already formatted, e.g. "2 min ago"). */
+  timestamp?: string;
+  /** What made this version (a user save, an agent turn, a restore, an undo/redo, a snapshot, a merge of a teammate's work). */
+  kind?: CommitKind;
+  additions?: number;
+  deletions?: number;
+  /** The row the user picked (shows its detail). */
+  selected?: boolean;
+  /** The version the app is at now — it cannot be restored to. */
+  current?: boolean;
+  /** Emitted when the row is picked. Payload: { sha }. */
+  selectEvent?: EventEmit<{ sha: string }>;
+  /** Emitted by the Restore button. Payload: { sha }. */
+  restoreEvent?: EventEmit<{ sha: string }>;
+  className?: string;
+}
+
+export const CommitRow: React.FC<CommitRowProps> = ({
+  sha,
+  message,
+  author,
+  timestamp,
+  kind,
+  additions,
+  deletions,
+  selected = false,
+  current = false,
+  selectEvent,
+  restoreEvent,
+  className,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const eventBus = useEventBus();
+  const shortSha = sha.length > 7 ? sha.substring(0, 7) : sha;
+
+  const select = useCallback(() => {
+    if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { sha });
+  }, [eventBus, selectEvent, sha]);
+
+  return (
+    <HStack {...domPassthrough(rest)} gap="sm" align="start" className={cn('rounded-interactive px-2 py-1.5', selected ? 'bg-muted' : 'hover:bg-muted', className)}>
+      <Box
+        role="button"
+        tabIndex={0}
+        aria-pressed={selected}
+        data-testid="commit-row"
+        className="flex-1 min-w-0 cursor-pointer"
+        onClick={select}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            select();
+          }
+        }}
+      >
+        <VStack gap="none" className="min-w-0">
+          <HStack gap="xs" align="center" className="min-w-0">
+            {kind && (
+              <Box data-testid="commit-row-kind" data-kind={kind} className="flex-shrink-0" title={t(`commitRow.kind.${kind}`)}>
+                <Icon name={KIND_ICONS[kind]} size="xs" className="text-muted-foreground" />
+              </Box>
+            )}
+            <Typography variant="caption" className="truncate">{message}</Typography>
+          </HStack>
+          <HStack gap="xs" align="center" className="flex-wrap">
+            <Box as="span" title={sha}>
+              <Typography variant="caption" color="muted" className="font-mono text-[0.65rem]">{shortSha}</Typography>
+            </Box>
+            {author && <Typography variant="caption" color="muted">{author}</Typography>}
+            {timestamp && <Typography variant="caption" color="muted">{timestamp}</Typography>}
+            {additions !== undefined && <Badge variant="success" size="sm">+{additions}</Badge>}
+            {deletions !== undefined && <Badge variant="error" size="sm">-{deletions}</Badge>}
+            {current && (
+              <Badge variant="default" size="sm" data-testid="commit-row-current">{t('commitRow.current')}</Badge>
+            )}
+          </HStack>
+        </VStack>
+      </Box>
+      {restoreEvent && !current && (
+        <Button
+          variant="ghost"
+          size="sm"
+          icon="rotate-ccw"
+          onClick={() => eventBus.emit(`UI:${restoreEvent}`, { sha })}
+        >
+          {t('commitRow.restore')}
+        </Button>
+      )}
+    </HStack>
+  );
+};
+
+CommitRow.displayName = 'CommitRow';

package/templates/almadar-renderers-typescript/src/components/core/molecules/ConfirmDialog.tsx

@@ -0,0 +1,190 @@
+'use client';
+/**
+ * ConfirmDialog Component
+ *
+ * Confirmation dialog for destructive or important actions.
+ * Composes Modal molecule with Button atoms.
+ *
+ * Uses wireframe theme styling (high contrast, sharp edges).
+ */
+import type { A11yProps } from '@almadar/core';
+import React from "react";
+import { AlertTriangle, Trash2, Check } from "lucide-react";
+import { Modal, type ModalSize } from "./Modal";
+import { Button } from '../../../core';
+import { Icon } from '../../../core';
+import { Typography } from '../../../core';
+import { Box } from '../../../core';
+import { HStack } from '../../../core';
+import { cn } from '../../../core';
+import { useTranslate } from '../../../core';
+import type { UiError } from '../../../core';
+
+import { domPassthrough } from '../../../core';
+export type ConfirmDialogVariant = "danger" | "warning" | "info" | "default";
+
+export interface ConfirmDialogProps extends A11yProps {
+  /** Whether the dialog is open (defaults to true when rendered by slot wrapper) */
+  isOpen?: boolean;
+  /** Callback when dialog is closed (injected by slot wrapper) */
+  onClose?: () => void;
+  /**
+   * Fires after the exit animation completes (the dialog is about to unmount).
+   * @notification
+   */
+  onExited?: () => void;
+  /** Callback when action is confirmed (injected by slot wrapper) */
+  onConfirm?: () => void;
+  /** Dialog title */
+  title: string;
+  /** Dialog message/description */
+  message?: string | React.ReactNode;
+  /** Alias for message (schema compatibility) */
+  description?: string | React.ReactNode;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Alias for confirmText (schema compatibility) */
+  confirmLabel?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Alias for cancelText (schema compatibility) */
+  cancelLabel?: string;
+  /** Dialog variant */
+  variant?: ConfirmDialogVariant;
+  /** Dialog size */
+  size?: ModalSize;
+  /** Loading state for confirm button */
+  isLoading?: boolean;
+  /** Error state */
+  error?: UiError | null;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const variantConfig = {
+  danger: {
+    icon: Trash2,
+    iconBg: "bg-error",
+    iconColor: "text-error-foreground",
+    confirmVariant: "danger" as const,
+  },
+  warning: {
+    icon: AlertTriangle,
+    iconBg: "bg-warning",
+    iconColor: "text-warning-foreground",
+    confirmVariant: "warning" as const,
+  },
+  info: {
+    icon: Check,
+    iconBg: "bg-info",
+    iconColor: "text-info-foreground",
+    confirmVariant: "primary" as const,
+  },
+  default: {
+    icon: Check,
+    iconBg: "bg-primary",
+    iconColor: "text-primary-foreground",
+    confirmVariant: "primary" as const,
+  },
+};
+
+/**
+ * ConfirmDialog - Confirmation dialog for important actions
+ */
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen = true,
+  onClose = () => {},
+  onExited,
+  onConfirm = () => {},
+  title,
+  message,
+  description,
+  confirmText,
+  confirmLabel,
+  cancelText,
+  cancelLabel,
+  variant = "danger",
+  size = "sm",
+  isLoading = false,
+  error,
+  className,
+  ...rest
+}) => {
+  const config = variantConfig[variant];
+  const { t } = useTranslate();
+
+  // Resolve aliases
+  const resolvedMessage = message ?? description ?? "";
+  const resolvedConfirmText = confirmText ?? confirmLabel ?? t('dialog.confirm');
+  const resolvedCancelText = cancelText ?? cancelLabel ?? t('dialog.cancel');
+
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  return (
+    <Modal
+      {...domPassthrough(rest)}
+      isOpen={isOpen}
+      onExited={onExited}
+      onClose={onClose}
+      size={size}
+      showCloseButton={false}
+      closeOnOverlayClick={!isLoading}
+      closeOnEscape={!isLoading}
+      className={className}
+      footer={
+        <HStack className="justify-end gap-3">
+          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+            {resolvedCancelText}
+          </Button>
+          <Button
+            variant={config.confirmVariant}
+            onClick={handleConfirm}
+            isLoading={isLoading}
+          >
+            {isLoading ? t('common.loading') : resolvedConfirmText}
+          </Button>
+        </HStack>
+      }
+    >
+      <HStack className="gap-4">
+        {/* Icon */}
+        <Box
+          className={cn(
+            "flex-shrink-0 w-12 h-12 flex items-center justify-center",
+            config.iconBg,
+          )}
+        >
+          <Icon icon={config.icon} size="lg" className={config.iconColor} />
+        </Box>
+
+        {/* Content */}
+        <Box className="flex-1">
+          <Typography variant="h5" className="mb-2">
+            {title}
+          </Typography>
+          {typeof resolvedMessage === "string" ? (
+            <Typography
+              variant="body2"
+              className="text-muted-foreground"
+            >
+              {resolvedMessage}
+            </Typography>
+          ) : (
+            resolvedMessage
+          )}
+          {error && (
+            <Typography variant="body2" color="error" role="alert" className="mt-2">
+              {error.message}
+            </Typography>
+          )}
+        </Box>
+      </HStack>
+    </Modal>
+  );
+};
+
+ConfirmDialog.displayName = "ConfirmDialog";
+
+export default ConfirmDialog;

package/templates/almadar-renderers-typescript/src/components/core/molecules/ConnectionBlock.tsx

@@ -0,0 +1,48 @@
+'use client';
+/**
+ * ConnectionBlock Molecule Component
+ *
+ * Surfaces prior-knowledge connections before new content.
+ * Renders arbitrary markdown via MarkdownContent.
+ *
+ * Event Contract:
+ * - No events emitted (display-only)
+ * - entityAware: false
+ */
+
+import type { A11yProps } from '@almadar/core';
+import React from 'react';
+import { Link2 } from 'lucide-react';
+import { MarkdownContent } from './markdown/MarkdownContent';
+import { cn } from '../../../core';
+import { Box } from '../../../core';
+import { HStack } from '../../../core';
+import { Typography } from '../../../core';
+import { useTranslate } from '../../../core';
+
+import { domPassthrough } from '../../../core';
+export interface ConnectionBlockProps extends A11yProps {
+  /** Markdown content summarising what the learner already knows */
+  content: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ConnectionBlock: React.FC<ConnectionBlockProps> = ({ content, className, ...rest }) => {
+  const { t } = useTranslate();
+  return (
+    <Box {...domPassthrough(rest)} className={cn('bg-success/10 border-s-heavy border-success rounded-e-container p-5 mb-6', className)}>
+      <HStack gap="sm" align="start">
+        <Link2 className="text-success flex-shrink-0 mt-1" size={20} />
+        <Box className="flex-1">
+          <Typography variant="h6" as="h4" className="mb-2">
+            {t('connection.title')}
+          </Typography>
+          <MarkdownContent content={content} className="text-sm" />
+        </Box>
+      </HStack>
+    </Box>
+  );
+};
+
+ConnectionBlock.displayName = 'ConnectionBlock';

package/templates/almadar-renderers-typescript/src/components/core/molecules/Container.tsx

@@ -0,0 +1,86 @@
+/**
+ * Container — max-width centering wrapper (distinct from Box).
+ * Box controls padding/margin/bg/shadow on an arbitrary element.
+ * Container constrains page width and centers; use it at the layout level,
+ * not as a generic div replacement.
+ */
+import type { A11yProps } from '@almadar/core';
+import React from 'react';
+import { cn } from '../../../core';
+
+import { domPassthrough } from '../../../core';
+export type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ContainerProps extends A11yProps {
+  /** Maximum width */
+  size?: ContainerSize;
+  /** Alias for size (pattern compatibility) */
+  maxWidth?: ContainerSize;
+  /** Horizontal padding */
+  padding?: ContainerPadding;
+  /** Center horizontally */
+  center?: boolean;
+  /** Custom class name */
+  className?: string;
+  /** Children elements */
+  children?: React.ReactNode;
+  /** HTML element to render as */
+  as?: React.ElementType;
+}
+
+const sizeStyles: Record<ContainerSize, string> = {
+  xs: 'max-w-xs',        // 320px
+  sm: 'max-w-screen-sm', // 640px
+  md: 'max-w-screen-md', // 768px
+  lg: 'max-w-screen-lg', // 1024px
+  xl: 'max-w-screen-xl', // 1280px
+  '2xl': 'max-w-screen-2xl', // 1536px
+  full: 'max-w-full',
+};
+
+const paddingStyles: Record<ContainerPadding, string> = {
+  none: 'px-0',
+  // Mobile-tighter, desktop-identical: fixed px-6 on a 360px phone eats ~13% of
+  // the viewport, so each token steps down below the sm breakpoint.
+  sm: 'px-3 sm:px-4',
+  md: 'px-4 sm:px-6',
+  lg: 'px-4 sm:px-6 md:px-8',
+  xl: 'px-4 sm:px-8 md:px-12',
+};
+
+/**
+ * Container - Centers and constrains content width
+ */
+export const Container: React.FC<ContainerProps> = ({
+  size,
+  maxWidth,
+  padding = 'md',
+  center = true,
+  className,
+  children,
+  as: Component = 'div',
+  ...rest
+}) => {
+  // Use maxWidth if provided, otherwise fall back to size, then default to 'lg'
+  const resolvedSize = maxWidth ?? size ?? 'lg';
+  return React.createElement(
+    Component,
+    {
+      ...domPassthrough(rest),
+      className: cn(
+        'w-full',
+        sizeStyles[resolvedSize],
+        paddingStyles[padding],
+        center && 'mx-auto',
+        className
+      ),
+    },
+    children
+  );
+};
+
+Container.displayName = 'Container';
+
+export default Container;
+

package/templates/almadar-renderers-typescript/src/components/core/molecules/ContentRenderer.tsx

@@ -0,0 +1,133 @@
+/**
+ * ContentRenderer Organism
+ *
+ * Renders rich content as a sequence of typed segments: markdown, code,
+ * orbital diagrams (via JazariStateMachine), and quiz blocks. Accepts
+ * either raw content string (auto-parsed) or pre-parsed segments.
+ *
+ * Event Contract:
+ * - Delegates to child components (CodeBlock -> UI:COPY_CODE)
+ * - entityAware: false
+ */
+
+import React, { useMemo } from 'react';
+import { VStack } from '../../../core';
+import { MarkdownContent } from './markdown/MarkdownContent';
+import { CodeBlock, toCodeLanguage } from './markdown/CodeBlock';
+import { QuizBlock } from './QuizBlock';
+import { JazariStateMachine } from './JazariStateMachine';
+import {
+  parseContentSegments,
+  type ContentSegment,
+} from '../../../lib/parseContentSegments';
+import { useTranslate } from '../../../core';
+import { cn } from '../../../core';
+import type { DisplayStateProps } from '../organisms/types';
+import type { OrbitalSchema, StateMachine, Trait, A11yProps } from '@almadar/core';
+
+import { domPassthrough } from '../../../core';
+type OrbitalOrMachine = OrbitalSchema | StateMachine;
+
+export interface ContentRendererProps extends Omit<DisplayStateProps, keyof A11yProps>, A11yProps {
+  /** Raw content string — auto-parsed into segments */
+  content?: string;
+  /** Pre-parsed segments (overrides content) */
+  segments?: ContentSegment[];
+  /** Text direction for markdown */
+  direction?: 'rtl' | 'ltr';
+}
+
+export const ContentRenderer: React.FC<ContentRendererProps> = ({
+  content,
+  segments: segmentsProp,
+  direction,
+  className,
+  ...rest
+}) => {
+  const { t: _t } = useTranslate();
+
+  const segments = useMemo(
+    () => segmentsProp ?? parseContentSegments(content),
+    [segmentsProp, content],
+  );
+
+  if (segments.length === 0) return null;
+
+  return (
+    <VStack {...domPassthrough(rest)} gap="md" className={cn('w-full', className)}>
+      {segments.map((segment, i) => {
+        const key = `seg-${i}`;
+
+        switch (segment.type) {
+          case 'markdown':
+            return (
+              <MarkdownContent
+                key={key}
+                content={segment.content}
+                direction={direction}
+              />
+            );
+
+          case 'code':
+            return (
+              <CodeBlock
+                key={key}
+                code={segment.content}
+                language={toCodeLanguage(segment.language)}
+              />
+            );
+
+          case 'orbital': {
+            // Normalize both bare traits ({states, transitions}) and full
+            // schemas ({orbitals}) into a schema object so JazariStateMachine
+            // always receives the same prop shape (the `schema` prop path).
+            const parsed = segment.schema as OrbitalOrMachine;
+            const isFullSchema = (v: OrbitalOrMachine): v is OrbitalSchema =>
+              Array.isArray((v as OrbitalSchema).orbitals);
+            const inlineTrait: Trait = {
+              name: 'inline',
+              stateMachine: parsed as StateMachine,
+            };
+            const schema: OrbitalSchema = isFullSchema(parsed)
+              ? parsed
+              : {
+                  name: 'inline',
+                  orbitals: [{
+                    name: 'inline',
+                    entity: { name: 'inline', fields: [] },
+                    traits: [inlineTrait],
+                    pages: [],
+                  }],
+                };
+            return (
+              <VStack key={key} gap="sm">
+                <CodeBlock
+                  code={segment.content}
+                  language={toCodeLanguage(segment.language)}
+                />
+                <JazariStateMachine
+                  schema={schema}
+                  direction={direction}
+                />
+              </VStack>
+            );
+          }
+
+          case 'quiz':
+            return (
+              <QuizBlock
+                key={key}
+                question={segment.question}
+                answer={segment.answer}
+              />
+            );
+
+          default:
+            return null;
+        }
+      })}
+    </VStack>
+  );
+};
+
+ContentRenderer.displayName = 'ContentRenderer';