@ankhorage/zora 3.3.1 → 3.3.3

package/src/patterns/missing-element/MissingElement.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_BINDABLE_COMPONENT_META, ZORA_COMPONENT_META } from '../../metadata';
+import { missingElementMeta } from './meta';
+
+describe('MissingElement draft contract', () => {
+  test('is a release-blocking manifest leaf distinct from completed states', () => {
+    expect(ZORA_COMPONENT_META.MissingElement).toBe(missingElementMeta);
+    expect(missingElementMeta.directManifestNode).toBe(true);
+    expect(missingElementMeta.allowedChildren).toEqual([]);
+    expect(missingElementMeta.manifestPolicy).toEqual({
+      kind: 'unresolved-element',
+      availability: 'draft-only',
+      releaseGate: 'blocked',
+    });
+    expect(ZORA_COMPONENT_META.Notice.manifestPolicy).toBeUndefined();
+    expect(ZORA_COMPONENT_META.EmptyState.manifestPolicy).toBeUndefined();
+  });
+
+  test('captures only stable serializable gap and layout data', () => {
+    expect(Object.keys(missingElementMeta.props)).toEqual([
+      'requestedCapability',
+      'reason',
+      'evidenceId',
+      'minimumWidth',
+      'minimumHeight',
+    ]);
+    expect(missingElementMeta.blueprint.defaultProps).toEqual({
+      requestedCapability: 'Unresolved interface capability',
+      reason: 'No matching ZORA element is available.',
+      minimumWidth: 240,
+      minimumHeight: 160,
+    });
+    expect(() => JSON.stringify(missingElementMeta)).not.toThrow();
+  });
+
+  test('has no event, data-binding, runtime-requirement, or fallback contract', () => {
+    expect(missingElementMeta.events).toBeUndefined();
+    expect(missingElementMeta.requirements).toBeUndefined();
+    expect(ZORA_BINDABLE_COMPONENT_META).not.toHaveProperty('MissingElement');
+  });
+
+  test('visibly and accessibly identifies the gap while preserving its minimum dimensions', async () => {
+    const source = await Bun.file('src/patterns/missing-element/MissingElement.tsx').text();
+
+    expect(source).toContain('accessibilityLabel={accessibilityLabel}');
+    expect(source).toContain('accessibilityRole="text"');
+    expect(source).toContain('accessible');
+    expect(source).toContain('minHeight={minimumHeight}');
+    expect(source).toContain('minWidth={minimumWidth}');
+    expect(source).toContain('{requestedCapability}');
+    expect(source).toContain('{reason}');
+  });
+
+  test('accepts the canonical interaction policy without owning interactive behavior', async () => {
+    const [source, types] = await Promise.all([
+      Bun.file('src/patterns/missing-element/MissingElement.tsx').text(),
+      Bun.file('src/patterns/missing-element/types.ts').text(),
+    ]);
+
+    expect(types).toContain('MissingElementProps extends ZoraBaseProps');
+    expect(source).toContain('interactionPolicy: _interactionPolicy');
+    expect(source).not.toMatch(/onPress|onLongPress|onChange|onSubmit/);
+    expect(source).not.toMatch(/<Button|<IconButton|<Notice|<EmptyState/);
+  });
+});

package/src/patterns/missing-element/MissingElement.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Badge } from '../../components/badge';
+import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { MissingElementProps } from './types';
+
+/***
+ * Renders the visible, non-interactive body of a draft missing-element marker.
+ */
+function MissingElementInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  requestedCapability,
+  reason,
+  evidenceId,
+  minimumWidth,
+  minimumHeight,
+  testID,
+}: MissingElementProps) {
+  const { theme } = useZoraTheme();
+  const accessibilityLabel = `Missing element: ${requestedCapability}. ${reason}`;
+
+  return (
+    <Box
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="text"
+      accessible
+      bg={theme.semantics.warning.softBg}
+      borderColor={theme.semantics.warning.base}
+      borderWidth={1}
+      minHeight={minimumHeight}
+      minWidth={minimumWidth}
+      p="m"
+      radius="m"
+      style={styles.root}
+      testID={testID}
+    >
+      <Stack gap="xs">
+        <Badge color="warning">Missing element</Badge>
+        <Text variant="label" weight="semiBold">
+          {requestedCapability}
+        </Text>
+        <Text emphasis="muted" variant="bodySmall">
+          {reason}
+        </Text>
+        {evidenceId ? (
+          <Text emphasis="subtle" variant="caption">
+            Evidence: {evidenceId}
+          </Text>
+        ) : null}
+      </Stack>
+    </Box>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    borderStyle: 'dashed',
+  },
+});
+
+/***
+ * Draft-only marker that preserves an unsupported manifest region without faking its capability.
+ *
+ * `MissingElement` is intentionally non-interactive and release-blocking in component metadata.
+ * Replace it with a released semantic ZORA element before publishing a production template.
+ */
+export const MissingElement = withZoraThemeScope(MissingElementInner);

package/src/patterns/missing-element/index.ts

@@ -0,0 +1,2 @@
+export { MissingElement } from './MissingElement';
+export type { MissingElementProps } from './types';

package/src/patterns/missing-element/meta.ts

@@ -0,0 +1,62 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+const instanceAuthoring = { authority: 'instance' } as const;
+
+export const missingElementMeta = {
+  name: 'MissingElement',
+  category: 'pattern',
+  description:
+    'Draft-only marker for an unresolved semantic ZORA capability that must be replaced before release.',
+  directManifestNode: true,
+  allowedChildren: [],
+  manifestPolicy: {
+    kind: 'unresolved-element',
+    availability: 'draft-only',
+    releaseGate: 'blocked',
+  },
+  blueprint: {
+    label: 'Missing element',
+    defaultProps: {
+      requestedCapability: 'Unresolved interface capability',
+      reason: 'No matching ZORA element is available.',
+      minimumWidth: 240,
+      minimumHeight: 160,
+    },
+  },
+  props: {
+    requestedCapability: {
+      type: 'string',
+      category: 'Gap',
+      label: 'Requested capability',
+      default: 'Unresolved interface capability',
+      authoring: instanceAuthoring,
+    },
+    reason: {
+      type: 'string',
+      category: 'Gap',
+      label: 'Reason',
+      default: 'No matching ZORA element is available.',
+      authoring: instanceAuthoring,
+    },
+    evidenceId: {
+      type: 'string',
+      category: 'Evidence',
+      label: 'Evidence ID',
+      authoring: instanceAuthoring,
+    },
+    minimumWidth: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Minimum width',
+      default: 240,
+      authoring: instanceAuthoring,
+    },
+    minimumHeight: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Minimum height',
+      default: 160,
+      authoring: instanceAuthoring,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/missing-element/types.ts

@@ -0,0 +1,9 @@
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface MissingElementProps extends ZoraBaseProps {
+  requestedCapability: string;
+  reason: string;
+  evidenceId?: string;
+  minimumWidth?: number;
+  minimumHeight?: number;
+}

package/src/patterns/theme-composer/ThemeComposer.test.ts

@@ -1,10 +1,14 @@
-import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
+import { readFileSync } from 'node:fs';
+
+import { parseHexColorOrThrow } from '@ankhorage/color-theory';
 import { APP_CATEGORIES } from '@ankhorage/contracts';
 import { describe, expect, test } from 'bun:test';
 
 import { zoraDefaultTheme } from '../../theme/zoraDefaultTheme';
 import type { ThemeComposerProps } from './types';
 
+const themeComposerSource = readFileSync(new URL('./ThemeComposer.tsx', import.meta.url), 'utf8');
+
 // ---------------------------------------------------------------------------
 // ThemeComposerProps shape tests
 // ---------------------------------------------------------------------------
@@ -56,20 +60,12 @@ describe('ThemeComposerProps', () => {
 });
 
 // ---------------------------------------------------------------------------
-// COLOR_HARMONIES coverage
+// COLOR_HARMONIES ownership
 // ---------------------------------------------------------------------------
 
-describe('COLOR_HARMONIES coverage for ThemeComposer', () => {
-  test('all canonical harmony values are present for the Select options', () => {
-    const expected = [
-      'monochromatic',
-      'analogous',
-      'complementary',
-      'triadic',
-      'tetradic',
-      'splitComplementary',
-    ] as const;
-    expect(COLOR_HARMONIES).toEqual(expected);
+describe('COLOR_HARMONIES ownership for ThemeComposer', () => {
+  test('derives Select options from the canonical Color Theory catalog', () => {
+    expect(themeComposerSource).toContain('COLOR_HARMONIES.map');
   });
 });
 

package/src/registry.ts

@@ -82,6 +82,7 @@ import { ImageUploadField } from './patterns/image-upload-field';
 import { InspectorField } from './patterns/inspector-field';
 import { List, ListRow, ListSection } from './patterns/list';
 import { MessageBubble } from './patterns/message-bubble';
+import { MissingElement } from './patterns/missing-element';
 import { Notice } from './patterns/notice';
 import { Panel } from './patterns/panel';
 import { PostCard } from './patterns/post-card';
@@ -219,6 +220,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   ListRow,
   ListSection,
   MessageBubble,
+  MissingElement,
   Notice,
   Panel,
   PostCard,