@commonpub/layer 0.1.0

package/components/blocks/BlockDownloadsView.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+interface FileItem {
+  name: string;
+  url: string;
+  size?: string;
+  type?: string;
+}
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const files = computed<FileItem[]>(() => {
+  const raw = props.content.files;
+  if (!Array.isArray(raw)) return [];
+  return raw as FileItem[];
+});
+</script>
+
+<template>
+  <div v-if="files.length > 0" class="cpub-block-downloads">
+    <div class="cpub-dl-header">
+      <i class="fa-solid fa-download cpub-dl-icon"></i>
+      <span class="cpub-dl-title">Downloads</span>
+      <span class="cpub-dl-count">{{ files.length }} file{{ files.length !== 1 ? 's' : '' }}</span>
+    </div>
+    <div class="cpub-dl-list">
+      <div v-for="(file, i) in files" :key="i" class="cpub-dl-item">
+        <div class="cpub-dl-file-icon"><i class="fa-solid fa-file-arrow-down"></i></div>
+        <div class="cpub-dl-info">
+          <a :href="file.url" class="cpub-dl-name" download>{{ file.name }}</a>
+          <span v-if="file.size" class="cpub-dl-size">{{ file.size }}</span>
+        </div>
+        <a :href="file.url" class="cpub-dl-btn" download aria-label="Download">
+          <i class="fa-solid fa-download"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-downloads {
+  border: var(--border-width-default) solid var(--border);
+  margin: 20px 0;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-dl-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-dl-icon { font-size: 12px; color: var(--accent); }
+.cpub-dl-title { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
+.cpub-dl-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+
+.cpub-dl-list { display: flex; flex-direction: column; }
+
+.cpub-dl-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-dl-item:last-child { border-bottom: none; }
+
+.cpub-dl-file-icon {
+  width: 32px;
+  height: 32px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
+.cpub-dl-info { flex: 1; min-width: 0; }
+
+.cpub-dl-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--accent);
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cpub-dl-name:hover { text-decoration: underline; }
+
+.cpub-dl-size {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-dl-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border);
+  color: var(--accent);
+  font-size: 12px;
+  text-decoration: none;
+  flex-shrink: 0;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.cpub-dl-btn:hover {
+  background: var(--accent);
+  color: var(--color-text-inverse);
+}
+</style>

package/components/blocks/BlockEmbedView.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const url = computed(() => {
+  const raw = (props.content.url as string) || '';
+  // Only allow http/https URLs — block javascript:, data:, etc.
+  if (raw && (raw.startsWith('https://') || raw.startsWith('http://'))) return raw;
+  return '';
+});
+</script>
+
+<template>
+  <div v-if="url" class="cpub-block-embed">
+    <div class="cpub-embed-label">
+      <i class="fa-solid fa-globe"></i> Embed
+    </div>
+    <div class="cpub-embed-wrap">
+      <iframe :src="url" class="cpub-embed-iframe" frameborder="0" loading="lazy" title="Embedded content" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-embed {
+  margin: 24px 0;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-embed-label {
+  padding: 6px 12px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cpub-embed-label i { color: var(--accent); }
+
+.cpub-embed-wrap {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.cpub-embed-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/components/blocks/BlockGalleryView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+interface GalleryImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const images = computed<GalleryImage[]>(() => {
+  const raw = props.content.images;
+  if (!Array.isArray(raw)) return [];
+  return raw as GalleryImage[];
+});
+</script>
+
+<template>
+  <div v-if="images.length > 0" class="cpub-block-gallery">
+    <div class="cpub-gallery-grid">
+      <figure v-for="(img, idx) in images" :key="idx" class="cpub-gallery-item">
+        <img :src="img.src" :alt="img.alt" class="cpub-gallery-img" loading="lazy" />
+        <figcaption v-if="img.caption" class="cpub-gallery-caption">{{ img.caption }}</figcaption>
+      </figure>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-gallery {
+  margin: 24px 0;
+}
+
+.cpub-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+}
+
+.cpub-gallery-item {
+  margin: 0;
+}
+
+.cpub-gallery-img {
+  width: 100%;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+  display: block;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-gallery-caption {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  padding: 4px 0;
+}
+</style>

package/components/blocks/BlockHeadingView.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const level = computed(() => Math.min(Math.max((props.content.level as number) || 2, 1), 6));
+const text = computed(() => (props.content.text as string) || '');
+const slug = computed(() => text.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''));
+const tag = computed(() => `h${level.value}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+</script>
+
+<template>
+  <component :is="tag" :id="slug" class="cpub-block-heading" :class="`cpub-heading-${level}`">
+    {{ text }}
+  </component>
+</template>
+
+<style scoped>
+.cpub-block-heading {
+  color: var(--text);
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.cpub-heading-1 { font-size: 28px; font-weight: 700; margin: 48px 0 16px; }
+.cpub-heading-2 { font-size: 22px; font-weight: 700; margin: 40px 0 12px; padding-bottom: 8px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-heading-3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
+.cpub-heading-4 { font-size: 15px; font-weight: 600; margin: 24px 0 6px; }
+.cpub-heading-5 { font-size: 14px; font-weight: 600; margin: 20px 0 6px; }
+.cpub-heading-6 { font-size: 13px; font-weight: 600; margin: 16px 0 4px; text-transform: uppercase; letter-spacing: 0.05em; }
+</style>

package/components/blocks/BlockImageView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const src = computed(() => (props.content.src as string) || (props.content.url as string) || '');
+const alt = computed(() => (props.content.alt as string) || '');
+const caption = computed(() => (props.content.caption as string) || '');
+</script>
+
+<template>
+  <figure v-if="src" class="cpub-block-image">
+    <img :src="src" :alt="alt" class="cpub-image-img" loading="lazy" />
+    <figcaption v-if="caption" class="cpub-image-caption">{{ caption }}</figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.cpub-block-image {
+  margin: 24px 0;
+}
+
+.cpub-image-img {
+  width: 100%;
+  display: block;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-image-caption {
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  padding: 8px 0;
+  text-align: center;
+}
+</style>

package/components/blocks/BlockMarkdownView.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { markdownToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+import { sanitizeBlockHtml } from '../../composables/useSanitize';
+
+const props = defineProps<{
+  content: { source: string };
+}>();
+
+const renderedBlocks = computed(() => {
+  if (!props.content.source?.trim()) return [];
+  try {
+    return markdownToBlockTuples(props.content.source);
+  } catch {
+    return [];
+  }
+});
+
+/** Type-safe block content accessors — cast content to record for dynamic key access */
+function bStr(block: BlockTuple, key: string): string {
+  return String((block[1] as Record<string, unknown>)[key] ?? '');
+}
+function bNum(block: BlockTuple, key: string): number {
+  return Number((block[1] as Record<string, unknown>)[key]) || 0;
+}
+function bHas(block: BlockTuple, key: string): boolean {
+  return !!(block[1] as Record<string, unknown>)[key];
+}
+</script>
+
+<template>
+  <div class="cpub-markdown-view">
+    <div v-for="(block, i) in renderedBlocks" :key="i" class="cpub-md-block">
+      <template v-if="block[0] === 'heading'">
+        <component :is="`h${Math.min(bNum(block, 'level'), 4)}`" class="cpub-md-heading">
+          {{ bStr(block, 'text') }}
+        </component>
+      </template>
+      <template v-else-if="block[0] === 'text'">
+        <div class="cpub-md-text" v-html="sanitizeBlockHtml(bStr(block, 'html'))" />
+      </template>
+      <template v-else-if="block[0] === 'code'">
+        <pre class="cpub-md-code"><code :class="`language-${bStr(block, 'language')}`">{{ bStr(block, 'code') }}</code></pre>
+      </template>
+      <template v-else-if="block[0] === 'image'">
+        <figure class="cpub-md-figure">
+          <img :src="bStr(block, 'src')" :alt="bStr(block, 'alt')" loading="lazy" />
+          <figcaption v-if="bHas(block, 'caption')">{{ bStr(block, 'caption') }}</figcaption>
+        </figure>
+      </template>
+      <template v-else-if="block[0] === 'callout'">
+        <div :class="['cpub-md-callout', `cpub-md-callout--${bStr(block, 'variant') || 'info'}`]">
+          <div v-html="sanitizeBlockHtml(bStr(block, 'html'))" />
+        </div>
+      </template>
+      <template v-else-if="block[0] === 'quote'">
+        <blockquote class="cpub-md-quote" v-html="sanitizeBlockHtml(bStr(block, 'html'))" />
+      </template>
+      <template v-else-if="block[0] === 'divider'">
+        <hr class="cpub-md-hr" />
+      </template>
+      <template v-else-if="bHas(block, 'html')">
+        <div class="cpub-md-text" v-html="sanitizeBlockHtml(bStr(block, 'html'))" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-markdown-view {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cpub-md-heading { margin: 20px 0 8px; }
+h1.cpub-md-heading { font-size: 1.75rem; font-weight: 800; }
+h2.cpub-md-heading { font-size: 1.375rem; font-weight: 700; }
+h3.cpub-md-heading { font-size: 1.125rem; font-weight: 700; }
+h4.cpub-md-heading { font-size: 1rem; font-weight: 600; }
+
+.cpub-md-text { font-size: 15px; line-height: 1.75; margin-bottom: 14px; }
+.cpub-md-text :deep(p) { margin-bottom: 12px; }
+.cpub-md-text :deep(ul), .cpub-md-text :deep(ol) { padding-left: 24px; margin-bottom: 12px; }
+.cpub-md-text :deep(li) { margin-bottom: 4px; }
+.cpub-md-text :deep(a) { color: var(--accent); text-decoration: underline; }
+.cpub-md-text :deep(strong) { font-weight: 600; }
+.cpub-md-text :deep(code) { font-family: var(--font-mono); font-size: 0.875em; padding: 1px 4px; background: var(--surface2); border-radius: 0; }
+.cpub-md-text :deep(table) { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
+.cpub-md-text :deep(th), .cpub-md-text :deep(td) { padding: 6px 10px; border: var(--border-width-default) solid var(--border); text-align: left; }
+.cpub-md-text :deep(th) { background: var(--surface2); font-weight: 600; }
+
+.cpub-md-code {
+  background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: 0;
+  padding: 14px 16px; font-family: var(--font-mono); font-size: 13px;
+  line-height: 1.6; overflow-x: auto; margin-bottom: 14px;
+}
+
+.cpub-md-figure { margin-bottom: 14px; }
+.cpub-md-figure img { max-width: 100%; border-radius: 0; }
+.cpub-md-figure figcaption { font-size: 12px; color: var(--text-dim); margin-top: 6px; text-align: center; }
+
+.cpub-md-callout {
+  padding: 12px 16px; border-radius: 0; border-left: 3px solid;
+  margin-bottom: 14px; font-size: 14px; line-height: 1.6;
+}
+.cpub-md-callout--info { background: var(--teal-bg); border-color: var(--teal); }
+.cpub-md-callout--tip { background: var(--green-bg); border-color: var(--green); }
+.cpub-md-callout--warning { background: var(--yellow-bg); border-color: var(--yellow); }
+.cpub-md-callout--danger { background: var(--red-bg); border-color: var(--red); }
+
+.cpub-md-quote {
+  border-left: 3px solid var(--border); padding: 8px 16px;
+  color: var(--text-dim); font-style: italic; margin-bottom: 14px;
+}
+
+.cpub-md-hr { border: none; border-top: var(--border-width-default) solid var(--border); margin: 20px 0; }
+</style>

package/components/blocks/BlockMathView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const expression = computed(() => (props.content.expression as string) || '');
+const label = computed(() => (props.content.label as string) || '');
+</script>
+
+<template>
+  <div class="cpub-block-math">
+    <div v-if="label" class="cpub-math-label">{{ label }}</div>
+    <pre class="cpub-math-expression"><code>{{ expression }}</code></pre>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-math {
+  font-family: var(--font-mono);
+  background: var(--border);
+  border: var(--border-width-default) solid var(--border);
+  padding: 16px 18px;
+  margin: 16px 0;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-math-label {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+
+.cpub-math-expression {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--surface);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.cpub-math-expression code {
+  font-family: inherit;
+}
+</style>

package/components/blocks/BlockPartsListView.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+interface Part {
+  name: string;
+  qty?: number;
+  quantity?: number;
+  price?: number;
+  notes?: string;
+  url?: string;
+  required?: boolean;
+}
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const parts = computed<Part[]>(() => {
+  const raw = props.content.parts;
+  if (!Array.isArray(raw)) return [];
+  return raw as Part[];
+});
+
+const totalPrice = computed(() => {
+  return parts.value.reduce((sum, p) => sum + (p.price ?? 0) * ((p.qty ?? p.quantity) ?? 1), 0);
+});
+</script>
+
+<template>
+  <div v-if="parts.length > 0" class="cpub-block-parts">
+    <div class="cpub-parts-header">
+      <i class="fa-solid fa-list-check cpub-parts-icon"></i>
+      <span class="cpub-parts-title">Parts List</span>
+      <span class="cpub-parts-count">
+        {{ parts.length }} item{{ parts.length !== 1 ? 's' : '' }}
+        <template v-if="totalPrice > 0"> · ${{ totalPrice.toFixed(2) }} est.</template>
+      </span>
+    </div>
+    <table class="cpub-parts-table">
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th class="cpub-col-qty">Qty</th>
+          <th>Notes</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(part, idx) in parts" :key="idx">
+          <td class="cpub-part-name">
+            <a v-if="part.url" :href="part.url" target="_blank" rel="noopener">{{ part.name }}</a>
+            <span v-else>{{ part.name || 'Unknown' }}</span>
+          </td>
+          <td class="cpub-col-qty">{{ (part.qty ?? part.quantity) ?? 1 }}</td>
+          <td class="cpub-part-notes">{{ part.notes || '—' }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-parts {
+  border: var(--border-width-default) solid var(--border);
+  margin: 24px 0;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-parts-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-parts-icon { font-size: 12px; color: var(--accent); }
+.cpub-parts-title { font-size: 12px; font-weight: 600; color: var(--text); }
+.cpub-parts-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+
+.cpub-parts-table { width: 100%; border-collapse: collapse; }
+
+.cpub-parts-table th {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-align: left;
+  padding: 8px 12px;
+  background: var(--text);
+  color: var(--surface);
+}
+
+.cpub-parts-table td {
+  padding: 10px 12px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+.cpub-part-name { font-weight: 500; color: var(--text); }
+.cpub-part-name a { color: var(--accent); text-decoration: none; }
+.cpub-part-name a:hover { text-decoration: underline; }
+.cpub-col-qty { width: 50px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
+.cpub-part-notes { font-size: 12px; color: var(--text-faint); }
+</style>