@ossy/resources 1.11.5 → 1.11.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "1.11.5",
+  "version": "1.11.7",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
-    "@ossy/platform": "^1.38.5",
+    "@ossy/platform": "^1.38.7",
     "casual": "^1.6.2",
     "jest": "^30.2.0"
   },
@@ -31,5 +31,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "97d02b0762f2c0461abb1e6753fc3aaad30ee93f"
+  "gitHead": "f65df0cd6da864c314c4f424112e05e8e2dec0ff"
 }

package/src/AudioResource.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useResource } from '@ossy/sdk-react'
-import { Stack, View } from '@ossy/design-system'
+import { View } from '@ossy/design-system'
 
 export const AudioResource = ({
   resourceId,
@@ -9,8 +9,8 @@ export const AudioResource = ({
   const { resource } = useResource(resourceId)
 
   return (
-    <Stack bordered>
-      <Stack.Item fill style={{ padding: '16px 8px', height: '100%' }}>
+    <View stack bordered>
+      <View.Item fill style={{ padding: '16px 8px', height: '100%' }}>
 
       <View layout="off-center-s" inset="m" style={{ height: '100%'}}>
         <View
@@ -21,7 +21,7 @@ export const AudioResource = ({
         />
       </View>
 
-      </Stack.Item>
-    </Stack>
+      </View.Item>
+    </View>
   )
 }

package/src/CreateDocument.jsx

@@ -1,73 +1,36 @@
 import React, { useState } from 'react'
-import { useResources, useResourceTemplate } from '@ossy/sdk-react'
-import {
-  Alert,
-  InputTitle,
-  Button,
-  useInputValue,
-  Fields,
-  applyFieldChange,
-} from '@ossy/design-system'
+import { useResources } from '@ossy/sdk-react'
+import { Alert } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
+import { GenericResourceForm } from './GenericResourceForm.jsx'
 
 export const CreateDocument = () => {
   const router = useRouter()
   const templateId = router.searchParams.templateId
   const location = router.searchParams.location
-  const template = useResourceTemplate(templateId)
-  const [documentData, setDocumentData] = useState({})
   const { createDocument } = useResources()
-  const [documentName, setDocumentName] = useInputValue()
   const [error, setError] = useState()
 
   const onCancel = () => {
-    setDocumentData({})
     const search = new URLSearchParams({ location }).toString()
     router.navigate(`@storage/home?${search}`)
   }
 
-  const onFinish = () => {
-    setDocumentData({})
-    const search = new URLSearchParams({ location }).toString()
-    router.navigate(`@storage/home?${search}`)
-  }
-
-  const onCreateDocument = () => {
-    if (documentName === '' || documentName === undefined) {
-      setError('Document name needs to be set')
-      return ''
-    }
-
-    createDocument({
-      type: templateId,
-      location: location,
-      name: documentName,
-      content: documentData
-    })
-      .then(() => onFinish())
-      .catch(error => { setError(error.message) })
-  }
-
-  const updateFieldData = event => {
-    setDocumentData(prev => applyFieldChange(prev, event))
+  const onSubmit = ({ name, content, type }) => {
+    createDocument({ type, location, name, content })
+      .then(() => onCancel())
+      .catch((err) => setError(err?.message || 'Create failed'))
   }
 
   return (
     <>
-      <InputTitle
-        id="document-name"
-        type="text"
-        className="d-block"
-        placeholder="Untitled document"
-        value={documentName}
-        onChange={setDocumentName}
+      <GenericResourceForm
+        templateId={templateId}
+        mode="create"
+        onSubmit={onSubmit}
+        onCancel={onCancel}
       />
-      <Fields data={documentData} onChange={updateFieldData} fields={template?.fields || []} />
-      { error && <Alert>{error}</Alert>}
-      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 'var(--space-l)'}}>
-        <Button variant="link" onClick={onCancel}>Cancel</Button>
-        <Button variant="cta" onClick={onCreateDocument}>Create {template?.name}</Button>
-      </div>
+      {error && <Alert>{error}</Alert>}
     </>
   )
 }

package/src/GenericResourceCard.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Slot, resourceSlot, View, Title, Text, DelayedRender } from '@ossy/design-system'
+
+function GenericResourceCardFallback ({ resource }) {
+  if (!resource) return null
+  return (
+    <View surface="secondary" roundness="m" inset="m" gap="xs">
+      <Title variant="secondary">{resource.name}</Title>
+      {resource.content?.description && (
+        <Text size="s" color="secondary">{resource.content.description}</Text>
+      )}
+    </View>
+  )
+}
+
+/** Card-sized resource preview — `resource:{type}/card`. */
+export function GenericResourceCard ({ resourceId, resource: resourceProp }) {
+  const { resource: loaded } = useResource(resourceId)
+  const resource = resourceProp ?? loaded
+
+  if (!resource) {
+    return (
+      <DelayedRender>
+        <Text>Loading…</Text>
+      </DelayedRender>
+    )
+  }
+
+  return (
+    <Slot
+      name={resourceSlot(resource.type, 'card')}
+      resourceId={resourceId}
+      resource={resource}
+      fallback={<GenericResourceCardFallback resource={resource} />}
+    />
+  )
+}

package/src/GenericResourceDetail.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useResource, useResourceTemplate } from '@ossy/sdk-react'
+import {
+  Slot,
+  resourceSlot,
+  View,
+  Title,
+  Text,
+  DelayedRender,
+  Fields,
+} from '@ossy/design-system'
+import { ResourceGenericView } from './ResourceGenericView.jsx'
+
+function GenericResourceDetailFallback ({ resourceId }) {
+  const { resource } = useResource(resourceId)
+  const template = useResourceTemplate(resource?.type)
+
+  if (!resource) {
+    return (
+      <DelayedRender>
+        <Text>Loading…</Text>
+      </DelayedRender>
+    )
+  }
+
+  if (template?.fields?.length) {
+    return (
+      <View stack gap="m" inset="m">
+        <Title>{resource.name}</Title>
+        <Fields data={resource.content || {}} fields={template.fields} />
+      </View>
+    )
+  }
+
+  return <ResourceGenericView resourceId={resourceId} />
+}
+
+/**
+ * Generic resource detail host — resolves `resource:{type}/detail` from the slot
+ * registry; falls back to template fields or a minimal placeholder.
+ */
+export function GenericResourceDetail ({ resourceId }) {
+  const { resource } = useResource(resourceId)
+
+  if (!resource) {
+    return (
+      <DelayedRender>
+        <Text>Loading…</Text>
+      </DelayedRender>
+    )
+  }
+
+  return (
+    <Slot
+      name={resourceSlot(resource.type, 'detail')}
+      resourceId={resourceId}
+      resource={resource}
+      fallback={<GenericResourceDetailFallback resourceId={resourceId} />}
+    />
+  )
+}

package/src/GenericResourceForm.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react'
+import { useResourceTemplate } from '@ossy/sdk-react'
+import {
+  Slot,
+  resourceSlot,
+  View,
+  Title,
+  Text,
+  InputTitle,
+  Button,
+  Alert,
+  Fields,
+  applyFieldChange,
+  useInputValue,
+} from '@ossy/design-system'
+
+function GenericResourceFormFallback ({
+  templateId,
+  mode = 'create',
+  initialName = '',
+  initialContent = {},
+  onSubmit,
+  onCancel,
+  submitLabel,
+}) {
+  const template = useResourceTemplate(templateId)
+  const [name, setName] = useInputValue(initialName)
+  const [content, setContent] = useState(initialContent)
+  const [error, setError] = useState()
+
+  const handleSubmit = () => {
+    if (!name?.trim()) {
+      setError('Name is required')
+      return
+    }
+    setError(undefined)
+    onSubmit?.({ name: name.trim(), content, type: templateId })
+  }
+
+  return (
+    <View stack gap="m">
+      <InputTitle
+        id="resource-name"
+        type="text"
+        placeholder="Untitled"
+        value={name}
+        onChange={setName}
+      />
+      <Fields
+        data={content}
+        onChange={(event) => setContent((prev) => applyFieldChange(prev, event))}
+        fields={template?.fields || []}
+      />
+      {error && <Alert>{error}</Alert>}
+      <View layout="row" gap="s" justifyContent="flex-end">
+        {onCancel && <Button variant="link" onClick={onCancel}>Cancel</Button>}
+        <Button variant="cta" onClick={handleSubmit}>
+          {submitLabel || (mode === 'edit' ? 'Save' : `Create ${template?.name || 'resource'}`)}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Generic resource create/edit host — resolves `resource:{type}/form` from the
+ * slot registry; falls back to template-driven Fields.
+ */
+export function GenericResourceForm ({
+  templateId,
+  mode = 'create',
+  resourceId,
+  resource,
+  initialName,
+  initialContent,
+  onSubmit,
+  onCancel,
+  submitLabel,
+}) {
+  if (!templateId) {
+    return <Text>Select a resource type to continue.</Text>
+  }
+
+  return (
+    <Slot
+      name={resourceSlot(templateId, 'form')}
+      templateId={templateId}
+      mode={mode}
+      resourceId={resourceId}
+      resource={resource}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      fallback={
+        <GenericResourceFormFallback
+          templateId={templateId}
+          mode={mode}
+          initialName={initialName ?? resource?.name}
+          initialContent={initialContent ?? resource?.content ?? {}}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          submitLabel={submitLabel}
+        />
+      }
+    />
+  )
+}

package/src/ImageResource.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useResource } from '@ossy/sdk-react'
 import {
-  Stack,
   Image
 } from '@ossy/design-system'
 

package/src/PDFResource.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useResource } from '@ossy/sdk-react'
-import { Stack } from '@ossy/design-system'
+import { View } from '@ossy/design-system'
 
 export const PDFResource = ({
   resourceId
@@ -8,13 +8,13 @@ export const PDFResource = ({
   const { resource  } = useResource(resourceId)
 
   return (
-    <Stack bordered>
-      <Stack.Item fill>
-        <Stack bordered>
+    <View stack bordered>
+      <View.Item fill>
+        <View stack bordered>
 
 
 
-          <Stack.Item fill style={{ padding: '16px 8px' }}>
+          <View.Item fill style={{ padding: '16px 8px' }}>
 
           <div style={{ display: 'flex', justifyContent: 'center' }}>
                   <embed
@@ -24,10 +24,10 @@ export const PDFResource = ({
                     height="800px"
                   />
                 </div>
-          </Stack.Item>
+          </View.Item>
 
-        </Stack>
-      </Stack.Item>
-    </Stack>
+        </View>
+      </View.Item>
+    </View>
   )
 }

package/src/ResourceContentPage.jsx

@@ -55,7 +55,7 @@ export const ResourceContentPage = (props) => {
 
           <View layout="row" style={{ justifyContent: 'space-between', borderRadius: 'var(--space-l)', padding: 'var(--space-xxs)', background: 'transparent' }}>
             <Button variant="neutral" onClick={() => router.back()} style={{ padding: 'var(--space-xs)', borderRadius: '50%' }}>
-              <Icon name="Previous" />
+              <Icon name="chevron-left" />
             </Button>
           </View>
 

package/src/ResourceFactory.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { useResource, AsyncStatus, useWorkspace } from '@ossy/sdk-react'
 import { Guide, Text, DelayedRender } from '@ossy/design-system'
-import { DocumentView } from './DocumentView.jsx'
 import { DocumentEdit } from './DocumentEdit.jsx'
 import { ImageResource } from './ImageResource.jsx'
 import { AudioResource } from './AudioResource.jsx'
 import { VideoResource } from './VideoResource.jsx'
 import { PDFResource } from './PDFResource.jsx'
 import { ResourceGenericView } from './ResourceGenericView.jsx'
+import { GenericResourceDetail } from './GenericResourceDetail.jsx'
 
 export const ResourceFactory = ({
   resourceId,
@@ -39,8 +39,12 @@ export const ResourceFactory = ({
   }
 
   if (workspace?.resourceTemplates?.find(({ id }) => id === resource.type)) {
-    if (mode === 'View') return <DocumentView resourceId={resourceId} onClose={_onClose} mode={mode} />
-    if (mode === 'Edit') return <DocumentEdit resourceId={resourceId} onClose={_onClose} mode={mode} form={form} /> 
+    if (mode === 'View') {
+      return <GenericResourceDetail resourceId={resourceId} />
+    }
+    if (mode === 'Edit') {
+      return <DocumentEdit resourceId={resourceId} form={form} />
+    }
   }
 
   if (['image/jpeg', 'image/png'].includes(resource.type)) {

package/src/ResourceGenericView.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { useResource } from '@ossy/sdk-react'
 import {
-  Stack,
   View,
-  Icon2,
+  Icon,
 } from '@ossy/design-system'
 
 export const ResourceGenericView = ({
@@ -12,21 +11,21 @@ export const ResourceGenericView = ({
   const { resource } = useResource(resourceId)
 
   return (
-    <Stack bordered>
-      <Stack.Item fill>
-        <Stack bordered>
+    <View stack bordered>
+      <View.Item fill>
+        <View stack bordered>
 
-          <Stack.Item fill style={{ padding: '16px 8px' }}>
+          <View.Item fill style={{ padding: '16px 8px' }}>
 
             <View alignItems="center" justifyContent="center" style={{ height: '100%', maxHeight: '400px' }}>
               <View roundness="m" style={{ border: '1px solid var(--separator)', padding: 'var(--space-xl) var(--space-xl)'}}>
-                <Icon2 size="xl" name="file" />
+                <Icon size="xl" name="file" />
               </View>
             </View>
-          </Stack.Item>
+          </View.Item>
 
-        </Stack>
-      </Stack.Item>
-    </Stack>
+        </View>
+      </View.Item>
+    </View>
   )
 }

package/src/ResourceList.jsx

@@ -4,7 +4,7 @@ import {  useWorkspace } from '@ossy/sdk-react'
 import {
   Dropdown,
   DropZone,
-  Icon2,
+  Icon,
   Image,
   View,
   Text,
@@ -73,7 +73,7 @@ function InlineFolderRow({ name, onChange, onSave, onCancel }) {
       }}
     >
       <View gap="m" layout="row" alignItems="center" style={{ flexGrow: 1, padding: '12px 0 12px 20px' }}>
-        <Icon2 size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
+        <Icon size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
         <input
           ref={inputRef}
           value={name}
@@ -163,7 +163,7 @@ function ResourceListItem({
   
     if (resource?.type === 'directory') {
       return (
-        <Icon2 size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)'}} />
+        <Icon size="s" name="folder" style={{ fill: 'hsl(0, 0%, 60%)'}} />
       )
     }
   
@@ -178,7 +178,7 @@ function ResourceListItem({
     }
   
     return (
-      <Icon2 size="s" name={resourceTemplates[resource.type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)'}} />
+      <Icon size="s" name={resourceTemplates[resource.type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)'}} />
     )
   }
   

package/src/ResourcePanel.jsx

@@ -4,7 +4,6 @@ import {
   Title,
   Overlay,
   Switch,
-  Stack,
   Guide,
   View,
   Text,
@@ -133,7 +132,7 @@ export const ResourcePanel = ({
   }
 
   return (
-    <Stack surface="primary" bordered style={{ height: '100%', width: '50%' }}>
+    <View stack surface="primary" bordered style={{ height: '100%', width: '50%' }}>
 
       <style href="@design-system/scroll" precedence='low'>{`
         [data-scroll-hide] {
@@ -148,23 +147,23 @@ export const ResourcePanel = ({
 
       {
         !!error && (
-          <Stack.Item>
+          <View.Item>
             {error}
-          </Stack.Item>
+          </View.Item>
         )
       }
 
-      <Stack.Item>
+      <View.Item>
 
-        <Stack horizontal style={{ height: '48px', alignItems: 'center', gap: '4px' }}>
+        <View stack horizontal style={{ height: '48px', alignItems: 'center', gap: '4px' }}>
 
           <Switch on={panelViewModes['panel-header']}>
 
             <Switch.Case match={[ViewMode.View]}>
 
-                <Stack.Item fill surface="primary" style={{ padding: '4px 8px' }}>
+                <View.Item fill surface="primary" style={{ padding: '4px 8px' }}>
                   <Title as="h3" variant="tertiary">{resourceName}</Title>
-               </Stack.Item>
+               </View.Item>
 
               <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
               <Button prefix="pen" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))} />
@@ -174,7 +173,7 @@ export const ResourcePanel = ({
 
             <Switch.Case match={[ViewMode.Edit]}>
 
-                <Stack.Item fill surface="primary" style={{ padding: '4px 8px' }}>
+                <View.Item fill surface="primary" style={{ padding: '4px 8px' }}>
                   <InputTitle
                     id="document-name"
                     type="text"
@@ -183,7 +182,7 @@ export const ResourcePanel = ({
                     onChange={setResourceName}
                     onBlur={onRenameResource} 
                   />
-               </Stack.Item>
+               </View.Item>
 
                <Button prefix="close" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View }))} />
                <Button prefix="check" variant="command" onClick={onRenameResource}/>
@@ -192,11 +191,11 @@ export const ResourcePanel = ({
 
           </Switch>
 
-        </Stack>
+        </View>
 
-      </Stack.Item>
+      </View.Item>
 
-      <Stack.Item fill={true} data-scroll-hide style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
+      <View.Item fill={true} data-scroll-hide style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
 
         {panels.map(({ content: Content, ...panel }) => {
           const isExpanded = [ViewMode.View, ViewMode.Edit].includes(panelViewModes[panel.id])
@@ -239,7 +238,7 @@ export const ResourcePanel = ({
           )
         })}
 
-      </Stack.Item>
+      </View.Item>
 
       {
         overlay === Overlays.RemoveDirectory && (
@@ -267,6 +266,6 @@ export const ResourcePanel = ({
         )
       }
 
-    </Stack>
+    </View>
   )
 }

package/src/Upload.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button, View, Text, Upload as _Upload, Icon2 } from '@ossy/design-system'
+import { Button, View, Text, Upload as _Upload, Icon } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 const FlowStage = {
@@ -155,9 +155,9 @@ function UploadImgPreview({ file, size = "32px" }) {
 
 function UploadStatus({ status }) {
   if (status === 'preview') return <></>
-  if (status === 'uploading') return <Icon2 name="spinner" size="s" animation="rotate" />
-  if (status === 'uploaded') return <Icon2 name="check" size="s" />
-  if (status === 'error') return <Icon2 name="close" size="s" />
+  if (status === 'uploading') return <Icon name="spinner" size="s" animation="rotate" />
+  if (status === 'uploaded') return <Icon name="check" size="s" />
+  if (status === 'error') return <Icon name="close" size="s" />
 }
 
 function getFlowStage(files = []) {

package/src/VideoResource.jsx

@@ -1,6 +1,6 @@
 import React  from 'react'
 import { useResource } from '@ossy/sdk-react'
-import { Stack } from '@ossy/design-system'
+import { View } from '@ossy/design-system'
 
 export const VideoResource = ({
   resourceId
@@ -8,8 +8,8 @@ export const VideoResource = ({
   const { resource } = useResource(resourceId)
 
   return (
-    <Stack bordered>
-          <Stack.Item fill style={{ padding: '16px 8px' }}>
+    <View stack bordered>
+          <View.Item fill style={{ padding: '16px 8px' }}>
 
       <div style={{ display: 'flex', justifyContent: 'center' }}>
               <video
@@ -18,7 +18,7 @@ export const VideoResource = ({
                 style={{ width: 'auto', height: '400px', margin: 'var(--space-l) auto' }}
               />
             </div>
-      </Stack.Item>
-    </Stack>
+      </View.Item>
+    </View>
   )
 }

package/src/index.js

@@ -15,6 +15,9 @@ export * from './ResourceDescription.jsx'
 export * from './ResourceDetails.jsx'
 export * from './ResourceDialogMove.jsx'
 export * from './ResourceFactory.jsx'
+export * from './GenericResourceDetail.jsx'
+export * from './GenericResourceForm.jsx'
+export * from './GenericResourceCard.jsx'
 export * from './ResourceGenericView.jsx'
 export * from './ResourceList.jsx'
 export * from './ResourcePage.jsx'

package/src/resource-create.page.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { useResources } from '@ossy/sdk-react'
+import { View } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { GenericResourceForm } from './GenericResourceForm.jsx'
+
+export const metadata = {
+  id: 'resources/create/generic',
+  path: {
+    en: '/resources/create/:templateId',
+    sv: '/resources/skapa/:templateId',
+  },
+}
+
+/** Generic resource create page — slot lookup with template Fields fallback. */
+export default function GenericResourceCreatePage () {
+  const router = useRouter()
+  const templateId = decodeURIComponent(router.params.templateId || '')
+  const location = router.searchParams.location
+  const { createDocument } = useResources()
+  const [error, setError] = useState()
+
+  const onCancel = () => {
+    const search = location ? new URLSearchParams({ location }).toString() : ''
+    router.navigate(`@storage/home${search ? `?${search}` : ''}`)
+  }
+
+  const onSubmit = ({ name, content, type }) => {
+    createDocument({ type, location, name, content })
+      .then(() => onCancel())
+      .catch((err) => setError(err?.message || 'Create failed'))
+  }
+
+  return (
+    <View layout="off-center-m" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <GenericResourceForm
+          templateId={templateId}
+          mode="create"
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+        />
+        {error && <View inset="s"><span style={{ color: 'var(--danger)' }}>{error}</span></View>}
+      </View>
+    </View>
+  )
+}

package/src/resource-detail.page.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { GenericResourceDetail } from './GenericResourceDetail.jsx'
+
+export const metadata = {
+  id: '@resource',
+  title: 'Resource',
+  path: {
+    en: '/resources/item/:resourceId',
+    sv: '/resources/objekt/:resourceId',
+  },
+}
+
+/** Generic resource detail page — slot lookup with template fallback. */
+export default function ResourceDetailPage () {
+  const router = useRouter()
+  const resourceId = router.params.resourceId
+
+  return (
+    <View layout="off-center-m" style={{ height: '100%' }}>
+      <View slot="content" surface="primary" roundness="m" inset="m">
+        <GenericResourceDetail resourceId={resourceId} />
+      </View>
+    </View>
+  )
+}