@templatical/media-library 0.0.6 → 0.1.0

package/LICENSE

@@ -0,0 +1,56 @@
+Functional Source License, Version 1.1, MIT Future License
+
+Copyright (c) 2026-present Templatical
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+Templatical
+
+### The Software
+
+Templatical Email Editor — the visual drag-and-drop email template editor
+(@templatical/core, @templatical/editor, and @templatical/media-library
+packages).
+
+### Grant of Rights
+
+Subject to the terms and conditions of this License, We hereby grant You a
+non-exclusive, worldwide, non-transferable license to use, copy, modify,
+create derivative works, and redistribute the Software, subject to the
+following conditions:
+
+### Permitted Uses
+
+You may use the Software for any purpose, including commercial purposes,
+**provided that** you do not offer the Software, or a substantially similar
+product built using the Software, as a hosted or managed service that
+competes with Templatical's commercial offerings.
+
+### Change Date
+
+Two (2) years from the date of each release of the Software.
+
+### Change License
+
+MIT License
+
+On the Change Date, the above copyright notice and this permission notice
+shall be replaced with the MIT License, and the Software will be available
+under the MIT License for all purposes without restriction.
+
+### Notices
+
+You must retain this license notice in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+
+---
+
+Note: The @templatical/types, @templatical/renderer, and
+@templatical/import-beefree packages are licensed separately under the MIT
+License. See LICENSE-MIT for those packages' terms.

package/README.md

@@ -0,0 +1,94 @@
+# @templatical/media-library
+
+> Media library for Templatical — composable, Vue components, and a standalone visual SDK.
+
+[![npm version](https://img.shields.io/npm/v/@templatical/media-library?label=npm&color=cb3837)](https://www.npmjs.com/package/@templatical/media-library)
+[![License](https://img.shields.io/badge/license-FSL--1.1--MIT-blue)](https://github.com/templatical/sdk/blob/main/LICENSE)
+
+Browse, upload, organize, crop, and replace media assets. Used by [`@templatical/editor`](https://www.npmjs.com/package/@templatical/editor)'s Cloud build, and available as a standalone SDK for any app that needs a media manager.
+
+## Install
+
+```bash
+npm install @templatical/media-library
+```
+
+Peer deps: `vue@^3.5`, `tailwindcss@^4`.
+
+> **Authentication.** The media library connects to Templatical Cloud and authenticates against your backend. Your server exposes a token endpoint (returning a short-lived JWT for the current user/project), and you pass that endpoint URL as `auth.url`. See the [authentication guide](https://docs.templatical.com/cloud/authentication) for the full setup.
+
+## Usage
+
+### Standalone visual SDK (mount anywhere)
+
+```ts
+import { init } from '@templatical/media-library';
+import '@templatical/media-library/style.css';
+
+const media = await init({
+  container: '#media',
+  auth: {
+    url: 'https://your-app.com/api/templatical/token',
+  },
+  onSelect(item) {
+    console.log('Picked:', item.url);
+  },
+});
+
+// Later
+media.unmount();
+```
+
+### Vue component
+
+Use `MediaLibraryModal` inside a Vue 3 app. See [docs](https://docs.templatical.com/cloud/media-library) for the full prop reference.
+
+```ts
+import { MediaLibraryModal } from '@templatical/media-library';
+import '@templatical/media-library/style.css';
+```
+
+### Composable (build your own UI)
+
+```ts
+import { AuthManager } from '@templatical/core/cloud';
+import { useMediaLibrary } from '@templatical/media-library';
+
+const authManager = new AuthManager({
+  url: 'https://your-app.com/api/templatical/token',
+});
+await authManager.initialize();
+
+const lib = useMediaLibrary({
+  projectId: authManager.projectId,
+  authManager,
+});
+```
+
+### API client (low-level)
+
+```ts
+import { AuthManager } from '@templatical/core/cloud';
+import { MediaApiClient } from '@templatical/media-library';
+
+const api = new MediaApiClient(authManager);
+const response = await api.browseMedia({ folder_id: null });
+```
+
+## Exports
+
+- **Standalone SDK** — `init()`, `unmount()`
+- **Vue components** — `MediaLibraryModal` + 12 sub-components (grid, upload zone, folder tree, preview panel, edit/replace/import modals)
+- **Composables** — `useMediaLibrary`, `useMediaCategories`, `useMediaPicker`, `useI18n`
+- **API client** — `MediaApiClient`
+- **Types** — `MediaItem`, `MediaFolder`, `MediaCategory`, `MediaConversion`, `MediaBrowseParams/Response`, `MediaUsageInfo/Response`, `MediaConfig`, etc.
+
+## Documentation
+
+- [Media library guide](https://docs.templatical.com/cloud/media-library)
+
+Full reference at **[docs.templatical.com](https://docs.templatical.com)**.
+
+## License
+
+[FSL-1.1-MIT](https://github.com/templatical/sdk/blob/main/LICENSE) — free for any non-competing commercial use, automatically converts to MIT after 2 years per release.

package/dist/cdn/chunks/{icons-C3RsNALX.js → icons-DY7nhIJb.js}

@@ -1,4 +1,4 @@
-//#region ../../node_modules/.bun/@vue+shared@3.5.33/node_modules/@vue/shared/dist/shared.esm-bundler.js
+//#region ../../node_modules/.pnpm/@vue+shared@3.5.33/node_modules/@vue/shared/dist/shared.esm-bundler.js
 /* @__NO_SIDE_EFFECTS__ */
 function e(e) {
 	let t = /* @__PURE__ */ Object.create(null);
@@ -876,7 +876,7 @@ function cn(e, t = Infinity, n) {
 	return e;
 }
 //#endregion
-//#region ../../node_modules/.bun/@vue+runtime-core@3.5.33/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
+//#region ../../node_modules/.pnpm/@vue+runtime-core@3.5.33/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
 function ln(e, t, n, r) {
 	try {
 		return r ? e(...r) : e();
@@ -3207,7 +3207,7 @@ function ys(e) {
 	return g(e) ? document.querySelector(e) : e;
 }
 //#endregion
-//#region ../../node_modules/.bun/@lucide+vue@1.11.0+987b49219a7ab62d/node_modules/@lucide/vue/dist/esm/shared/src/utils/isEmptyString.mjs
+//#region ../../node_modules/.pnpm/@lucide+vue@1.14.0_vue@3.5.33_typescript@6.0.3_/node_modules/@lucide/vue/dist/esm/shared/src/utils/isEmptyString.mjs
 var bs = (e) => e === "", xs = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), Ss = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Cs = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), ws = (e) => {
 	let t = Cs(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
@@ -3226,7 +3226,7 @@ function Ds() {
 	return Mn(Es, {});
 }
 //#endregion
-//#region ../../node_modules/.bun/@lucide+vue@1.11.0+987b49219a7ab62d/node_modules/@lucide/vue/dist/esm/Icon.mjs
+//#region ../../node_modules/.pnpm/@lucide+vue@1.14.0_vue@3.5.33_typescript@6.0.3_/node_modules/@lucide/vue/dist/esm/Icon.mjs
 var Os = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width": r, strokeWidth: i, "stroke-width": a, size: o, color: s, ...c }, { slots: l }) => {
 	let { size: u, color: d, strokeWidth: f = 2, absoluteStrokeWidth: p = !1, class: m = "" } = Ds(), h = Ja(() => {
 		let e = bs(n) || bs(r) || n === !0 || r === !0 || p === !0, t = i || a || f || Ts["stroke-width"];
@@ -3411,4 +3411,4 @@ var Os = ({ name: e, iconNode: t, absoluteStrokeWidth: n, "absolute-stroke-width
 //#endregion
 export { Kt as $, da as A, jn as B, ds as C, _a as D, Ja as E, Ya as F, In as G, Wr as H, Mn as I, kn as J, Fn as K, Ta as L, X as M, pr as N, fa as O, Aa as P, Rt as Q, Or as R, ps as S, Zn as T, Rr as U, Ur as V, Br as W, R as X, Ee as Y, De as Z, ks as _, Vs as a, he as at, cs as b, Rs as c, Fs as d, zt as et, Ps as f, As as g, js as h, Hs as i, Xt as it, xa as j, Sa as k, Ls as l, Ms as m, Ws as n, I as nt, Bs as o, ue as ot, Ns as p, On as q, Us as r, Zt as rt, zs as s, Se as st, Gs as t, qt as tt, Is as u, uo as v, q as w, Oo as x, _s as y, oa as z };
 
-//# sourceMappingURL=icons-C3RsNALX.js.map
+//# sourceMappingURL=icons-DY7nhIJb.js.map