@ankhorage/zora 22.1.4 → 23.1.0

package/dist/types/selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/E"}
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/E"}

package/dist/types/selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection.js","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"","sourcesContent":["import type { InteractionPolicy } from '@ankhorage/surface';\nimport type React from 'react';\n\nexport type SelectionMode = 'single' | 'multi';\n\nexport type SelectionTrigger = 'press' | 'longPress' | 'manual';\n\nexport interface SelectionProviderProps {\n  children: React.ReactNode;\n  selectedIds?: readonly string[];\n  defaultSelectedIds?: readonly string[];\n  mode?: SelectionMode;\n  disabled?: boolean;\n  onSelectionChange?: (ids: readonly string[]) => void;\n  interactionPolicy?: InteractionPolicy;\n}\n\nexport interface UseSelectionResult {\n  mode: SelectionMode;\n  disabled: boolean;\n  selectedIds: readonly string[];\n  selectedCount: number;\n  hasSelection: boolean;\n  isSelected: (id: string) => boolean;\n  select: (id: string) => void;\n  toggle: (id: string) => void;\n  clear: () => void;\n}\n\nexport interface SelectableItemState {\n  id: string;\n  selected: boolean;\n  disabled: boolean;\n  mode: SelectionMode;\n  select: () => void;\n  toggle: () => void;\n  clear: () => void;\n}\n\nexport interface SelectableItemProps {\n  id: string;\n  trigger?: SelectionTrigger;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  children: React.ReactNode | ((state: SelectableItemState) => React.ReactNode);\n}\n"]}
+{"version":3,"file":"selection.js","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"","sourcesContent":["import type { InteractionPolicy } from '@ankhorage/surface';\nimport type { SelectionIntent } from '@ankhorage/utility/selection';\nimport type React from 'react';\n\nexport type SelectionMode = 'single' | 'multi';\n\nexport type SelectionTrigger = 'press' | 'longPress' | 'manual';\n\nexport interface SelectionProviderProps {\n  children: React.ReactNode;\n  selectedIds?: readonly string[];\n  defaultSelectedIds?: readonly string[];\n  mode?: SelectionMode;\n  disabled?: boolean;\n  onSelectionChange?: (ids: readonly string[]) => void;\n  interactionPolicy?: InteractionPolicy;\n}\n\nexport interface UseSelectionResult {\n  mode: SelectionMode;\n  disabled: boolean;\n  selectedIds: readonly string[];\n  selectedCount: number;\n  hasSelection: boolean;\n  isSelected: (id: string) => boolean;\n  activate: (id: string, intent: SelectionIntent) => void;\n  select: (id: string) => void;\n  toggle: (id: string) => void;\n  clear: () => void;\n}\n\nexport interface SelectableItemState {\n  id: string;\n  selected: boolean;\n  disabled: boolean;\n  mode: SelectionMode;\n  activate: (intent: SelectionIntent) => void;\n  select: () => void;\n  toggle: () => void;\n  clear: () => void;\n}\n\nexport interface SelectableItemProps {\n  id: string;\n  trigger?: SelectionTrigger;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  children: React.ReactNode | ((state: SelectableItemState) => React.ReactNode);\n}\n"]}

package/dist/types/tree-view.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { SelectionIntent } from '@ankhorage/utility/selection';
 import type { ReactNode } from 'react';
 import type { ZoraBaseProps } from './base';
 export interface TreeItemNode<TId extends string = string> {
@@ -19,10 +20,10 @@ export interface TreeItemRenderProps<TId extends string = string> {
 }
 export interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {
     nodes: readonly TreeItemNode<TId>[];
-    selectedId?: TId;
+    selectedIds?: readonly TId[];
     expandedIds?: readonly TId[];
     defaultExpandedIds?: readonly TId[];
-    onSelect?: (id: TId) => void;
+    onSelect?: (id: TId, intent: SelectionIntent) => void;
     onExpandedChange?: (ids: readonly TId[]) => void;
     renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;
     expansionIndicator?: 'chevron' | 'folder';

package/dist/types/tree-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/types/tree-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IAC/E,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;IAC5D,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC3C"}
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/types/tree-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,EAAE,EAAE,GAAG,CAAC;IACR,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IAC/E,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACpC,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;IAC5D,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC3C"}

package/dist/types/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../src/types/tree-view.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from './base';\n\nexport interface TreeItemNode<TId extends string = string> {\n  id: TId;\n  label: ReactNode;\n  icon?: ButtonIconSpec;\n  children?: readonly TreeItemNode<TId>[];\n  disabled?: boolean;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selected: boolean;\n  expanded: boolean;\n  hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {\n  nodes: readonly TreeItemNode<TId>[];\n  selectedId?: TId;\n  expandedIds?: readonly TId[];\n  defaultExpandedIds?: readonly TId[];\n  onSelect?: (id: TId) => void;\n  onExpandedChange?: (ids: readonly TId[]) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;\n  expansionIndicator?: 'chevron' | 'folder';\n}\n"]}
+{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../src/types/tree-view.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type { SelectionIntent } from '@ankhorage/utility/selection';\nimport type { ReactNode } from 'react';\n\nimport type { ZoraBaseProps } from './base';\n\nexport interface TreeItemNode<TId extends string = string> {\n  id: TId;\n  label: ReactNode;\n  icon?: ButtonIconSpec;\n  children?: readonly TreeItemNode<TId>[];\n  disabled?: boolean;\n  meta?: ReactNode;\n  actions?: ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selected: boolean;\n  expanded: boolean;\n  hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> extends ZoraBaseProps {\n  nodes: readonly TreeItemNode<TId>[];\n  selectedIds?: readonly TId[];\n  expandedIds?: readonly TId[];\n  defaultExpandedIds?: readonly TId[];\n  onSelect?: (id: TId, intent: SelectionIntent) => void;\n  onExpandedChange?: (ids: readonly TId[]) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => ReactNode;\n  expansionIndicator?: 'chevron' | 'folder';\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "22.1.4",
+  "version": "23.1.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -124,7 +124,7 @@
     "version-packages": "ankhorage-changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^2.1.8",
+    "@ankhorage/devtools": "^2.1.9",
     "@ankhorage/paradox": "^0.2.28",
     "@react-native-vector-icons/fontawesome": "^13.1.4",
     "@react-native-vector-icons/fontawesome5": "^13.1.4",

package/src/constants/authoring.ts

@@ -6,6 +6,7 @@ export const COMPONENT_THEME_AUTHORING = {
 
 export const FEATURE_MANIFEST_ELEMENTS = {
   auth: [
+    'AuthScreen',
     'ForgotPasswordForm',
     'OAuthProviderButton',
     'OAuthProviderList',
@@ -47,6 +48,7 @@ export const FEATURE_MANIFEST_ELEMENTS = {
 
 export const CONTAINER_ALLOWED_CHILDREN = [
   'ActivityIndicator',
+  'AuthScreen',
   'ForgotPasswordForm',
   'OAuthProviderButton',
   'OAuthProviderList',

package/src/features/auth/adapters/inbound/AuthScreen.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+import type { AuthScreenProps } from '../../../../types/auth';
+import { KeyboardAvoidingView } from '../../../keyboard-avoiding-view/public';
+import { Divider, ScrollView, View } from '../../../layout/public';
+import { Surface } from '../../../surface/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { Text } from '../../../typography/public';
+import { OAuthProviderList } from './OAuthProviderList';
+import { SignInForm } from './SignInForm';
+import { SignUpForm } from './SignUpForm';
+
+/***
+ * Reusable authentication-screen composition for sign-in and sign-up flows.
+ *
+ * Owns keyboard-safe responsive layout, auth surface presentation, OAuth separation, and
+ * sign-in/sign-up form composition while consumers retain routing and authentication orchestration.
+ */
+export const AuthScreen = withZoraThemeScope(AuthScreenInner);
+
+/*** Render the themed authentication screen while preserving consumer-owned callbacks and state. */
+function AuthScreenInner({
+  themeId: _themeId,
+  mode: _themeMode,
+  interactionPolicy,
+  authMode,
+  title,
+  description,
+  info,
+  error,
+  loading = false,
+  disabled = false,
+  identifiers,
+  identifierLabel,
+  signUpFields,
+  oauthProviders = [],
+  oauthSeparatorLabel = 'or continue with password',
+  onModeChange,
+  onOAuthProviderPress,
+  onSignInSubmit,
+  onSignUpSubmit,
+  testID,
+}: AuthScreenProps) {
+  const effectiveTitle = title ?? (authMode === 'signIn' ? 'Sign in' : 'Create account');
+  const hasOAuth = oauthProviders.length > 0;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.select({ android: 'height', ios: 'padding' })}
+      interactionPolicy={interactionPolicy}
+      style={{ flex: 1 }}
+    >
+      <ScrollView
+        bg="background"
+        contentContainerStyle={{ flexGrow: 1 }}
+        flex={1}
+        interactionPolicy={interactionPolicy}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View
+          align="center"
+          flex={1}
+          interactionPolicy={interactionPolicy}
+          justify="center"
+          px={{ base: 'm', md: 'xl' }}
+          py="xl"
+        >
+          <Surface
+            gap="m"
+            maxWidth={560}
+            p={{ base: 'l', md: 'xl' }}
+            radius="l"
+            testID={testID}
+            variant="outline"
+            width="100%"
+          >
+            <View gap="xs" interactionPolicy={interactionPolicy}>
+              <Text variant="lead" weight="semiBold">
+                {effectiveTitle}
+              </Text>
+              {description ? (
+                <Text emphasis="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </View>
+
+            {hasOAuth ? (
+              <>
+                <OAuthProviderList
+                  disabled={disabled || loading}
+                  interactionPolicy={interactionPolicy}
+                  onProviderPress={onOAuthProviderPress}
+                  providers={oauthProviders}
+                  testID={testID ? `${testID}-oauth` : undefined}
+                />
+                <View align="center" direction="row" gap="s" interactionPolicy={interactionPolicy}>
+                  <View flex={1} interactionPolicy={interactionPolicy}>
+                    <Divider interactionPolicy={interactionPolicy} />
+                  </View>
+                  <Text emphasis="muted" variant="bodySmall">
+                    {oauthSeparatorLabel}
+                  </Text>
+                  <View flex={1} interactionPolicy={interactionPolicy}>
+                    <Divider interactionPolicy={interactionPolicy} />
+                  </View>
+                </View>
+              </>
+            ) : null}
+
+            <AuthScreenForm
+              authMode={authMode}
+              disabled={disabled}
+              error={error}
+              identifierLabel={identifierLabel}
+              identifiers={identifiers}
+              interactionPolicy={interactionPolicy}
+              loading={loading}
+              onModeChange={onModeChange}
+              onSignInSubmit={onSignInSubmit}
+              onSignUpSubmit={onSignUpSubmit}
+              signUpFields={signUpFields}
+              testID={testID ? `${testID}-form` : undefined}
+            />
+
+            {info ? (
+              <Text color="success" variant="bodySmall">
+                {info}
+              </Text>
+            ) : null}
+          </Surface>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+type AuthScreenFormProps = Pick<
+  AuthScreenProps,
+  | 'authMode'
+  | 'disabled'
+  | 'error'
+  | 'identifierLabel'
+  | 'identifiers'
+  | 'interactionPolicy'
+  | 'loading'
+  | 'onModeChange'
+  | 'onSignInSubmit'
+  | 'onSignUpSubmit'
+  | 'signUpFields'
+  | 'testID'
+>;
+
+/*** Render the active ZORA auth form and translate form-switch actions into the shared mode boundary. */
+function AuthScreenForm({
+  authMode,
+  disabled,
+  error,
+  identifierLabel,
+  identifiers,
+  interactionPolicy,
+  loading,
+  onModeChange,
+  onSignInSubmit,
+  onSignUpSubmit,
+  signUpFields,
+  testID,
+}: AuthScreenFormProps) {
+  if (authMode === 'signIn') {
+    return (
+      <SignInForm
+        disabled={disabled}
+        error={error}
+        identifierLabel={identifierLabel}
+        identifiers={identifiers}
+        interactionPolicy={interactionPolicy}
+        loading={loading}
+        onSignUp={onModeChange ? () => onModeChange('signUp') : undefined}
+        onSubmit={onSignInSubmit}
+        signUpLabel="Need an account? Sign up"
+        submitLabel="Sign in"
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <SignUpForm
+      disabled={disabled}
+      error={error}
+      fields={signUpFields}
+      interactionPolicy={interactionPolicy}
+      loading={loading}
+      onSignIn={onModeChange ? () => onModeChange('signIn') : undefined}
+      onSubmit={onSignUpSubmit}
+      signInLabel="Already have an account? Sign in"
+      submitLabel="Create account"
+      testID={testID}
+    />
+  );
+}

package/src/features/auth/authScreenMeta.ts

@@ -0,0 +1,114 @@
+import type { ZoraComponentMeta } from '../../types/authoring';
+
+export const authScreenMeta = {
+  name: 'AuthScreen',
+  category: 'pattern',
+  description:
+    'Presents a complete responsive sign-in or sign-up screen while leaving authentication orchestration to the consumer.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Auth screen',
+    defaultProps: {
+      authMode: 'signIn',
+      identifiers: ['email'],
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    modeChange: {
+      label: 'Mode change',
+      eventType: 'authScreen.modeChange',
+      payloadFields: [{ path: 'mode', type: 'string', label: 'Mode' }],
+    },
+    oauthProviderPress: {
+      label: 'OAuth provider press',
+      eventType: 'authScreen.oauthProviderPress',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+    signInSubmit: {
+      label: 'Sign-in submit',
+      eventType: 'authScreen.signInSubmit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+        { path: 'secret', type: 'string', label: 'Secret' },
+      ],
+    },
+    signUpSubmit: {
+      label: 'Sign-up submit',
+      eventType: 'authScreen.signUpSubmit',
+      payloadFields: [{ path: 'values', type: 'record', label: 'Values' }],
+    },
+  },
+  props: {
+    authMode: {
+      type: 'enum',
+      category: 'Authentication',
+      label: 'Auth mode',
+      enum: ['signIn', 'signUp'],
+      default: 'signIn',
+    },
+    title: { type: 'string', category: 'Content', label: 'Title' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    info: { type: 'string', category: 'State', label: 'Info' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    signUpFields: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Sign-up fields',
+      itemSchema: [
+        { key: 'name', schema: { type: 'string', category: 'Identity', label: 'Name' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        {
+          key: 'type',
+          schema: {
+            type: 'enum',
+            category: 'Authentication',
+            label: 'Type',
+            enum: ['email', 'number', 'otp', 'password', 'tel', 'text', 'url'],
+          },
+        },
+        {
+          key: 'placeholder',
+          schema: { type: 'string', category: 'Content', label: 'Placeholder' },
+        },
+        {
+          key: 'required',
+          schema: { type: 'boolean', category: 'Validation', label: 'Required' },
+        },
+        {
+          key: 'disabled',
+          schema: { type: 'boolean', category: 'State', label: 'Disabled' },
+        },
+      ],
+    },
+    oauthProviders: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'OAuth providers',
+      itemSchema: [
+        { key: 'id', schema: { type: 'string', category: 'Identity', label: 'Provider ID' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        { key: 'disabled', schema: { type: 'boolean', category: 'State', label: 'Disabled' } },
+        { key: 'loading', schema: { type: 'boolean', category: 'State', label: 'Loading' } },
+      ],
+    },
+    oauthSeparatorLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'OAuth separator label',
+      default: 'or continue with password',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/public.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from 'bun:test';
 
+import { authScreenMeta } from './authScreenMeta';
 import { forgotPasswordFormMeta } from './forgotPasswordFormMeta';
 import { oauthProviderButtonMeta } from './oauthProviderButtonMeta';
 import { oauthProviderListMeta } from './oauthProviderListMeta';
@@ -8,6 +9,7 @@ import { signInFormMeta } from './signInFormMeta';
 import { signUpFormMeta } from './signUpFormMeta';
 
 const AUTH_MANIFEST_ELEMENTS = {
+  AuthScreen: authScreenMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
   OAuthProviderButton: oauthProviderButtonMeta,
   OAuthProviderList: oauthProviderListMeta,
@@ -25,6 +27,10 @@ test('auth solutions are direct manifest leaf nodes with authoring schemas', ()
 });
 
 test('auth solution events expose their actionable boundaries', () => {
+  expect(authScreenMeta.events.modeChange.eventType).toBe('authScreen.modeChange');
+  expect(authScreenMeta.events.oauthProviderPress.payloadFields).toEqual([
+    { path: 'providerId', type: 'string', label: 'Provider ID' },
+  ]);
   expect(signInFormMeta.events.submit.payloadFields).toContainEqual({
     path: 'secret',
     type: 'string',

package/src/features/auth/public.ts

@@ -1,6 +1,8 @@
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
+  AuthScreenMode,
+  AuthScreenProps,
   ForgotPasswordFormProps,
   ForgotPasswordFormValues,
   OAuthProviderButtonProps,
@@ -16,6 +18,7 @@ export type {
   SignUpFormProps,
   SignUpFormValues,
 } from '../../types/auth';
+export { AuthScreen } from './adapters/inbound/AuthScreen';
 export { ForgotPasswordForm } from './adapters/inbound/ForgotPasswordForm';
 export { OAuthProviderButton } from './adapters/inbound/OAuthProviderButton';
 export { OAuthProviderList } from './adapters/inbound/OAuthProviderList';

package/src/features/graph-view/adapters/inbound/web-artifact/GraphNodeOverlay.tsx

@@ -1,3 +1,4 @@
+import type { SelectionIntent } from '@ankhorage/utility/selection';
 import React from 'react';
 
 import type {
@@ -7,12 +8,17 @@ import type {
   GraphViewRenderedNode,
   GraphViewSize,
 } from '../../../../../types/graph-view';
+import { resolveSelectionEventIntent } from '../../../../selection/application/resolveSelectionEventIntent';
 
 interface GraphNodeOverlayProps {
   readonly nodes: readonly GraphViewNode[];
   readonly renderedNodes: readonly GraphViewRenderedNode[];
   readonly renderNode: (context: GraphViewNodeRenderContext) => React.ReactNode;
-  readonly onNodeEvent: (id: string, type: GraphViewElementEventType) => void;
+  readonly onNodeEvent: (
+    id: string,
+    type: GraphViewElementEventType,
+    selectionIntent?: SelectionIntent,
+  ) => void;
   readonly onNodeSize: (id: string, size: GraphViewSize) => void;
 }
 
@@ -89,7 +95,9 @@ function MeasuredGraphNode(props: MeasuredGraphNodeProps) {
         transform: `translate(-50%, -50%) scale(${renderedNode.zoom})`,
         transformOrigin: 'center',
       }}
-      onClick={() => props.onNodeEvent(node.id, 'press')}
+      onPointerUp={(event) =>
+        props.onNodeEvent(node.id, 'press', resolveSelectionEventIntent(event, 'pointer'))
+      }
       onDoubleClick={() => props.onNodeEvent(node.id, 'double-press')}
       onMouseEnter={() => props.onNodeEvent(node.id, 'pointer-enter')}
       onMouseLeave={() => props.onNodeEvent(node.id, 'pointer-leave')}

package/src/features/graph-view/adapters/inbound/web-artifact/GraphView.tsx

@@ -48,7 +48,9 @@ export function GraphView(props: GraphViewProps) {
           nodes={props.nodes}
           renderedNodes={renderedNodes}
           renderNode={props.renderNode}
-          onNodeEvent={(id, type) => runtimeRef.current?.handleOverlayNodeEvent(id, type)}
+          onNodeEvent={(id, type, selectionIntent) =>
+            runtimeRef.current?.handleOverlayNodeEvent(id, type, selectionIntent)
+          }
           onNodeSize={(id, size) => runtimeRef.current?.setNodeSize(id, size)}
         />
       ) : null}

package/src/features/graph-view/adapters/inbound/web-artifact/bindGraphEvents.ts

@@ -3,8 +3,10 @@ import type { Core, EventObject } from 'cytoscape';
 import type {
   GraphViewCallbacks,
   GraphViewController,
+  GraphViewElementEvent,
   GraphViewElementEventType,
 } from '../../../../../types/graph-view';
+import { resolveSelectionEventIntent } from '../../../../selection/application/resolveSelectionEventIntent';
 
 /*** Bind stable Cytoscape events that always read the latest React callbacks. */
 export function bindGraphEvents(
@@ -46,10 +48,11 @@ function bindElementEvents(
     const handler = (event: EventObject) => {
       const target: unknown = event.target;
       if (!isGraphEventTarget(target)) return;
-      emitElementEvent(callbacksRef.current, selector, {
-        id: target.id(),
-        type,
-      });
+      emitElementEvent(
+        callbacksRef.current,
+        selector,
+        createElementEvent(event, target.id(), type),
+      );
       onRuntimeChange();
     };
     cy.on(cytoscapeEvent, selector, handler);
@@ -57,6 +60,20 @@ function bindElementEvents(
   });
 }
 
+/*** Translate one renderer event into the engine-neutral public event contract. */
+function createElementEvent(
+  event: EventObject,
+  id: string,
+  type: GraphViewElementEventType,
+): GraphViewElementEvent {
+  if (type !== 'press') return { id, type };
+  return {
+    id,
+    type,
+    selectionIntent: resolveSelectionEventIntent(event, 'pointer'),
+  };
+}
+
 /*** Return whether a Cytoscape event target exposes the element identifier contract. */
 function isGraphEventTarget(value: unknown): value is GraphEventTarget {
   return (
@@ -72,7 +89,7 @@ interface GraphEventTarget {
 function emitElementEvent(
   callbacks: GraphViewCallbacks,
   selector: ElementSelector,
-  event: { readonly id: string; readonly type: GraphViewElementEventType },
+  event: GraphViewElementEvent,
 ) {
   if (selector === 'node') {
     callbacks.onNodeEvent?.(event);

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphRuntime.test.ts

@@ -172,6 +172,27 @@ test('preserves selection and positions through hover presentation updates witho
   }
 });
 
+test('forwards semantic selection intent from rich-node press events', async () => {
+  const ready = Promise.withResolvers<GraphViewController>();
+  const events: GraphViewElementEvent[] = [];
+  const runtime = createGraphRuntime(undefined, {
+    current: { onReady: ready.resolve, onNodeEvent: (event) => events.push(event) },
+  });
+  try {
+    runtime.update({
+      nodes: [{ id: 'a' }],
+      edges: [],
+      layout: 'grid',
+      richNodeRendering: false,
+    });
+    await ready.promise;
+    runtime.handleOverlayNodeEvent('a', 'press', 'toggle');
+    expect(events.at(-1)).toEqual({ id: 'a', type: 'press', selectionIntent: 'toggle' });
+  } finally {
+    runtime.destroy();
+  }
+});
+
 test('settles the pending initial layout when presentation changes before readiness', async () => {
   const ready = Promise.withResolvers<GraphViewController>();
   const calls = { ready: 0, sort: 0 };

package/src/features/graph-view/adapters/inbound/web-artifact/createGraphRuntime.ts

@@ -1,3 +1,4 @@
+import type { SelectionIntent } from '@ankhorage/utility/selection';
 import cytoscape, { type Core, type CytoscapeOptions } from 'cytoscape';
 
 import type {
@@ -30,7 +31,11 @@ type RenderedNodeListener = (nodes: readonly GraphViewRenderedNode[]) => void;
 
 export interface GraphRuntime {
   destroy(): void;
-  handleOverlayNodeEvent(id: string, type: GraphViewElementEventType): void;
+  handleOverlayNodeEvent(
+    id: string,
+    type: GraphViewElementEventType,
+    selectionIntent?: SelectionIntent,
+  ): void;
   setNodeSize(id: string, size: GraphViewSize): void;
   setSelectedNodeIds(nodeIds: readonly string[] | undefined): void;
   subscribeRenderedNodes(listener: RenderedNodeListener): () => void;
@@ -80,7 +85,8 @@ export function createGraphRuntime(
 
   return {
     destroy: () => destroyRuntime(state),
-    handleOverlayNodeEvent: (id, type) => handleOverlayNodeEvent(state, id, type),
+    handleOverlayNodeEvent: (id, type, selectionIntent) =>
+      handleOverlayNodeEvent(state, id, type, selectionIntent),
     setNodeSize: (id, size) => setNodeSize(state, id, size),
     setSelectedNodeIds: (nodeIds) => setSelectedNodeIds(state, nodeIds),
     subscribeRenderedNodes: (listener) => subscribeRenderedNodes(state, listener),
@@ -401,11 +407,12 @@ function handleOverlayNodeEvent(
   state: GraphRuntimeState,
   id: string,
   type: GraphViewElementEventType,
+  selectionIntent?: SelectionIntent,
 ) {
   if (type === 'pointer-enter') state.hoveredNodeIds.add(id);
   if (type === 'pointer-leave') state.hoveredNodeIds.delete(id);
   if (type === 'press') state.cy.getElementById(id).select();
-  state.callbacksRef.current.onNodeEvent?.({ id, type });
+  state.callbacksRef.current.onNodeEvent?.({ id, type, selectionIntent });
   emitRenderedNodes(state);
 }
 

package/src/features/registry/ZORA_COMPONENT_REGISTRY.ts

@@ -6,6 +6,7 @@ import { Accordion, AccordionItem } from '../accordion/public';
 import { ActivityIndicator } from '../activity-indicator/public';
 import { AppBar } from '../app-bar/public';
 import {
+  AuthScreen,
   ForgotPasswordForm,
   OAuthProviderButton,
   OAuthProviderList,
@@ -175,6 +176,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   AppShell,
   Screen,
   ScreenSection,
+  AuthScreen,
   ForgotPasswordForm,
   OAuthProviderButton,
   OAuthProviderList,

package/src/features/registry/componentMeta.test.ts

@@ -166,6 +166,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
   test('direct manifest node leaf/container rules', () => {
     const expectedLeafNodes = new Set([
       'ActivityIndicator',
+      'AuthScreen',
       'ForgotPasswordForm',
       'OAuthProviderButton',
       'OAuthProviderList',