@cedros/data-react 0.1.0

package/dist/admin/styles.css

@@ -0,0 +1,533 @@
+.cedros-data {
+  --cd-bg: var(--admin-bg, var(--cedros-background, #ffffff));
+  --cd-fg: var(--admin-fg, var(--cedros-foreground, #0f172a));
+  --cd-muted: var(--admin-muted, var(--cedros-muted-foreground, #64748b));
+  --cd-muted-bg: var(--admin-muted-bg, var(--cedros-muted, #f1f5f9));
+  --cd-border: var(--admin-border, var(--cedros-border, #e2e8f0));
+  --cd-accent: var(--admin-accent, var(--cedros-accent, #f1f5f9));
+  --cd-ring: var(--admin-ring, var(--cedros-ring, #0f172a));
+  --cd-primary: var(--admin-primary, var(--cedros-primary, #0f172a));
+  --cd-primary-fg: var(--admin-primary-fg, var(--cedros-primary-foreground, #f8fafc));
+  --cd-success: var(--admin-success, #16a34a);
+  --cd-error: var(--admin-error, #dc2626);
+  --cd-danger-bg: color-mix(in srgb, var(--cd-error) 12%, transparent);
+  --cd-danger-border: color-mix(in srgb, var(--cd-error) 26%, transparent);
+  --cd-radius: var(--admin-radius, 0.5rem);
+  --cd-shadow: var(--admin-shadow-card, 0 1px 2px rgb(0 0 0 / 0.06));
+  color: var(--cd-fg);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cedros-dark .cedros-data,
+.cedros-admin.cedros-admin--dark .cedros-data {
+  --cd-bg: hsl(222.2, 84%, 4.9%);
+  --cd-fg: hsl(210, 40%, 98%);
+  --cd-muted: hsl(215, 20.2%, 65.1%);
+  --cd-muted-bg: hsl(217.2, 32.6%, 17.5%);
+  --cd-border: hsl(217.2, 32.6%, 17.5%);
+  --cd-accent: hsl(217.2, 32.6%, 17.5%);
+  --cd-ring: hsl(212.7, 26.8%, 83.9%);
+  --cd-primary: hsl(210, 40%, 98%);
+  --cd-primary-fg: hsl(222.2, 47.4%, 11.2%);
+  --cd-success: hsl(142, 71%, 45%);
+  --cd-error: hsl(0, 84.2%, 60.2%);
+}
+
+.cedros-data__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.cedros-data__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.cedros-data__subtitle {
+  margin: 0.35rem 0 0;
+  font-size: 0.86rem;
+  color: var(--cd-muted);
+}
+
+.cedros-data-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.cedros-data-grid--page {
+  grid-template-columns: 260px minmax(0, 1fr);
+}
+
+.cedros-data-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cedros-data-card {
+  border: 1px solid var(--cd-border);
+  border-radius: var(--cd-radius);
+  background: color-mix(in srgb, var(--cd-bg) 92%, var(--cd-accent) 8%);
+  box-shadow: var(--cd-shadow);
+  min-width: 0;
+}
+
+.cedros-data-card__header {
+  border-bottom: 1px solid var(--cd-border);
+  padding: 0.9rem 1rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.cedros-data-card__title {
+  margin: 0;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.cedros-data-card__subtitle {
+  margin: 0.25rem 0 0;
+  font-size: 0.8rem;
+  color: var(--cd-muted);
+}
+
+.cedros-data-card__body {
+  padding: 0.9rem 1rem;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.cedros-data-btn {
+  height: 2.2rem;
+  border-radius: calc(var(--cd-radius) - 1px);
+  padding: 0 0.85rem;
+  border: 1px solid transparent;
+  font-size: 0.82rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--cd-fg);
+  background: var(--cd-accent);
+  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
+}
+
+.cedros-data-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.cedros-data-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cedros-data-btn:focus-visible,
+.cedros-data-input:focus-visible,
+.cedros-data-select:focus-visible,
+.cedros-data-textarea:focus-visible,
+.cedros-data-list-item:focus-visible {
+  outline: none;
+  border-color: var(--cd-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-ring) 14%, transparent);
+}
+
+.cedros-data-btn--primary {
+  background: var(--cd-primary);
+  color: var(--cd-primary-fg);
+}
+
+.cedros-data-btn--secondary {
+  border-color: var(--cd-border);
+}
+
+.cedros-data-btn--ghost {
+  background: transparent;
+  border-color: var(--cd-border);
+}
+
+.cedros-data-btn--danger {
+  background: var(--cd-danger-bg);
+  border-color: var(--cd-danger-border);
+  color: var(--cd-error);
+}
+
+.cedros-data-btn--sm {
+  height: 1.95rem;
+  padding: 0 0.6rem;
+  font-size: 0.75rem;
+}
+
+.cedros-data-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.cedros-data-field {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.cedros-data-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cd-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.cedros-data-checkbox-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.82rem;
+  color: var(--cd-fg);
+}
+
+.cedros-data-checkbox-row input[type="checkbox"] {
+  accent-color: var(--cd-primary);
+}
+
+.cedros-data-input,
+.cedros-data-select,
+.cedros-data-textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  color: var(--cd-fg);
+  background: color-mix(in srgb, var(--cd-bg) 88%, var(--cd-accent) 12%);
+  padding: 0.6rem 0.7rem;
+  font-size: 0.82rem;
+}
+
+.cedros-data-select {
+  height: 2.2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.cedros-data-textarea {
+  resize: vertical;
+  min-height: 280px;
+  line-height: 1.45;
+  font-family: var(--admin-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+.cedros-data-textarea--code {
+  tab-size: 2;
+  white-space: pre;
+}
+
+.cedros-data-list {
+  max-height: 320px;
+  overflow: auto;
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  padding: 0.4rem;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.cedros-data-list-item {
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 3px);
+  background: transparent;
+  color: var(--cd-fg);
+  padding: 0.5rem 0.55rem;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: border-color 130ms ease, background 130ms ease;
+}
+
+.cedros-data-list-item:hover {
+  background: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+}
+
+.cedros-data-list-item--active {
+  border-color: var(--cd-ring);
+  background: color-mix(in srgb, var(--cd-accent) 70%, transparent);
+}
+
+.cedros-data-key {
+  font-family: var(--admin-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.75rem;
+  color: var(--cd-muted);
+}
+
+.cedros-data-empty {
+  color: var(--cd-muted);
+  font-size: 0.82rem;
+}
+
+.cedros-data-status {
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  font-size: 0.81rem;
+}
+
+.cedros-data-status--neutral {
+  color: var(--cd-fg);
+  background: color-mix(in srgb, var(--cd-bg) 92%, var(--cd-accent) 8%);
+}
+
+.cedros-data-status--success {
+  color: var(--cd-success);
+  border-color: color-mix(in srgb, var(--cd-success) 35%, var(--cd-border));
+  background: color-mix(in srgb, var(--cd-success) 10%, transparent);
+}
+
+.cedros-data-status--error {
+  color: var(--cd-error);
+  border-color: color-mix(in srgb, var(--cd-error) 35%, var(--cd-border));
+  background: color-mix(in srgb, var(--cd-error) 10%, transparent);
+}
+
+.cedros-data-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid var(--cd-border);
+  color: var(--cd-muted);
+  font-size: 0.72rem;
+  line-height: 1;
+  padding: 0.26rem 0.5rem;
+  background: color-mix(in srgb, var(--cd-bg) 82%, var(--cd-accent) 18%);
+}
+
+.cedros-data-table-wrap {
+  width: 100%;
+  overflow: auto;
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+}
+
+.cedros-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.cedros-data-table th,
+.cedros-data-table td {
+  text-align: left;
+  padding: 0.55rem 0.65rem;
+  border-bottom: 1px solid var(--cd-border);
+  vertical-align: top;
+}
+
+.cedros-data-table th {
+  font-size: 0.73rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--cd-muted);
+  background: color-mix(in srgb, var(--cd-bg) 84%, var(--cd-accent) 16%);
+}
+
+.cedros-data-table tbody tr:hover {
+  background: color-mix(in srgb, var(--cd-accent) 52%, transparent);
+}
+
+.cedros-data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.cedros-data-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.cedros-data-toolbar__left,
+.cedros-data-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+
+.cedros-data-chip-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+
+.cedros-data-chip {
+  border: 1px solid var(--cd-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--cd-bg) 82%, var(--cd-accent) 18%);
+  color: var(--cd-muted);
+  padding: 0.28rem 0.6rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.cedros-data-chip--active {
+  border-color: var(--cd-ring);
+  color: var(--cd-fg);
+  background: color-mix(in srgb, var(--cd-accent) 66%, transparent);
+}
+
+.cedros-data-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.cedros-data-diff {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.75rem;
+}
+
+.cedros-data-diff__block {
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  padding: 0.6rem;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.cedros-data-diff__title {
+  margin: 0;
+  font-size: 0.8rem;
+}
+
+.cedros-data-diff__entry {
+  font-size: 0.76rem;
+  border: 1px solid var(--cd-border);
+  border-radius: 0.4rem;
+  padding: 0.34rem 0.45rem;
+  background: color-mix(in srgb, var(--cd-bg) 84%, var(--cd-accent) 16%);
+}
+
+.cedros-data-diff__entry--success {
+  color: var(--cd-success);
+}
+
+.cedros-data-diff__entry--error {
+  color: var(--cd-error);
+}
+
+.cedros-data-form-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 180px 140px auto;
+  gap: 0.55rem;
+  align-items: end;
+}
+
+.cedros-data-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 1000;
+}
+
+.cedros-data-dialog {
+  width: min(420px, 100%);
+  border: 1px solid var(--cd-border);
+  border-radius: var(--cd-radius);
+  background: var(--cd-bg);
+  color: var(--cd-fg);
+  padding: 0.9rem 1rem;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.cedros-data-dialog__title {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.cedros-data-dialog__description {
+  margin: 0;
+  color: var(--cd-muted);
+  font-size: 0.85rem;
+}
+
+.cedros-inline-alert {
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  padding: 0.55rem 0.7rem;
+  font-size: 0.82rem;
+}
+
+.cedros-inline-alert--info {
+  color: var(--cd-fg);
+  background: color-mix(in srgb, var(--cd-bg) 90%, var(--cd-accent) 10%);
+}
+
+.cedros-inline-alert--success {
+  color: var(--cd-success);
+  background: color-mix(in srgb, var(--cd-success) 10%, transparent);
+  border-color: color-mix(in srgb, var(--cd-success) 35%, var(--cd-border));
+}
+
+.cedros-inline-alert--error {
+  color: var(--cd-error);
+  background: color-mix(in srgb, var(--cd-error) 10%, transparent);
+  border-color: color-mix(in srgb, var(--cd-error) 35%, var(--cd-border));
+}
+
+.cedros-toast-viewport {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  display: grid;
+  gap: 0.45rem;
+  z-index: 1200;
+}
+
+.cedros-toast {
+  text-align: left;
+  width: min(360px, calc(100vw - 2rem));
+  border: 1px solid var(--cd-border);
+  border-radius: calc(var(--cd-radius) - 1px);
+  background: var(--cd-bg);
+  color: var(--cd-fg);
+  padding: 0.6rem 0.72rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  box-shadow: var(--cd-shadow);
+}
+
+.cedros-toast--success {
+  color: var(--cd-success);
+  border-color: color-mix(in srgb, var(--cd-success) 35%, var(--cd-border));
+}
+
+.cedros-toast--error {
+  color: var(--cd-error);
+  border-color: color-mix(in srgb, var(--cd-error) 35%, var(--cd-border));
+}
+
+@import "./media.css";
+
+@media (max-width: 980px) {
+  .cedros-data-grid--page,
+  .cedros-data-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .cedros-data-form-row {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/admin/types.d.ts

@@ -0,0 +1,85 @@
+import type { ComponentType, ReactNode } from "react";
+export type PluginId = string;
+export type SectionId = string;
+export type QualifiedSectionId = `${PluginId}:${SectionId}`;
+export type PluginPermission = string;
+export interface AdminSectionConfig {
+    id: SectionId;
+    label: string;
+    icon: ReactNode;
+    group?: string;
+    order?: number;
+    requiredPermission?: PluginPermission;
+    badge?: ReactNode;
+}
+export interface AdminGroupConfig {
+    id: string;
+    label: string;
+    order: number;
+    icon?: ReactNode;
+    defaultCollapsed?: boolean;
+}
+export interface AdminSectionProps {
+    pluginContext: PluginContext;
+    pageSize: number;
+    refreshInterval: number;
+}
+export interface PluginContext {
+    serverUrl: string;
+    userId?: string;
+    getAccessToken: () => string | null;
+    hasPermission: (permission: PluginPermission) => boolean;
+    orgId?: string;
+    pluginData?: Record<string, unknown>;
+}
+export interface HostContext {
+    cedrosLogin?: {
+        user: {
+            id: string;
+            email?: string;
+            name?: string;
+            picture?: string;
+        } | null;
+        getAccessToken: () => string | null;
+        serverUrl: string;
+    };
+    cedrosPay?: {
+        walletAddress?: string;
+        jwtToken?: string;
+        serverUrl: string;
+    };
+    org?: {
+        orgId: string;
+        role: string;
+        permissions: string[];
+    };
+    dashboardPermissions?: {
+        canAccess: (sectionId: string) => boolean;
+    };
+    custom?: Record<string, unknown>;
+}
+export interface AdminPlugin {
+    id: PluginId;
+    name: string;
+    version: string;
+    sections: AdminSectionConfig[];
+    groups?: AdminGroupConfig[];
+    components: Record<SectionId, ComponentType<AdminSectionProps>>;
+    createPluginContext: (hostContext: HostContext) => PluginContext;
+    checkPermission: (permission: PluginPermission, hostContext: HostContext) => boolean;
+    cssNamespace: string;
+    onRegister?: (registry: PluginRegistry) => void;
+    onUnregister?: () => void;
+}
+export interface PluginRegistry {
+    register(plugin: AdminPlugin): void;
+    unregister(pluginId: PluginId): void;
+    get(pluginId: PluginId): AdminPlugin | undefined;
+    getAll(): AdminPlugin[];
+    subscribe(listener: (plugins: AdminPlugin[]) => void): () => void;
+}
+export interface ResolvedSection extends AdminSectionConfig {
+    qualifiedId: QualifiedSectionId;
+    pluginId: PluginId;
+    cssNamespace: string;
+}

package/dist/admin/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { DefaultPageKey, PageTemplateContract } from "./templates.js";
+export { defaultPageTemplates } from "./templates.js";
+export * from "./admin/index.js";
+export * from "./site-templates/index.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { defaultPageTemplates } from "./templates.js";
+export * from "./admin/index.js";
+export * from "./site-templates/index.js";

package/dist/react/CmsContent.d.ts

@@ -0,0 +1,20 @@
+export interface CmsContentProps {
+    /** Raw HTML content from the CMS to render. */
+    html: string;
+    /** Optional wrapper CSS class name. */
+    className?: string;
+    /** Override the default set of allowed HTML tags. */
+    allowedTags?: string[];
+    /** Default target attribute for external links (e.g. "_blank"). */
+    linkTarget?: string;
+    /** Optional callback invoked when a link inside the content is clicked. */
+    onLinkClick?: (href: string, event: React.MouseEvent) => void;
+}
+/**
+ * Renders sanitized CMS HTML content.
+ *
+ * Strips dangerous tags (script, iframe, object, embed), event handler
+ * attributes, and disallowed URL protocols. Adds rel="noopener noreferrer"
+ * to external links automatically.
+ */
+export declare function CmsContent({ html, className, allowedTags, linkTarget, onLinkClick, }: CmsContentProps): React.JSX.Element;

package/dist/react/CmsContent.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { sanitizeCmsHtml } from "./sanitize.js";
+/**
+ * Renders sanitized CMS HTML content.
+ *
+ * Strips dangerous tags (script, iframe, object, embed), event handler
+ * attributes, and disallowed URL protocols. Adds rel="noopener noreferrer"
+ * to external links automatically.
+ */
+export function CmsContent({ html, className, allowedTags, linkTarget, onLinkClick, }) {
+    const sanitizeOptions = {
+        allowedTags,
+        linkTarget,
+    };
+    const sanitizedHtml = sanitizeCmsHtml(html, sanitizeOptions);
+    const handleClick = useCallback((event) => {
+        if (!onLinkClick)
+            return;
+        const target = event.target;
+        const anchor = target.closest("a");
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute("href");
+        if (href) {
+            onLinkClick(href, event);
+        }
+    }, [onLinkClick]);
+    return (_jsx("div", { className: className, dangerouslySetInnerHTML: { __html: sanitizedHtml }, onClick: onLinkClick ? handleClick : undefined }));
+}

package/dist/react/entries.d.ts

@@ -0,0 +1,9 @@
+import type { CmsPageRecord, ServerFetchOptions } from "./types.js";
+/**
+ * Fetches a single blog post by slug, optionally passing visitor_id for metered reads.
+ *
+ * @param slug - The entry key / slug of the blog post
+ * @param options - Server URL and optional visitorId for metering
+ * @returns The matching CmsPageRecord or null if not found
+ */
+export declare function fetchBlogPost(slug: string, options?: ServerFetchOptions): Promise<CmsPageRecord | null>;

package/dist/react/entries.js

@@ -0,0 +1,25 @@
+import { fetchJson, resolveServerUrl } from "./fetch.js";
+/**
+ * Fetches a single blog post by slug, optionally passing visitor_id for metered reads.
+ *
+ * @param slug - The entry key / slug of the blog post
+ * @param options - Server URL and optional visitorId for metering
+ * @returns The matching CmsPageRecord or null if not found
+ */
+export async function fetchBlogPost(slug, options) {
+    const serverUrl = resolveServerUrl(options);
+    const body = {
+        collection_name: "blog",
+        entry_keys: [slug],
+        limit: 1,
+        offset: 0,
+    };
+    if (options?.visitorId) {
+        body.visitor_id = options.visitorId;
+    }
+    const entries = await fetchJson(serverUrl, "/entries/query", {
+        method: "POST",
+        body,
+    });
+    return entries.length > 0 ? entries[0] : null;
+}