@ossy/resources 1.11.6 → 1.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "1.11.6",
+  "version": "1.12.0",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.2.0",
-    "@ossy/platform": "^1.38.6",
+    "@ossy/platform": "^1.39.0",
     "casual": "^1.6.2",
     "jest": "^30.2.0"
   },
@@ -31,5 +31,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "72d150cf20ff7ba25b328bc5b429b065c2840b2b"
+  "gitHead": "d9d31182be64a448d575da432af2830d909ad4b9"
 }

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/CreateDirectory.jsx

@@ -6,11 +6,13 @@ import {
   Button,
   View,
   useInputValue,
-  Text
+  Text,
+  useLocale,
 } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 
 export const CreateDirectory = () => {
+  const { t } = useLocale()
   const router = useRouter()
   const { createDirectory } = useResources()
   const [directoryName, setDirectoryName] = useInputValue('')
@@ -24,11 +26,11 @@ export const CreateDirectory = () => {
 
 
     if (!directoryName || directoryName.trim() === '') {
-      return setError('Directory name cannot be empty')
+      return setError(t('resources.createDirectory.errorEmpty'))
     }
 
     if (directoryName?.startsWith?.('@ossy') || directoryName?.startsWith?.('/@ossy')) {
-      setError('Directory name cannot start with @ossy')
+      setError(t('resources.createDirectory.errorOssyPrefix'))
       return
     }
 
@@ -48,11 +50,10 @@ export const CreateDirectory = () => {
   return (
     <View gap="s" style={{ height: '100%' }}>
 
-      <Title variant="primary" style={{ marginBottom: 'var(--space-m)' }}>Create a new directory</Title>
+      <Title variant="primary" style={{ marginBottom: 'var(--space-m)' }}>{t('resources.createDirectory.title')}</Title>
 
       <Text style={{ marginBottom: 'var(--space-m)' }}>
-        Create a new directory to organize your resources.
-        The new directory will be created in the location: {directoryLocation}
+        {t('resources.createDirectory.description', { location: directoryLocation })}
       </Text>
 
       <form
@@ -64,7 +65,7 @@ export const CreateDirectory = () => {
         <Input
           id="path"
           type="text"
-          placeholder="Directory name"
+          placeholder={t('resources.createDirectory.namePlaceholder')}
           value={directoryName}
           onChange={setDirectoryName}
           style={{ width: '100%', marginBottom: 'var(--space-l)' }}
@@ -78,14 +79,14 @@ export const CreateDirectory = () => {
           <Button
             id="cancel"
             onClick={() => router.navigate('@back')}
-          >Cancel
+          >{t('design-system.cancel')}
           </Button>
 
           <Button
             id="createDirectory"
             variant="cta"
             onClick={onCreateDirectory}
-          >Create directory
+          >{t('resources.createDirectory.submit')}
           </Button>
 
         </View>
@@ -95,4 +96,3 @@ export const CreateDirectory = () => {
   )
 }
 
-

package/src/CreateDocument.jsx

@@ -1,73 +1,37 @@
 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, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
+import { GenericResourceForm } from './GenericResourceForm.jsx'
 
 export const CreateDocument = () => {
+  const { t } = useLocale()
   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 || t('resources.form.createFailed')))
   }
 
   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/Definition.js

@@ -8,12 +8,6 @@ export const Definition = {
     explore the gallery below to discover valuable assets that align with your vision.
     We hope you find them useful, and we're here if you have any questions!
   `,
-  module: {
-    id: 'resources',
-    enabled: true
-  },
+  icon: 'image',
   statuses: ['beta'],
-  actions: ['resources.create', 'resources.update-content', 'resources.remove'],
-  views: ['home.page', 'resources.list', 'resources.get'],
-  tasks: []
-}
+}

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,110 @@
+import React, { useState } from 'react'
+import { useResourceTemplate } from '@ossy/sdk-react'
+import {
+  Slot,
+  resourceSlot,
+  View,
+  Title,
+  Text,
+  InputTitle,
+  Button,
+  Alert,
+  Fields,
+  applyFieldChange,
+  useInputValue,
+  useLocale,
+} from '@ossy/design-system'
+
+function GenericResourceFormFallback ({
+  templateId,
+  mode = 'create',
+  initialName = '',
+  initialContent = {},
+  onSubmit,
+  onCancel,
+  submitLabel,
+}) {
+  const { t } = useLocale()
+  const template = useResourceTemplate(templateId)
+  const [name, setName] = useInputValue(initialName)
+  const [content, setContent] = useState(initialContent)
+  const [error, setError] = useState()
+
+  const handleSubmit = () => {
+    if (!name?.trim()) {
+      setError(t('resources.form.nameRequired'))
+      return
+    }
+    setError(undefined)
+    onSubmit?.({ name: name.trim(), content, type: templateId })
+  }
+
+  return (
+    <View stack gap="m">
+      <InputTitle
+        id="resource-name"
+        type="text"
+        placeholder={t('resources.form.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}>{t('design-system.cancel')}</Button>}
+        <Button variant="cta" onClick={handleSubmit}>
+          {submitLabel || (mode === 'edit' ? t('design-system.save') : (template?.name ? `${t('design-system.add')} ${template.name}` : t('resources.form.createResource')))}
+        </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,
+}) {
+  const { t } = useLocale()
+
+  if (!templateId) {
+    return <Text>{t('resources.form.selectType')}</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/ResourcesPage.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { SDK } from '@ossy/sdk'
 import { useResources, AsyncStatus, WorkspaceProvider } from '@ossy/sdk-react'
-import { Title, Text, Switch, View, ImageCard, Tags } from '@ossy/design-system'
+import { Title, Text, Switch, View, ImageCard, Tags, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
-import { Definition } from './Definition.js'
 
 const sdk = SDK.of({
   /** Ossy.se workspaceID - used to fetch free resources */
@@ -18,6 +17,7 @@ const freeResourcesGridStyles = {
 
 export const ResourcesPage= () => {
   const router = useRouter()
+  const { t } = useLocale()
   const { status, resources } = useResources('/publications/images/')
   const tags = resources.flatMap(resource => resource?.content?.tags || [])
   const tagsCount = tags.reduce((acc, t) => ({ ...acc, [t]: (acc?.[t] ?? 0) + 1 }), {})
@@ -34,8 +34,8 @@ export const ResourcesPage= () => {
           <View gap="l" style={{ margin: '0 auto' }}>
 
             <View gap="m">
-              <Title>{Definition.title}</Title>
-              <Text style={{ maxWidth: '900px'}}>{Definition.description}</Text>
+              <Title>{t('resources.home.title')}</Title>
+              <Text style={{ maxWidth: '900px'}}>{t('resources.home.description')}</Text>
             </View>
             
             <WorkspaceProvider sdk={sdk}>

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/UploadResources.jsx

@@ -1,26 +1,23 @@
 import React from 'react'
 import { useResources } from '@ossy/sdk-react'
-import { Title, View, Text, Upload as _Upload } from '@ossy/design-system'
+import { Title, View, Text, useLocale } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { Upload } from './Upload.jsx'
 
 export const UploadResources = () => {
+  const { t } = useLocale()
   const router = useRouter()
   const location = router.searchParams.location
   const { uploadFile } = useResources()
 
   return (
     <View gap="s" style={{ height: '100%' }}>
-
       <View gap="s">
-        <Title variant="tertiary" style={{ marginBottom: '0' }}>
-          Upload
-        </Title>
+        <Title variant="tertiary" style={{ marginBottom: '0' }}>{t('resources.upload.title')}</Title>
         <View layout="row" gap="s">
-          <Text variant="small" >Location: {location}</Text>
+          <Text variant="small">{t('resources.upload.location', { location })}</Text>
         </View>
       </View>
-
       <Upload
         onUpload={(file) => uploadFile(location, file)}
         onCancel={() => router.navigate(`@storage/home?location=${location}`)}
@@ -28,4 +25,4 @@ export const UploadResources = () => {
       />
     </View>
   )
-}
+}

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/en.translations.json

@@ -0,0 +1,48 @@
+{
+  "resources.home.documentTitle": "Free Resources",
+  "resources.home.title": "Free Resources",
+  "resources.home.description": "We believe in providing value at every step of your journey with us. That's why we've curated a collection of free resources. Whether you're looking to enhance your creative projects or simply seeking inspiration, explore the gallery below to discover valuable assets that align with your vision. We hope you find them useful, and we're here if you have any questions!",
+  "resources.form.nameRequired": "Name is required",
+  "resources.form.untitled": "Untitled",
+  "resources.form.selectType": "Select a resource type to continue.",
+  "resources.form.createFailed": "Create failed",
+  "resources.form.createResource": "Create resource",
+  "resources/create.label": "Create resource",
+  "resources/create.description": "Create a new resource in the workspace",
+  "resources/list.label": "List resources",
+  "resources/list.description": "List resources in a workspace location",
+  "resources/get.label": "Get resource",
+  "resources/get.description": "Fetch a single resource by id",
+  "resources/search.label": "Search resources",
+  "resources/search.description": "Search resources in a workspace",
+  "resources/delete.label": "Delete resource",
+  "resources/delete.description": "Delete a resource from the workspace",
+  "resources/update-name.label": "Update resource name",
+  "resources/update-name.description": "Rename a workspace resource",
+  "resources/update-content.label": "Update resource content",
+  "resources/update-content.description": "Update the content of a workspace resource",
+  "resources/update-location.label": "Update resource location",
+  "resources/update-location.description": "Move a resource to a new location",
+  "resources/update-access.label": "Update resource access",
+  "resources/update-access.description": "Change access settings for a resource",
+  "resources/upload-named-version.label": "Upload named version",
+  "resources/upload-named-version.description": "Upload a named version of a resource file",
+  "resources/create-page-view.label": "Create page view",
+  "resources/create-page-view.description": "Record a page view analytics event",
+  "resources/get-page-view-stats.label": "Get page view stats",
+  "resources/get-page-view-stats.description": "Fetch aggregated page view statistics",
+  "resources.create.generic.documentTitle": "Create resource",
+  "createDirectory.documentTitle": "Create directory",
+  "createDocument.documentTitle": "Create document",
+  "uploadMedia.documentTitle": "Upload",
+  "@resource.documentTitle": "Resource",
+  "resources.upload.title": "Upload",
+  "resources.upload.location": "Location: {location}",
+  "resources.createDirectory.title": "Create directory",
+  "resources.createDocument.title": "Create document",
+  "resources.createDirectory.description": "Create a new directory to organize your resources. The new directory will be created in the location: {location}",
+  "resources.createDirectory.namePlaceholder": "Directory name",
+  "resources.createDirectory.submit": "Create directory",
+  "resources.createDirectory.errorEmpty": "Directory name cannot be empty",
+  "resources.createDirectory.errorOssyPrefix": "Directory name cannot start with @ossy"
+}

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,48 @@
+import React, { useState } from 'react'
+import { useResources } from '@ossy/sdk-react'
+import { View, useLocale } 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 { t } = useLocale()
+  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 || t('resources.form.createFailed')))
+  }
+
+  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,25 @@
+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',
+  path: {
+    en: '/resources/item/:resourceId',
+    sv: '/resources/objekt/:resourceId',
+  },
+}
+
+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>
+  )
+}

package/src/sv.translations.json

@@ -0,0 +1,48 @@
+{
+  "resources.home.documentTitle": "Gratis resurser",
+  "resources.home.title": "Gratis resurser",
+  "resources.home.description": "Vi tror på att leverera värde i varje steg av din resa med oss. Därför har vi samlat gratis resurser. Oavsett om du vill förbättra dina kreativa projekt eller bara söker inspiration kan du utforska galleriet nedan. Vi hoppas att du hittar något användbart — hör av dig om du har frågor!",
+  "resources.form.nameRequired": "Namn krävs",
+  "resources.form.untitled": "Namnlös",
+  "resources.form.selectType": "Välj en resurstyp för att fortsätta.",
+  "resources.form.createFailed": "Skapandet misslyckades",
+  "resources.form.createResource": "Skapa resurs",
+  "resources/create.label": "Skapa resurs",
+  "resources/create.description": "Skapa en ny resurs i workspace",
+  "resources/list.label": "Lista resurser",
+  "resources/list.description": "Lista resurser på en plats i workspace",
+  "resources/get.label": "Hämta resurs",
+  "resources/get.description": "Hämta en enskild resurs via id",
+  "resources/search.label": "Sök resurser",
+  "resources/search.description": "Sök resurser i en workspace",
+  "resources/delete.label": "Ta bort resurs",
+  "resources/delete.description": "Ta bort en resurs från workspace",
+  "resources/update-name.label": "Uppdatera resursnamn",
+  "resources/update-name.description": "Byt namn på en resurs i workspace",
+  "resources/update-content.label": "Uppdatera resursinnehåll",
+  "resources/update-content.description": "Uppdatera innehållet i en resurs",
+  "resources/update-location.label": "Uppdatera resursplats",
+  "resources/update-location.description": "Flytta en resurs till en ny plats",
+  "resources/update-access.label": "Uppdatera resursåtkomst",
+  "resources/update-access.description": "Ändra åtkomstinställningar för en resurs",
+  "resources/upload-named-version.label": "Ladda upp namngiven version",
+  "resources/upload-named-version.description": "Ladda upp en namngiven version av en resursfil",
+  "resources/create-page-view.label": "Skapa sidvisning",
+  "resources/create-page-view.description": "Registrera en sidvisningshändelse för analys",
+  "resources/get-page-view-stats.label": "Hämta sidvisningsstatistik",
+  "resources/get-page-view-stats.description": "Hämta aggregerad statistik för sidvisningar",
+  "resources.create.generic.documentTitle": "Skapa resurs",
+  "createDirectory.documentTitle": "Skapa mapp",
+  "createDocument.documentTitle": "Skapa dokument",
+  "uploadMedia.documentTitle": "Ladda upp",
+  "@resource.documentTitle": "Resurs",
+  "resources.upload.title": "Ladda upp",
+  "resources.upload.location": "Plats: {location}",
+  "resources.createDirectory.title": "Skapa mapp",
+  "resources.createDocument.title": "Skapa dokument",
+  "resources.createDirectory.description": "Skapa en ny mapp för att organisera dina resurser. Den nya mappen skapas på platsen: {location}",
+  "resources.createDirectory.namePlaceholder": "Mappnamn",
+  "resources.createDirectory.submit": "Skapa mapp",
+  "resources.createDirectory.errorEmpty": "Mappnamn får inte vara tomt",
+  "resources.createDirectory.errorOssyPrefix": "Mappnamn får inte börja med @ossy"
+}