@ossy/resources 3.4.0 → 3.5.0

package/src/ResourceList.jsx

@@ -13,6 +13,7 @@ import {
   List,
 } from '@ossy/design-system'
 import { formatBytes } from './utils/format-bytes.js'
+import { ResourceSelectionCheckbox } from './ResourceSelectionCheckbox.jsx'
 
 function useSchemaMap() {
   const templates = useSchemas()
@@ -25,9 +26,16 @@ function useSchemaMap() {
 export const ResourceList = ({
     resources = [],
     onClick = () => {},
+    onToggleSelect,
     inlineFolder = null,
+    selectedIds,
+    showSelectionControls = false,
 }) => {
     const templateMap = useSchemaMap()
+    const selectedSet = useMemo(() => {
+      if (selectedIds instanceof Set) return selectedIds
+      return new Set(selectedIds || [])
+    }, [selectedIds])
 
     return (
       <List>
@@ -38,6 +46,9 @@ export const ResourceList = ({
                 resource={resource}
                 templateMap={templateMap}
                 onItemClick={onClick}
+                onToggleSelect={onToggleSelect}
+                showSelectionControls={showSelectionControls}
+                selected={selectedSet.has(resource.id) || Boolean(resource.selected)}
             />
         ))}
       </List>
@@ -102,16 +113,26 @@ const ResourceListItem = memo(function ResourceListItem({
     resource,
     templateMap,
     onItemClick,
+    onToggleSelect,
+    showSelectionControls = false,
+    selected = false,
   }) {
     const { onClick, href, onDrop, onFilesDrop, dragData, actions, name, type, content } = resource
     const [menuOpen, setMenuOpen] = useState(false)
     const [menuPosition, setMenuPosition] = useState(null)
 
-    const handleClick = useCallback(() => {
-        onItemClick(resource)
-        onClick?.(resource)
+    const handleClick = useCallback((event) => {
+        if (event?.metaKey || event?.ctrlKey || event?.shiftKey) {
+          event.preventDefault?.()
+        }
+        onItemClick?.(resource, event)
+        onClick?.(resource, event)
     }, [onItemClick, onClick, resource])
 
+    const handleToggleSelect = useCallback((event) => {
+      onToggleSelect?.(resource, event)
+    }, [onToggleSelect, resource])
+
     const handleContextMenu = useCallback((event) => {
       if (!actions) return
       event.preventDefault()
@@ -137,6 +158,18 @@ const ResourceListItem = memo(function ResourceListItem({
       Container = DropZone.Dragable
     }
 
+    const leading = (
+      <View layout="row" alignItems="center" gap="s" style={{ flexShrink: 0 }}>
+        {(showSelectionControls || selected) && (
+          <ResourceSelectionCheckbox
+            selected={selected}
+            onToggle={handleToggleSelect}
+          />
+        )}
+        <ResourceIcon type={type} content={content} templateMap={templateMap} />
+      </View>
+    )
+
     return (
       <Container onDrop={onDrop} onFilesDrop={onFilesDrop} dragData={dragData}>
         <List.Item
@@ -144,7 +177,8 @@ const ResourceListItem = memo(function ResourceListItem({
           onClick={handleClick}
           onContextMenu={handleContextMenu}
           selectable
-          leading={<ResourceIcon type={type} content={content} templateMap={templateMap} />}
+          selected={selected}
+          leading={leading}
           meta={<Size content={content} />}
           trailing={(
             <RowActions

package/src/ResourcePanel.jsx

@@ -1,8 +1,14 @@
 import React, { useState, useEffect, memo } from 'react'
 import { metadata as GetResource } from './get.action.js'
-import { removeResource, updateResourceContent, renameResource } from './resource.helpers.js'
+import {
+  isDownloadableResource,
+  removeResource,
+  renameResource,
+  resourceDownloadHref,
+  updateResourceContent,
+} from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Switch, View, Text, Button, InputTitle, Alert, useInputValue } from '@ossy/design-system'
+import { Switch, View, Text, Button, InputTitle, Alert, useInputValue, useLocale } from '@ossy/design-system'
 import { ResourceFactory } from './ResourceFactory.jsx'
 import { ResourceDetails } from './ResourceDetails.jsx'
 import { ResourceTags } from './ResourceTags.jsx'
@@ -32,6 +38,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
   extraPanels = [],
 }) {
   const sdk = useSdk()
+  const { t } = useLocale()
   const [contentError, setContentError] = useState()
   const [resourceName, setResourceName] = useInputValue('')
   const [panelViewModes, setPanelViewModes] = useState(DefaultViewModes)
@@ -39,6 +46,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
   const { data: resource = {} } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
   const template = useSchema(resource?.type)
   const engine = useSchemaEngine()
+  const downloadHref = isDownloadableResource(resource) ? resourceDownloadHref(resource) : null
 
   const form = useForm({ defaultData: resource.content })
 
@@ -171,6 +179,15 @@ export const ResourcePanel = memo(function ResourcePanel ({
                   <Text as="h3" variant="breadcrumb">{resourceName}</Text>
                </View.Item>
 
+              {downloadHref && (
+                <Button
+                  prefix="software-download"
+                  variant="command"
+                  href={downloadHref}
+                  download={resource.name}
+                  aria-label={t('resources.panel.download')}
+                />
+              )}
               <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
               <Button prefix="pen" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))} />
               { !!_onClose && (<Button prefix="close" variant="command" onClick={onCloseResource} /> ) }

package/src/ResourceSelectionCheckbox.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+
+/**
+ * Checkbox affordance for multi-select rows/tiles.
+ * Click toggles selection; does not navigate or open the resource panel.
+ */
+export function ResourceSelectionCheckbox ({
+  selected = false,
+  onToggle,
+  'aria-label': ariaLabel = 'Select',
+}) {
+  return (
+    <View
+      role="checkbox"
+      aria-checked={selected}
+      aria-label={ariaLabel}
+      tabIndex={0}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle?.(event)
+      }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') return
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle?.(event)
+      }}
+      style={{
+        boxSizing: 'border-box',
+        width: 18,
+        height: 18,
+        flexShrink: 0,
+        borderRadius: 4,
+        border: selected
+          ? '1px solid var(--foreground-active, var(--foreground))'
+          : '1px solid var(--separator, hsl(0, 0%, 50%))',
+        background: selected
+          ? 'var(--foreground-active, var(--foreground))'
+          : 'transparent',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+      }}
+    >
+      {selected ? (
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          style={{ display: 'block' }}
+        >
+          <path
+            d="M2.5 6.2L4.8 8.5L9.5 3.5"
+            fill="none"
+            stroke="var(--background, Canvas)"
+            strokeWidth="1.75"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+    </View>
+  )
+}

package/src/SchemaDetailView.jsx

@@ -1,15 +1,23 @@
 import React from 'react'
-import { Text, View, useLocale, hasTranslation } from '@ossy/design-system'
+import { Text, View, MarkdownViewer, useLocale, hasTranslation } from '@ossy/design-system'
+import { shouldRenderFieldAsMarkdown } from './schema-field-display.js'
 
 const labelStyle = { fontWeight: 600, opacity: 0.65 }
 const valueStyle = { whiteSpace: 'pre-wrap' }
 
+function renderPlainFieldValue (value) {
+  if (value == null || value === '') return '—'
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (typeof value === 'object') return JSON.stringify(value, null, 2)
+  return String(value)
+}
+
 /**
  * Generic read-only detail projection for schema-backed resources.
  *
  * @param {{
  *   schemaId?: string,
- *   fields?: { name: string, label?: string, derived?: boolean }[],
+ *   fields?: { name: string, label?: string, type?: string, derived?: boolean }[],
  *   data?: Record<string, unknown>,
  *   title?: string,
  *   emptyMessage?: string,
@@ -39,13 +47,7 @@ export function SchemaDetailView ({
             <View gap="xs" key={name}>
               <Text variant="small" style={labelStyle}>{name}</Text>
               <Text variant="small" style={valueStyle}>
-                {value == null || value === ''
-                  ? '—'
-                  : typeof value === 'boolean'
-                    ? (value ? 'Yes' : 'No')
-                    : typeof value === 'object'
-                      ? JSON.stringify(value, null, 2)
-                      : String(value)}
+                {renderPlainFieldValue(value)}
               </Text>
             </View>
           ))
@@ -80,15 +82,13 @@ export function SchemaDetailView ({
                 : (
                   <Text variant="small" style={labelStyle}>{field.name}</Text>
                 )}
-            <Text variant="small" style={valueStyle}>
-              {value == null || value === ''
-                ? '—'
-                : typeof value === 'boolean'
-                  ? (value ? 'Yes' : 'No')
-                  : typeof value === 'object'
-                    ? JSON.stringify(value, null, 2)
-                    : String(value)}
-            </Text>
+            {shouldRenderFieldAsMarkdown(field, value)
+              ? <MarkdownViewer>{value}</MarkdownViewer>
+              : (
+                <Text variant="small" style={valueStyle}>
+                  {renderPlainFieldValue(value)}
+                </Text>
+              )}
           </View>
         )
       })}

package/src/SchemaPresenter.jsx

@@ -185,16 +185,18 @@ export function SchemaPresenter ({
     return <Text>directory</Text>
   }
 
+  // Document schemas before MIME: schema ids contain `/` and must not be
+  // treated as media types (see isMimeType).
+  if (isDocumentSchema) {
+    return <SchemaViewPresenter resource={resource} projection={projection} resourceId={resourceId} />
+  }
+
   // File envelope is a registered schema, but View must use MIME presenters (image/video/…).
   const mime = resolveMediaType(resource)
   if (resource.type === '@ossy/platform/schema/file' || isMimeType(mime)) {
     return <MimeViewPresenter resource={resource} projection={projection} resourceId={resourceId} onClose={onClose} />
   }
 
-  if (isDocumentSchema) {
-    return <SchemaViewPresenter resource={resource} projection={projection} resourceId={resourceId} />
-  }
-
   return <ResourceGenericView resourceId={resourceId} onClose={onClose} />
 }
 

package/src/Upload.jsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
-import { Button, View, Text, UploadInput, Icon, LocalFilePreview } from '@ossy/design-system'
-import { useRouter } from '@ossy/router-react'
+import React, { useCallback, useState } from 'react'
+import { Button, View, Text, UploadInput, Icon, LocalFilePreview, DropZone } from '@ossy/design-system'
 
 const FlowStage = {
   Error: 'Error',
@@ -14,8 +13,6 @@ export const Upload = ({
  onCancel: _onCancel = () => {},
  onDone,
 }) => {
-  const router = useRouter()
-  const location = router.searchParams.location
   const finishUpload = onDone ?? _onCancel
   const [files, setFilesMetadata] = useState([])
   const flowStage = getFlowStage(files)
@@ -37,10 +34,21 @@ export const Upload = ({
     setFilesMetadata(files => files.filter(x => x.file !== file))
   }
 
+  const setPreviewFiles = useCallback((fileList) => {
+    const next = Array.from(fileList || [])
+    if (!next.length) return
+    setFilesMetadata(next.map(file => ({ file, status: 'preview' })))
+  }, [])
+
   const onUserInput = (e) => {
-    setFilesMetadata(Array.from(e.target.files).map(file => ({ file, status: 'preview' })))
+    setPreviewFiles(e.target.files)
+    e.target.value = ''
   }
 
+  const onFilesDrop = useCallback((dropped) => {
+    setPreviewFiles(dropped)
+  }, [setPreviewFiles])
+
   const onCancel = () => {
     setFilesMetadata([])
     _onCancel()
@@ -68,13 +76,20 @@ export const Upload = ({
       }
 
       {files.length === 0 && (
-        <UploadInput
-          id="upload-resources"
-          type="file"
-          multiple
-          onChange={onUserInput}
-          style={{ flexGrow: '1', borderRadius: 'var(--space-s)' }}
-        />
+        <DropZone onFilesDrop={onFilesDrop}>
+          <View
+            data-ossy-upload-dropzone
+            style={{ flexGrow: '1', display: 'flex', minHeight: '12rem' }}
+          >
+            <UploadInput
+              id="upload-resources"
+              type="file"
+              multiple
+              onChange={onUserInput}
+              style={{ flexGrow: '1', borderRadius: 'var(--space-s)', width: '100%' }}
+            />
+          </View>
+        </DropZone>
       )}
 
       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-m)' }}>

package/src/create.task.js

@@ -7,6 +7,7 @@ import { originalObjectKey } from '@ossy/platform/storage-keys'
 import { commitResource } from './resource-stream.helpers.js'
 import { ResourcesEvents } from './resources.events.js'
 import { mediaContextFromRun, withResourceMedia } from './resources.action-media.js'
+import { assertResourceReferencesExist } from './resources.validate-references.js'
 
 export const metadata = { id: '@ossy/resources/tasks/create' }
 
@@ -51,6 +52,9 @@ export async function run ({ payload, integrations, req }) {
       const first = result.errors[0]
       throw Object.assign(new Error(first.message), { status: 400, type: first.code })
     }
+    await assertResourceReferencesExist(schema, result.data, {
+      workspaceId: workspace.id,
+    })
     const event = ResourcesEvents.Created({
       schemaId: type,
       createdBy,

package/src/en.translations.json

@@ -45,5 +45,8 @@
   "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"
+  "resources.createDirectory.errorOssyPrefix": "Directory name cannot start with @ossy",
+  "resources.panel.download": "Download",
+  "@ossy/resources/schema/markdown.body.label": "Body",
+  "@ossy/resources/schema/markdown.body.description": "Markdown content (headings, lists, links, code)."
 }

package/src/get-resource.api.js

@@ -1,3 +1,8 @@
+import {
+  contentDispositionAttachment,
+  downloadFilenameForResource,
+  wantsAttachmentDownload,
+} from './resource-download.js'
 import {
   loadResourceForRead,
   parseResourceReadTarget,
@@ -19,17 +24,27 @@ async function handleRead(req, res) {
 
   try {
     const resource = await loadResourceForRead(target.resourceId, req)
+    const asAttachment = wantsAttachmentDownload(req)
     const filePayload = await readResourceFileBytes(resource, { variant: target.variant })
 
     if (filePayload?.buffer) {
       if (filePayload.contentType) {
         res.setHeader('Content-Type', filePayload.contentType)
       }
+      if (asAttachment) {
+        res.setHeader('Content-Disposition', contentDispositionAttachment(downloadFilenameForResource(resource)))
+      }
       res.status(200).send(filePayload.buffer)
       return
     }
 
     if (resource.content && typeof resource.content === 'object' && !resource.content.Key) {
+      if (asAttachment) {
+        res.setHeader('Content-Type', 'application/json; charset=utf-8')
+        res.setHeader('Content-Disposition', contentDispositionAttachment(downloadFilenameForResource(resource)))
+        res.status(200).send(JSON.stringify(resource.content, null, 2))
+        return
+      }
       res.status(200).json(resource.content)
       return
     }

package/src/index.js

@@ -30,11 +30,13 @@ export * from './GenericResourceCard.jsx'
 export * from './ResourceGenericView.jsx'
 export * from './ResourceList.jsx'
 export * from './ResourceGrid.jsx'
+export * from './ResourceSelectionCheckbox.jsx'
 export * from './ResourcePage.jsx'
 export * from './ResourcePanel.jsx'
 export * from './ResourceTags.jsx'
 export * from './ResourcesPage.jsx'
 export * from './PlatformFileField.jsx'
+export * from './PlatformReferenceField.jsx'
 export * from './Upload.jsx'
 export * from './UploadResources.jsx'
 export * from './VideoResource.jsx'

package/src/markdown.component.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { View, Text, MarkdownViewer } from '@ossy/design-system'
+
+export const metadata = { id: '@ossy/resources/view/markdown' }
+
+/** Markdown document detail view — `@ossy/resources/view/markdown`. */
+export default function MarkdownViewComponent ({ resource }) {
+  if (!resource) return null
+
+  const body = resource.content?.body
+
+  return (
+    <View stack gap="m" inset="m">
+      <Text variant="heading-default" as="h1">{resource.name}</Text>
+      {typeof body === 'string' && body.trim()
+        ? <MarkdownViewer>{body}</MarkdownViewer>
+        : <Text color="secondary">No content</Text>}
+    </View>
+  )
+}

package/src/markdown.schema.js

@@ -0,0 +1,13 @@
+export default {
+  id: '@ossy/resources/schema/markdown',
+  name: 'Markdown',
+  icon: 'file-document',
+  description: 'A Markdown document for notes, docs, and long-form content.',
+  fields: [
+    {
+      name: 'body',
+      type: 'richtext',
+      description: 'Markdown content (headings, lists, links, code).',
+    },
+  ],
+}

package/src/markdown.spec.js

@@ -0,0 +1,43 @@
+import { describe, expect, it } from '@jest/globals'
+import markdownSchema from './markdown.schema.js'
+import { shouldRenderFieldAsMarkdown } from './schema-field-display.js'
+import { resolveViewComponentChain, resolveFormComponentChain } from '@ossy/schema/resolve'
+import { isCanonicalSchemaId, viewComponentId } from '@ossy/schema'
+
+describe('@ossy/resources/schema/markdown', () => {
+  it('exports a canonical markdown document schema', () => {
+    expect(isCanonicalSchemaId(markdownSchema.id)).toBe(true)
+    expect(markdownSchema.id).toBe('@ossy/resources/schema/markdown')
+    expect(markdownSchema.name).toBe('Markdown')
+    expect(markdownSchema.fields).toEqual([
+      expect.objectContaining({ name: 'body', type: 'richtext' }),
+    ])
+  })
+
+  it('resolves to the markdown view then the generic detail fallback', () => {
+    expect(viewComponentId(markdownSchema.id)).toBe('@ossy/resources/view/markdown')
+    expect(resolveViewComponentChain(markdownSchema.id)).toEqual([
+      '@ossy/resources/view/markdown',
+      '@ossy/resources/view/detail',
+    ])
+    expect(resolveFormComponentChain(markdownSchema.id)).toEqual([
+      '@ossy/resources/form/markdown',
+      '@ossy/resources/form/default',
+    ])
+  })
+})
+
+describe('shouldRenderFieldAsMarkdown', () => {
+  it('renders non-empty richtext strings as Markdown', () => {
+    expect(shouldRenderFieldAsMarkdown({ type: 'richtext' }, '# Hello')).toBe(true)
+    expect(shouldRenderFieldAsMarkdown({ type: 'richtext' }, '  - item  ')).toBe(true)
+  })
+
+  it('skips empty, whitespace, and non-richtext values', () => {
+    expect(shouldRenderFieldAsMarkdown({ type: 'richtext' }, '')).toBe(false)
+    expect(shouldRenderFieldAsMarkdown({ type: 'richtext' }, '   ')).toBe(false)
+    expect(shouldRenderFieldAsMarkdown({ type: 'textarea' }, '# Hello')).toBe(false)
+    expect(shouldRenderFieldAsMarkdown({ type: 'richtext' }, null)).toBe(false)
+    expect(shouldRenderFieldAsMarkdown(null, '# Hello')).toBe(false)
+  })
+})

package/src/platform-reference-field.component.jsx

@@ -0,0 +1,5 @@
+import { PlatformReferenceField } from './PlatformReferenceField.jsx'
+
+export const metadata = { id: '@ossy/design-system/input/reference' }
+
+export default PlatformReferenceField

package/src/reference-field.helpers.js

@@ -0,0 +1,57 @@
+/**
+ * Pure helpers for document reference fields (`type: 'reference'`).
+ */
+
+export function resourceIdFromValue(value) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return typeof value.resourceId === 'string' ? value.resourceId : null
+  }
+  return null
+}
+
+/** Stored `{ resourceId }[]` when `max > 1`. */
+export function resourceIdsFromValue(value) {
+  if (!Array.isArray(value)) return []
+  return value
+    .map(item => (item && typeof item.resourceId === 'string' ? item.resourceId : null))
+    .filter(Boolean)
+}
+
+/** Display label for a resource option in the reference picker. */
+export function resourcePickerLabel(resource) {
+  if (!resource || typeof resource !== 'object') return ''
+  const name = typeof resource.name === 'string' ? resource.name.trim() : ''
+  if (name) return name
+  return typeof resource.id === 'string' ? resource.id : ''
+}
+
+/**
+ * Sort resources for the picker: named first (A–Z), then by id.
+ * @param {Array<{ id?: string, name?: string }>} resources
+ */
+export function sortResourcesForPicker(resources) {
+  if (!Array.isArray(resources)) return []
+  return [...resources].sort((a, b) => {
+    const labelA = resourcePickerLabel(a).toLowerCase()
+    const labelB = resourcePickerLabel(b).toLowerCase()
+    if (labelA < labelB) return -1
+    if (labelA > labelB) return 1
+    return 0
+  })
+}
+
+export function commitResourceValue(name, value, onChange) {
+  onChange({
+    target: {
+      id: name,
+      name,
+      dataset: { ossyFileResourceReplace: 'true' },
+      value: JSON.stringify(value),
+    },
+  })
+}
+
+/** Build the stored content value for a multi-reference field. */
+export function toReferenceArray(resourceIds) {
+  return resourceIds.map(id => ({ resourceId: id }))
+}