@ossy/resources 3.3.0 → 3.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/resources",
   "description": "Resource domain — aggregate and events for the Ossy resource model",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "private": false,
   "type": "module",
   "main": "./src/index.js",
@@ -23,10 +23,10 @@
     "src": "./src"
   },
   "dependencies": {
-    "@ossy/event-store": "^3.2.0",
-    "@ossy/fold": "^3.0.9",
-    "@ossy/platform": "^3.3.0",
-    "@ossy/schema": "^3.0.9"
+    "@ossy/event-store": "^3.4.0",
+    "@ossy/fold": "^3.4.0",
+    "@ossy/platform": "^3.4.0",
+    "@ossy/schema": "^3.4.0"
   },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
@@ -49,5 +49,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "19e8bae4c1e9df79270218f28c0c9391f4f9871c"
+  "gitHead": "d36b69444268d172bc3e8e1dc77e67afc63f8650"
 }

package/src/ImageResource.jsx

@@ -14,9 +14,17 @@ export const ImageResource = ({
   return (
     <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-m) var(--space-s) var(--space-xl)' }}>
       <Image
-        src={resource?.content?.sizes?.galleryLarge || resource.content.src}
-        placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource.content.src}
-        style={{ width: 'auto', height: '400px', margin: 'var(--space-m) auto var(--space-l)' }}
+        src={resource?.content?.sizes?.galleryLarge || resource?.content?.src}
+        placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+        blurhash={resource?.content?.blurhash}
+        width={resource?.content?.width}
+        height={resource?.content?.height}
+        style={{
+          width: '100%',
+          maxWidth: '960px',
+          height: 'auto',
+          margin: 'var(--space-m) auto var(--space-l)',
+        }}
       />
     </div>
   )

package/src/ResourceContentPage.jsx

@@ -115,6 +115,9 @@ export const ResourceContentPage = (props) => {
                           onClick={() => { }}
                           src={resource?.content?.sizes?.galleryLarge || resource?.content?.src}
                           placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                          blurhash={resource?.content?.blurhash}
+                          width={resource?.content?.width}
+                          height={resource?.content?.height}
                           style={{ pageBreakInside: 'avoid', order: 1 }}
                         />
                       )

package/src/ResourceGrid.jsx

@@ -0,0 +1,281 @@
+'use client'
+import React, { useRef, useEffect, useMemo, useCallback, memo, useState } from 'react'
+import { useSchemas } from './useSchemas.js'
+import {
+  Dropdown,
+  DropZone,
+  Icon,
+  Image,
+  View,
+  Text,
+  Button,
+  ContextMenu,
+} from '@ossy/design-system'
+import { formatBytes } from './utils/format-bytes.js'
+
+const TILE_WIDTH = 160
+
+function useSchemaMap() {
+  const templates = useSchemas()
+  return useMemo(
+    () => templates.reduce((acc, template) => ({ ...acc, [template.id]: template }), {}),
+    [templates],
+  )
+}
+
+export const ResourceGrid = ({
+  resources = [],
+  onClick = () => {},
+  inlineFolder = null,
+}) => {
+  const templateMap = useSchemaMap()
+
+  return (
+    <View
+      layout="row-wrap"
+      gap="m"
+      inset="m"
+      alignItems="stretch"
+      style={{ alignContent: 'flex-start' }}
+    >
+      {inlineFolder && <InlineFolderTile {...inlineFolder} />}
+      {resources.map(resource => (
+        <ResourceGridItem
+          key={resource.id}
+          resource={resource}
+          templateMap={templateMap}
+          onItemClick={onClick}
+        />
+      ))}
+    </View>
+  )
+}
+
+function InlineFolderTile({ name, onChange, onSave, onCancel }) {
+  const inputRef = useRef(null)
+  const handledRef = useRef(false)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [])
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handledRef.current = true
+      onSave(event.target.value)
+    } else if (event.key === 'Escape') {
+      handledRef.current = true
+      onCancel()
+    }
+  }
+
+  const handleBlur = (event) => {
+    if (handledRef.current) return
+    onSave(event.target.value)
+  }
+
+  return (
+    <View
+      surface="primary"
+      roundness="m"
+      inset="m"
+      gap="s"
+      style={{
+        width: TILE_WIDTH,
+        border: '1px dashed var(--separator-primary)',
+        boxSizing: 'border-box',
+      }}
+    >
+      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
+        <Icon size="m" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
+      </View>
+      <input
+        ref={inputRef}
+        value={name}
+        onChange={event => onChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        style={{
+          width: '100%',
+          border: 'none',
+          background: 'transparent',
+          outline: 'none',
+          fontSize: 'var(--text-small-font-size, 14px)',
+          fontFamily: 'var(--text-default-font-family, sans-serif)',
+          fontWeight: 'var(--text-default-font-weight, 400)',
+          color: 'var(--text-default-color, CanvasText)',
+          padding: 0,
+          minWidth: 0,
+          boxSizing: 'border-box',
+        }}
+      />
+    </View>
+  )
+}
+
+const ResourceGridItem = memo(function ResourceGridItem({
+  resource,
+  templateMap,
+  onItemClick,
+}) {
+  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)
+  }, [onItemClick, onClick, resource])
+
+  const handleContextMenu = useCallback((event) => {
+    if (!actions) return
+    event.preventDefault()
+    event.stopPropagation()
+    setMenuPosition({ top: event.clientY, left: event.clientX })
+    setMenuOpen(true)
+  }, [actions])
+
+  const handleMenuOpenChange = useCallback((open) => {
+    setMenuOpen(open)
+    if (!open) setMenuPosition(null)
+  }, [])
+
+  const handleActionsTriggerClick = useCallback(() => {
+    setMenuPosition(null)
+  }, [])
+
+  let Container = ({ children }) => <>{children}</>
+
+  if (onDrop || onFilesDrop) {
+    Container = DropZone
+  } else if (dragData) {
+    Container = DropZone.Dragable
+  }
+
+  const tile = (
+    <View
+      as={href ? 'a' : 'div'}
+      href={href}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      selectable
+      surface="primary"
+      roundness="m"
+      inset="m"
+      gap="s"
+      data-resource-id={resource.id}
+      style={{
+        width: TILE_WIDTH,
+        textDecoration: 'none',
+        color: 'inherit',
+        cursor: 'pointer',
+        border: '1px solid var(--separator-primary)',
+        boxSizing: 'border-box',
+        position: 'relative',
+      }}
+    >
+      {actions ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 'var(--space-xs, 4px)',
+            right: 'var(--space-xs, 4px)',
+            zIndex: 1,
+          }}
+          onClick={event => event.stopPropagation()}
+        >
+          <RowActions
+            actions={actions}
+            open={menuOpen}
+            onOpenChange={handleMenuOpenChange}
+            position={menuPosition}
+            onTriggerClick={handleActionsTriggerClick}
+          />
+        </View>
+      ) : null}
+      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
+        <ResourceThumb type={type} content={content} templateMap={templateMap} />
+      </View>
+      <Text
+        variant="small"
+        style={{
+          fontWeight: 'bold',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {typeof name === 'string' ? name : ''}
+      </Text>
+      <Size content={content} />
+    </View>
+  )
+
+  return (
+    <Container onDrop={onDrop} onFilesDrop={onFilesDrop} dragData={dragData}>
+      {tile}
+    </Container>
+  )
+})
+
+const ResourceThumb = memo(function ResourceThumb({ type, content, templateMap }) {
+  if (type === '@ossy/platform/schema/directory' || type === 'directory') {
+    return (
+      <Icon size="l" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
+    )
+  }
+
+  const mediaType = content?.ContentType || type
+  if (typeof mediaType === 'string' && mediaType.startsWith('image')) {
+    return (
+      <Image
+        src={content?.sizes?.thumbnailSmall || content?.src}
+        placeholderSrc={content?.sizes?.['loader-square-blurred-after'] || content?.src}
+        style={{
+          width: 96,
+          height: 96,
+          objectFit: 'cover',
+          borderRadius: 'var(--roundness-s, 8px)',
+        }}
+      />
+    )
+  }
+
+  return (
+    <Icon size="l" name={templateMap[type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)' }} />
+  )
+})
+
+function Size({ content }) {
+  if (content?.ContentLength) {
+    return (
+      <Text variant="small" style={{ color: 'var(--text-secondary-color, hsl(0, 0%, 50%))' }}>
+        {formatBytes(content.ContentLength)}
+      </Text>
+    )
+  }
+
+  return null
+}
+
+function RowActions({ actions, open, onOpenChange, position, onTriggerClick }) {
+  if (!actions) return null
+
+  return (
+    <Dropdown
+      trigger={<Button prefix="more-vertical-alt" variant="command" onClick={onTriggerClick} />}
+      open={open}
+      onOpenChange={onOpenChange}
+      position={position}
+    >
+      <View inset="xs" surface="primary" roundness="s">
+        <ContextMenu roundness="s" surface="primary">
+          {actions}
+        </ContextMenu>
+      </View>
+    </Dropdown>
+  )
+}

package/src/ResourceGrid.stories.jsx

@@ -0,0 +1,95 @@
+import React, { useMemo, useState } from 'react'
+import { Button, ContextMenu, Dropdown, View } from '@ossy/design-system'
+import { WorkspaceProvider } from '@ossy/sdk-react'
+import { ResourceGrid } from './ResourceGrid.jsx'
+import { ResourceList } from './ResourceList.jsx'
+
+const mockSdk = {
+  invoke: async () => [],
+}
+
+const sampleResources = [
+  {
+    id: 'folder-1',
+    name: 'Projects',
+    type: '@ossy/platform/schema/directory',
+    content: {},
+    actions: [
+      <ContextMenu.Item key="open" prefix="mail-forward">Open</ContextMenu.Item>,
+      <ContextMenu.Separator key="sep" />,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+  {
+    id: 'file-1',
+    name: 'brief.pdf',
+    type: '@ossy/platform/schema/file',
+    content: { ContentType: 'application/pdf', ContentLength: 245760 },
+    actions: [
+      <ContextMenu.Item key="view" prefix="details-more">View</ContextMenu.Item>,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+  {
+    id: 'file-2',
+    name: 'notes.txt',
+    type: '@ossy/platform/schema/file',
+    content: { ContentType: 'text/plain', ContentLength: 1024 },
+    actions: [
+      <ContextMenu.Item key="view" prefix="details-more">View</ContextMenu.Item>,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+]
+
+function ViewToggleDemo() {
+  const [viewMode, setViewMode] = useState('list')
+  const resources = useMemo(() => sampleResources, [])
+
+  return (
+    <WorkspaceProvider sdk={mockSdk}>
+      <View gap="m">
+        <Dropdown
+          trigger={(
+            <Button
+              prefix={viewMode === 'grid' ? 'layout-grid' : 'layout-list'}
+              variant="command"
+              aria-label="Layout"
+            />
+          )}
+        >
+          <View inset="xs" surface="primary" roundness="s">
+            <ContextMenu roundness="s" surface="primary">
+              <ContextMenu.Item
+                prefix="layout-list"
+                suffix={viewMode === 'list' ? 'check' : undefined}
+                onClick={() => setViewMode('list')}
+              >
+                List view
+              </ContextMenu.Item>
+              <ContextMenu.Item
+                prefix="layout-grid"
+                suffix={viewMode === 'grid' ? 'check' : undefined}
+                onClick={() => setViewMode('grid')}
+              >
+                Grid view
+              </ContextMenu.Item>
+            </ContextMenu>
+          </View>
+        </Dropdown>
+        {viewMode === 'grid'
+          ? <ResourceGrid resources={resources} />
+          : <ResourceList resources={resources} />}
+      </View>
+    </WorkspaceProvider>
+  )
+}
+
+export default {
+  title: 'Resources/Resource views',
+  component: ResourceGrid,
+}
+
+export const ListAndGridToggle = {
+  render: () => <ViewToggleDemo />,
+}

package/src/ResourceList.jsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react'
+import React, { useRef, useEffect, useMemo, useCallback, memo, useState } from 'react'
 import { useSchemas } from './useSchemas.js'
 import {
   Dropdown,
@@ -104,12 +104,31 @@ const ResourceListItem = memo(function ResourceListItem({
     onItemClick,
   }) {
     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)
     }, [onItemClick, onClick, resource])
 
+    const handleContextMenu = useCallback((event) => {
+      if (!actions) return
+      event.preventDefault()
+      event.stopPropagation()
+      setMenuPosition({ top: event.clientY, left: event.clientX })
+      setMenuOpen(true)
+    }, [actions])
+
+    const handleMenuOpenChange = useCallback((open) => {
+      setMenuOpen(open)
+      if (!open) setMenuPosition(null)
+    }, [])
+
+    const handleActionsTriggerClick = useCallback(() => {
+      setMenuPosition(null)
+    }, [])
+
     let Container = ({ children }) => <>{children}</>
 
     if (onDrop || onFilesDrop) {
@@ -123,10 +142,19 @@ const ResourceListItem = memo(function ResourceListItem({
         <List.Item
           href={href}
           onClick={handleClick}
+          onContextMenu={handleContextMenu}
           selectable
           leading={<ResourceIcon type={type} content={content} templateMap={templateMap} />}
           meta={<Size content={content} />}
-          trailing={<RowActions actions={actions} />}
+          trailing={(
+            <RowActions
+              actions={actions}
+              open={menuOpen}
+              onOpenChange={handleMenuOpenChange}
+              position={menuPosition}
+              onTriggerClick={handleActionsTriggerClick}
+            />
+          )}
           data-resource-id={resource.id}
         >
           {typeof name === 'string' ? name : ''}
@@ -149,6 +177,9 @@ const ResourceIcon = memo(function ResourceIcon({ type, content, templateMap })
         <Image
           src={content?.sizes?.thumbnailSmall || content?.src}
           placeholderSrc={content?.sizes?.['loader-square-blurred-after'] || content?.src}
+          blurhash={content?.blurhash}
+          width={content?.width}
+          height={content?.height}
           style={{ width: '24px', height: '24px', borderRadius: '25%' }}
         />
       )
@@ -171,11 +202,16 @@ function Size({ content }) {
     return null
 }
 
-function RowActions({ actions }) {
+function RowActions({ actions, open, onOpenChange, position, onTriggerClick }) {
     if (!actions) return null
 
     return (
-      <Dropdown trigger={<Button prefix="more-vertical-alt" variant="command" /> } >
+      <Dropdown
+        trigger={<Button prefix="more-vertical-alt" variant="command" onClick={onTriggerClick} />}
+        open={open}
+        onOpenChange={onOpenChange}
+        position={position}
+      >
         <View inset="xs" surface="primary" roundness="s">
           <ContextMenu roundness="s" surface="primary">
             {actions}

package/src/ResourcesPage.jsx

@@ -41,6 +41,9 @@ export const ResourcesPage= () => {
                     href={router.getHref({ id: "@resource", params: { resourceId: resource?.id } })}
                     src={resource?.content?.sizes?.galleryMedium || resource?.content?.src}
                     placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                    blurhash={resource?.content?.blurhash}
+                    width={resource?.content?.width}
+                    height={resource?.content?.height}
                     style={{ pageBreakInside: 'avoid', cursor: 'pointer' }}
                     key={resource.id}
                   />

package/src/index.js

@@ -4,6 +4,7 @@ export { metadata as ListResources } from './list.action.js'
 export { metadata as SearchResources } from './search.action.js'
 export { metadata as DeleteResource } from './delete.action.js'
 export { metadata as UpdateResourceContent } from './update-content.action.js'
+export { metadata as PatchResourceContent } from './patch-content.action.js'
 export { metadata as UpdateResourceLocation } from './update-location.action.js'
 export { metadata as UpdateResourceName } from './update-name.action.js'
 export { metadata as UpdateResourceAccess } from './update-access.action.js'
@@ -28,6 +29,7 @@ export * from './GenericResourceForm.jsx'
 export * from './GenericResourceCard.jsx'
 export * from './ResourceGenericView.jsx'
 export * from './ResourceList.jsx'
+export * from './ResourceGrid.jsx'
 export * from './ResourcePage.jsx'
 export * from './ResourcePanel.jsx'
 export * from './ResourceTags.jsx'

package/src/patch-content.action.js

@@ -0,0 +1 @@
+export const metadata = { id: '@ossy/resources/actions/patch-content', access: 'workspace' }

package/src/patch-content.task.js

@@ -0,0 +1,28 @@
+import { ResourcesEvents } from './resources.events.js'
+import { mutateResource } from './resource-stream.helpers.js'
+import { resolveResourceId } from './resource-read.helpers.js'
+import { mediaContextFromRun, withResourceMedia } from './resources.action-media.js'
+
+export const metadata = { id: '@ossy/resources/tasks/patch-content' }
+
+/**
+ * Deep-merge patch into resource `content` (ADR 0008 `Patched`).
+ * Prefer this over update-content when adding fields like blurhash/sizes
+ * without replacing the full content document.
+ */
+export async function run ({ payload, req }) {
+  const createdBy = payload?.userId ?? req?.userId
+  const resourceId = resolveResourceId({ payload, req })
+  const content = payload?.content
+
+  if (!resourceId) throw Object.assign(new Error('resourceId is required'), { status: 400 })
+  if (!content || typeof content !== 'object' || Array.isArray(content)) {
+    throw Object.assign(new Error('content is required'), { status: 400 })
+  }
+
+  const resource = await mutateResource(
+    resourceId,
+    ResourcesEvents.Patched({ createdBy, content }),
+  )
+  return withResourceMedia(resource, mediaContextFromRun({ payload, req }))
+}