@ampless/admin 1.0.0-alpha.84 → 1.0.0-beta.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.ja.md +2 -2
  2. package/README.md +2 -2
  3. package/dist/api/index.d.ts +34 -7
  4. package/dist/api/index.js +8 -3
  5. package/dist/{chunk-SQ6LFPXH.js → chunk-2TBGPB5H.js} +2 -2
  6. package/dist/{chunk-K44QF3MV.js → chunk-4OFRX6QX.js} +1 -1
  7. package/dist/{chunk-BRTC5O3E.js → chunk-4WYMEUYU.js} +361 -224
  8. package/dist/chunk-7HSWOQWV.js +172 -0
  9. package/dist/{chunk-J6R356H3.js → chunk-7OZ23MLD.js} +1 -1
  10. package/dist/{chunk-OFPNBZKP.js → chunk-7W7LAQXY.js} +76 -8
  11. package/dist/{chunk-HN3UFHP7.js → chunk-ANME5KDN.js} +1 -1
  12. package/dist/{chunk-GGHN2RKQ.js → chunk-E5VF3Y65.js} +69 -3
  13. package/dist/{chunk-V6JNTCPS.js → chunk-JLCTF5HY.js} +8 -2
  14. package/dist/{chunk-YU5MPQXB.js → chunk-LXY3BRKQ.js} +2 -2
  15. package/dist/{chunk-MKWYNK4J.js → chunk-NHMG2MRJ.js} +2 -2
  16. package/dist/{chunk-WXIYV2PO.js → chunk-OPVLQOOB.js} +44 -13
  17. package/dist/{chunk-SMI7Y77B.js → chunk-ORXOMW7M.js} +265 -190
  18. package/dist/{chunk-W4VHP2JW.js → chunk-SYAEM5DM.js} +1 -1
  19. package/dist/{chunk-7NQERXNY.js → chunk-TJZ4FTU6.js} +1 -1
  20. package/dist/{chunk-CFIOUXVE.js → chunk-V5XORHKX.js} +1 -1
  21. package/dist/chunk-ZDIDJCSU.js +40 -0
  22. package/dist/components/account-view.d.ts +8 -0
  23. package/dist/components/account-view.js +10 -0
  24. package/dist/components/admin-dashboard.js +3 -3
  25. package/dist/components/edit-post-view.js +5 -5
  26. package/dist/components/index.d.ts +4 -2
  27. package/dist/components/index.js +7 -7
  28. package/dist/components/login-view.d.ts +3 -1
  29. package/dist/components/login-view.js +4 -3
  30. package/dist/components/mcp-tokens-view.js +3 -3
  31. package/dist/components/media-view.js +5 -5
  32. package/dist/components/new-post-view.js +5 -5
  33. package/dist/components/plugin-settings-form.d.ts +2 -10
  34. package/dist/components/plugin-settings-form.js +5 -7
  35. package/dist/components/posts-list-view.js +3 -3
  36. package/dist/components/users-list-view.js +3 -3
  37. package/dist/{i18n-DA-aakRX.d.ts → i18n-Bd8q9aTl.d.ts} +108 -5
  38. package/dist/index.d.ts +2 -2
  39. package/dist/index.js +1 -1
  40. package/dist/metafile-esm.json +1 -1
  41. package/dist/pages/index.d.ts +21 -4
  42. package/dist/pages/index.js +54 -24
  43. package/package.json +5 -6
package/README.ja.md CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  [ampless](https://github.com/heavymoons/ampless) 向け管理 UI ライブラリ。投稿エディター(Tiptap + Markdown + HTML)、メディアマネージャー(S3 + 画像処理)、サイト / テーマ設定、ロケール対応 UI 文字列、そしてすべてを結びつける Next.js ページファクトリーを提供します。
7
7
 
8
- > **プレリリース / アルファ版。** v1.0 まではマイナーバージョンでも破壊的変更が入る可能性があります。
8
+ > **プレリリース / ベータ版。** v1.0 まではマイナーバージョンでも破壊的変更が入る可能性があります。
9
9
 
10
10
  ## なぜライブラリなのか?
11
11
 
@@ -14,7 +14,7 @@
14
14
  ## インストール
15
15
 
16
16
  ```bash
17
- npm install @ampless/admin@alpha @ampless/runtime@alpha ampless@alpha
17
+ npm install @ampless/admin@beta @ampless/runtime@beta ampless@beta
18
18
  ```
19
19
 
20
20
  ピア依存: `next`、`react`、`react-dom`、`aws-amplify`、`@aws-amplify/adapter-nextjs`。
package/README.md CHANGED
@@ -8,7 +8,7 @@ editor (Tiptap + Markdown + HTML), media manager (S3 + image processing),
8
8
  site/theme settings, locale-aware UI strings, and the Next.js page
9
9
  factories that wire it all together.
10
10
 
11
- > **Pre-release / alpha.** Breaking changes possible in any minor version until v1.0.
11
+ > **Pre-release / beta.** Breaking changes possible in any minor version until v1.0.
12
12
 
13
13
  ## Why a library?
14
14
 
@@ -20,7 +20,7 @@ template and downstream sites.
20
20
  ## Install
21
21
 
22
22
  ```bash
23
- npm install @ampless/admin@alpha @ampless/runtime@alpha ampless@alpha
23
+ npm install @ampless/admin@beta @ampless/runtime@beta ampless@beta
24
24
  ```
25
25
 
26
26
  Peer-installs: `next`, `react`, `react-dom`, `aws-amplify`,
@@ -2,7 +2,7 @@ import { NextRequest } from 'next/server';
2
2
  import { Admin } from '../index.js';
3
3
  import 'ampless';
4
4
  import '@ampless/runtime';
5
- import '../i18n-DA-aakRX.js';
5
+ import '../i18n-Bd8q9aTl.js';
6
6
  import '@aws-amplify/adapter-nextjs';
7
7
 
8
8
  /**
@@ -54,11 +54,27 @@ declare function createMediaProxyRoute(admin: Admin): {
54
54
  * 1. **Theme CSS vars**: `renderThemeCss(cssVars)` — the same `:root {…}`
55
55
  * block the public root layout emits, so the live theme's colour tokens
56
56
  * flow into the preview.
57
- * 2. **`PREVIEW_BASE_CSS`**: a self-contained typography approximation
58
- * (h1-h6, p, ul/ol/li, a, code, pre, blockquote, img, table, hr, dark
59
- * mode). This is *not* the actual live theme stylesheet — Next.js App
60
- * Router emits hashed CSS filenames that are unknowable from a Route
61
- * Handler — but it's enough for a "readable preview".
57
+ * 2. **`PREVIEW_BASE_CSS`** (`id="ampless-preview-base"`): a self-contained
58
+ * typography approximation (h1-h6, p, ul/ol/li, a, code, pre, blockquote,
59
+ * img, table, hr, dark mode). This is *not* the actual live theme stylesheet
60
+ * — Next.js App Router emits hashed CSS filenames that are unknowable from
61
+ * a Route Handler — but it's enough for a "readable preview" when the
62
+ * client-side injection has no stylesheets to collect.
63
+ *
64
+ * ## Two-stage design: client injection primary, base CSS fallback
65
+ *
66
+ * Before the iframe's srcDoc is set, the client helper `buildPreviewSrcDoc`
67
+ * (packages/admin/src/lib/preview-srcdoc.ts) collects the parent admin page's
68
+ * actual compiled stylesheets (`link[rel="stylesheet"]` absolute hrefs and
69
+ * inline `<style>` blocks) and injects them right after `<head>` in the
70
+ * document returned here. When ≥ 1 stylesheet is collected the fallback
71
+ * `<style id="ampless-preview-base">` block is stripped (it would compete with
72
+ * the real theme CSS). When 0 are collected (e.g. SSR path or no stylesheets
73
+ * yet), the fallback is kept so the preview stays readable.
74
+ *
75
+ * This gives pixel-accurate theme rendering (drop caps, theme tokens, dark
76
+ * mode) in the preview without requiring the Route Handler to know the hashed
77
+ * CSS bundle filenames.
62
78
  *
63
79
  * ## Why a Route Handler (not a Server Action)?
64
80
  *
@@ -88,6 +104,17 @@ declare function createMediaProxyRoute(admin: Admin): {
88
104
  * group + middleware, but we add an explicit check here as defence-in-depth
89
105
  * against the middleware gate being misconfigured.
90
106
  */
91
- declare function createPreviewRouteHandler(admin: Admin): (req: Request) => Promise<Response>;
107
+ interface PreviewRouteHandlerOptions {
108
+ /**
109
+ * CSS class string applied to the `<main>` wrapper in the preview document.
110
+ * Defaults to `'prose prose-neutral dark:prose-invert max-w-none'` which
111
+ * matches the typical blog theme `#post-body` wrapper. Sites that use a
112
+ * different wrapper class (e.g. a custom typography plugin) can override
113
+ * this so the theme's `.prose`-scoped CSS selectors apply correctly inside
114
+ * the preview iframe.
115
+ */
116
+ bodyClassName?: string;
117
+ }
118
+ declare function createPreviewRouteHandler(admin: Admin, options?: PreviewRouteHandlerOptions): (req: Request) => Promise<Response>;
92
119
 
93
120
  export { createMediaProxyRoute, createPreviewRouteHandler };
package/dist/api/index.js CHANGED
@@ -58,7 +58,7 @@ async function signMediaUrl({
58
58
 
59
59
  // src/api/preview-route.tsx
60
60
  import { renderThemeCss } from "@ampless/runtime";
61
- import { Fragment, jsxs } from "react/jsx-runtime";
61
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
62
62
  var PREVIEW_BASE_CSS = `
63
63
  /* ampless admin preview \u2014 typography approximation */
64
64
  *,
@@ -230,7 +230,10 @@ em { font-style: italic; }
230
230
  td { border-bottom-color: #1e293b; }
231
231
  }
232
232
  `.trim();
233
- function createPreviewRouteHandler(admin) {
233
+ function createPreviewRouteHandler(admin, options = {}) {
234
+ const {
235
+ bodyClassName = "prose prose-neutral dark:prose-invert max-w-none"
236
+ } = options;
234
237
  return async function POST(req) {
235
238
  const session = await admin.getServerSession();
236
239
  if (!admin.isEditor(session)) {
@@ -247,8 +250,10 @@ function createPreviewRouteHandler(admin) {
247
250
  await ampless.renderBody(draft),
248
251
  await ampless.publicPostScriptsForPage([draft])
249
252
  ] });
253
+ const headNode = await ampless.publicHeadForPreview();
250
254
  const { renderToStaticMarkup } = await import("react-dom/server");
251
255
  const fragment = renderToStaticMarkup(node);
256
+ const headMarkup = headNode ? renderToStaticMarkup(/* @__PURE__ */ jsx(Fragment, { children: headNode })) : "";
252
257
  let themeCssBlock = "";
253
258
  try {
254
259
  const themeConfig = await admin.loadThemeConfig();
@@ -257,7 +262,7 @@ function createPreviewRouteHandler(admin) {
257
262
  } catch (err) {
258
263
  console.warn("[ampless admin] preview theme CSS unavailable:", err);
259
264
  }
260
- const html = `<!doctype html><html><head><meta charset="utf-8">` + (themeCssBlock ? `<style>${themeCssBlock}</style>` : "") + `<style>${PREVIEW_BASE_CSS}</style></head><body class="ampless-preview"><main>${fragment}</main></body></html>`;
265
+ const html = `<!doctype html><html><head><meta charset="utf-8">` + (themeCssBlock ? `<style>${themeCssBlock}</style>` : "") + `<style id="ampless-preview-base">${PREVIEW_BASE_CSS}</style>` + headMarkup + `</head><body class="ampless-preview"><main class="${bodyClassName}">${fragment}</main></body></html>`;
261
266
  return new Response(html, {
262
267
  headers: {
263
268
  "Content-Type": "text/html; charset=utf-8",
@@ -3,13 +3,13 @@ import {
3
3
  ImageUploadDialog,
4
4
  createMediaRow,
5
5
  getMediaProcessingDefaults
6
- } from "./chunk-HN3UFHP7.js";
6
+ } from "./chunk-ANME5KDN.js";
7
7
  import {
8
8
  publicMediaUrl
9
9
  } from "./chunk-2ITWLRYF.js";
10
10
  import {
11
11
  useT
12
- } from "./chunk-K44QF3MV.js";
12
+ } from "./chunk-4OFRX6QX.js";
13
13
 
14
14
  // src/components/media-uploader.tsx
15
15
  import { useState, useEffect, useCallback, useRef } from "react";
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import {
3
3
  translate
4
- } from "./chunk-OFPNBZKP.js";
4
+ } from "./chunk-7W7LAQXY.js";
5
5
 
6
6
  // src/components/i18n-provider.tsx
7
7
  import { createContext, useContext, useMemo } from "react";