@raster-app/sanity-plugin-raster/dist/index.es.js

A Sanity Studio plugin that integrates [Raster](https://raster.app) - a modern Digital Asset Management (DAM) platform that helps teams organize, optimize, and deliver their media assets with powerful AI features and an intuitive interface.

import { jsx, jsxs } from "react/jsx-runtime";
import { definePlugin } from "sanity";
import { Card, Text, Dialog, Box, Button } from "@sanity/ui";
import { useSelectedImages, RasterLibraries, RasterPreview, RasterImages } from "@raster-app/raster-toolkit";
import React from "react";
import { ImageIcon } from "@sanity/icons";
const pickerStyles = {
  content: {
    display: "flex",
    gap: "2rem",
    height: "calc(100% - 60px)"
  },
  previewContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "0.75rem",
    width: "100%",
    overflow: "auto"
  },
  divider: {
    margin: "0.5rem 0",
    border: "none",
    borderTop: "1px solid #e5e7eb"
  },
  footer: {
    display: "flex",
    justifyContent: "flex-end",
    gap: "0.5rem",
    position: "absolute",
    bottom: "1rem",
    right: "1rem"
  }
};
function RasterAssetSource(props) {
  const { onSelect, config } = props;
  const { count, images: selectedPhotos } = useSelectedImages();
  const handleConfirm = React.useCallback(() => {
    if (!selectedPhotos) return;
    const assets = selectedPhotos.map((image) => ({
      kind: "url",
      value: image.url
    }));
    onSelect(assets);
    props.onClose();
  }, [onSelect, selectedPhotos, props]);
  if (!config.apiKey || !config.orgId) {
    return /* @__PURE__ */ jsx(Card, { padding: 4, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: "Please configure the Raster plugin with apiKey and orgId" }) });
  }
  return /* @__PURE__ */ jsx(
    Dialog,
    {
      header: "Select images from Raster",
      id: "raster-asset-picker",
      onClose: props.onClose,
      width: 4,
      position: "fixed",
      zOffset: 99999999,
      style: { height: "96vh", marginTop: "40px" },
      children: /* @__PURE__ */ jsxs(Box, { padding: 4, style: { height: "100%" }, children: [
        /* @__PURE__ */ jsxs("div", { style: pickerStyles.content, children: [
          /* @__PURE__ */ jsx(RasterLibraries, { config }),
          /* @__PURE__ */ jsxs("div", { style: pickerStyles.previewContainer, children: [
            /* @__PURE__ */ jsx(
              RasterPreview,
              {
                config,
                initialValue: null,
                showBorder: false
              }
            ),
            /* @__PURE__ */ jsx("hr", { style: pickerStyles.divider }),
            /* @__PURE__ */ jsx(RasterImages, { config, isSingleImage: true })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Box, { style: pickerStyles.footer, children: [
          /* @__PURE__ */ jsx(Button, { mode: "ghost", onClick: props.onClose, text: "Cancel" }),
          count > 0 && /* @__PURE__ */ jsx(
            Button,
            {
              tone: "positive",
              onClick: handleConfirm,
              text: `Confirm (${count})`
            }
          )
        ] })
      ] })
    }
  );
}
function RasterTool(props) {
  const { config } = props;
  if (!config.apiKey || !config.orgId) {
    return /* @__PURE__ */ jsx(Card, { padding: 4, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: "Please configure the Raster plugin with apiKey and orgId" }) });
  }
  return /* @__PURE__ */ jsx(Box, { padding: 4, style: { height: "100%" }, children: /* @__PURE__ */ jsxs("div", { style: pickerStyles.content, children: [
    /* @__PURE__ */ jsx(RasterLibraries, { config }),
    /* @__PURE__ */ jsxs("div", { style: pickerStyles.previewContainer, children: [
      /* @__PURE__ */ jsx(RasterPreview, { config, initialValue: null }),
      /* @__PURE__ */ jsx("hr", { style: pickerStyles.divider }),
      /* @__PURE__ */ jsx(RasterImages, { config })
    ] })
  ] }) });
}
const rasterAssetSource = definePlugin((config) => {
  const rasterSource = {
    name: "raster",
    title: "Raster",
    component: (props) => /* @__PURE__ */ jsx(RasterAssetSource, { ...props, config }),
    icon: ImageIcon
  };
  const rasterTool = {
    name: "raster",
    title: "Raster Assets",
    icon: ImageIcon,
    component: (props) => /* @__PURE__ */ jsx(RasterTool, { ...props, config })
  };
  return {
    name: "raster-asset-source",
    form: {
      image: {
        assetSources: (prev) => [...prev, rasterSource]
      }
    },
    tools: (prev) => [...prev, rasterTool]
  };
});
export {
  rasterAssetSource
};
//# sourceMappingURL=index.es.js.map