@commonpub/layer 0.1.0

package/components/blocks/BlockQuizView.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+interface Option {
+  text: string;
+  correct: boolean;
+}
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ answered: [correct: boolean] }>();
+
+const question = computed(() => (props.content.question as string) || '');
+const options = computed<Option[]>(() => {
+  const raw = props.content.options;
+  if (!Array.isArray(raw)) return [];
+  return raw as Option[];
+});
+
+const selectedIndex = ref<number | null>(null);
+const answered = ref(false);
+
+const isCorrect = computed(() => {
+  if (selectedIndex.value === null) return false;
+  return options.value[selectedIndex.value]?.correct ?? false;
+});
+
+function selectOption(idx: number): void {
+  if (answered.value) return;
+  selectedIndex.value = idx;
+  answered.value = true;
+  emit('answered', isCorrect.value);
+}
+
+const optionKeys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+function optionClass(idx: number): string {
+  if (!answered.value) return '';
+  if (idx === selectedIndex.value && isCorrect.value) return 'selected-correct answered';
+  if (idx === selectedIndex.value && !isCorrect.value) return 'selected-wrong answered';
+  if (options.value[idx]?.correct) return 'reveal-correct answered';
+  return 'answered';
+}
+</script>
+
+<template>
+  <div class="cpub-block-quiz">
+    <div class="cpub-quiz-header">
+      <span class="cpub-quiz-badge">QUIZ</span>
+      <span class="cpub-quiz-title-text">Knowledge Check</span>
+    </div>
+
+    <div class="cpub-quiz-body">
+      <div class="cpub-quiz-question">{{ question }}</div>
+
+      <div class="cpub-quiz-options" role="radiogroup" :aria-label="question">
+        <button
+          v-for="(opt, i) in options"
+          :key="i"
+          class="cpub-quiz-option"
+          :class="optionClass(i)"
+          role="radio"
+          :aria-checked="selectedIndex === i"
+          :aria-disabled="answered"
+          @click="selectOption(i)"
+        >
+          <span class="cpub-quiz-option-key">{{ optionKeys[i] || i + 1 }}</span>
+          <span class="cpub-quiz-option-text">{{ opt.text }}</span>
+          <span class="cpub-quiz-option-indicator">
+            <template v-if="answered && i === selectedIndex && isCorrect">
+              <i class="fa-solid fa-check"></i>
+            </template>
+            <template v-else-if="answered && i === selectedIndex && !isCorrect">
+              <i class="fa-solid fa-xmark"></i>
+            </template>
+            <template v-else-if="answered && opt.correct">
+              <i class="fa-solid fa-check"></i>
+            </template>
+          </span>
+        </button>
+      </div>
+
+      <div v-if="answered" class="cpub-quiz-feedback" :class="isCorrect ? 'correct' : 'wrong'">
+        <i :class="isCorrect ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'"></i>
+        <span>{{ isCorrect ? 'Correct!' : 'Not quite — the correct answer is highlighted above.' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-quiz {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  margin: 28px 0;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-quiz-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-quiz-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  color: var(--yellow);
+  background: var(--yellow-bg);
+  border: var(--border-width-default) solid var(--yellow-border);
+  padding: 3px 8px;
+}
+
+.cpub-quiz-title-text {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.cpub-quiz-body { padding: 16px 20px; }
+
+.cpub-quiz-question {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.cpub-quiz-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-quiz-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
+  user-select: none;
+  text-align: left;
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.cpub-quiz-option:hover:not(.answered) {
+  background: var(--surface2);
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-quiz-option.selected-correct {
+  background: var(--green-bg);
+  border-color: var(--green);
+  cursor: default;
+}
+
+.cpub-quiz-option.selected-wrong {
+  background: var(--red-bg);
+  border-color: var(--red);
+  cursor: default;
+}
+
+.cpub-quiz-option.reveal-correct {
+  background: var(--green-bg);
+  border-color: var(--green-border);
+  cursor: default;
+}
+
+.cpub-quiz-option.answered { cursor: default; box-shadow: none; }
+
+.cpub-quiz-option-key {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-faint);
+  width: 18px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.cpub-quiz-option.selected-correct .cpub-quiz-option-key { color: var(--green); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-key { color: var(--red); }
+.cpub-quiz-option.reveal-correct .cpub-quiz-option-key { color: var(--green); }
+
+.cpub-quiz-option-text {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  flex: 1;
+}
+
+.cpub-quiz-option.selected-correct .cpub-quiz-option-text { color: var(--green); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-text { color: var(--red); }
+
+.cpub-quiz-option-indicator {
+  font-size: 12px;
+  margin-top: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.cpub-quiz-option.selected-correct .cpub-quiz-option-indicator,
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-indicator,
+.cpub-quiz-option.reveal-correct .cpub-quiz-option-indicator {
+  opacity: 1;
+}
+
+.cpub-quiz-option.selected-correct .cpub-quiz-option-indicator { color: var(--green); }
+.cpub-quiz-option.selected-wrong .cpub-quiz-option-indicator { color: var(--red); }
+.cpub-quiz-option.reveal-correct .cpub-quiz-option-indicator { color: var(--green); }
+
+.cpub-quiz-feedback {
+  margin-top: 14px;
+  padding: 10px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cpub-quiz-feedback.correct {
+  background: var(--green-bg);
+  border: var(--border-width-default) solid var(--green-border);
+  color: var(--green);
+}
+
+.cpub-quiz-feedback.wrong {
+  background: var(--red-bg);
+  border: var(--border-width-default) solid var(--red-border);
+  color: var(--red);
+}
+</style>

package/components/blocks/BlockQuoteView.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { sanitizeBlockHtml } from '../../composables/useSanitize';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const html = computed(() => sanitizeBlockHtml((props.content.html as string) || (props.content.text as string) || ''));
+const attribution = computed(() => (props.content.attribution as string) || '');
+</script>
+
+<template>
+  <blockquote class="cpub-block-quote">
+    <div class="cpub-quote-text" v-html="html" />
+    <footer v-if="attribution" class="cpub-quote-attr">— {{ attribution }}</footer>
+  </blockquote>
+</template>
+
+<style scoped>
+.cpub-block-quote {
+  border-left: 4px solid var(--accent);
+  padding: 14px 20px;
+  margin: 24px 0;
+  background: var(--surface);
+}
+
+.cpub-quote-text {
+  font-size: 15px;
+  font-style: italic;
+  line-height: 1.65;
+  color: var(--text-dim);
+}
+
+.cpub-quote-text :deep(p) { margin: 0; }
+
+.cpub-quote-attr {
+  margin-top: 10px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  font-style: normal;
+}
+</style>

package/components/blocks/BlockSectionHeaderView.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const tag = computed(() => (props.content.tag as string) || '');
+const title = computed(() => (props.content.title as string) || '');
+const body = computed(() => (props.content.body as string) || '');
+</script>
+
+<template>
+  <div class="cpub-block-section-header">
+    <div v-if="tag" class="cpub-bsh-tag">{{ tag }}</div>
+    <h1 v-if="title" class="cpub-bsh-title">{{ title }}</h1>
+    <p v-if="body" class="cpub-bsh-body">{{ body }}</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-section-header {
+  padding: 8px 0 16px;
+}
+
+.cpub-bsh-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cpub-bsh-tag::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 2px;
+  background: var(--accent);
+}
+
+.cpub-bsh-title {
+  font-size: 30px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.25;
+  margin-bottom: 12px;
+  letter-spacing: -0.02em;
+}
+
+.cpub-bsh-body {
+  font-size: 15px;
+  color: var(--text-dim);
+  line-height: 1.75;
+  max-width: 560px;
+}
+</style>

package/components/blocks/BlockSliderView.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const label = computed(() => (props.content.label as string) || 'Adjust Value');
+const min = computed(() => (props.content.min as number) ?? 0);
+const max = computed(() => (props.content.max as number) ?? 100);
+const step = computed(() => (props.content.step as number) ?? 1);
+const unit = computed(() => (props.content.unit as string) || '');
+const defaultValue = computed(() => (props.content.defaultValue as number) ?? Math.round((min.value + max.value) / 2));
+
+interface FeedbackRange {
+  min: number;
+  max: number;
+  state: string;
+  message: string;
+}
+
+const feedbackRanges = computed<FeedbackRange[]>(() => {
+  const raw = props.content.feedback;
+  if (!Array.isArray(raw)) return [];
+  return raw as FeedbackRange[];
+});
+
+const value = ref(defaultValue.value);
+
+const fillPct = computed(() => {
+  return ((value.value - min.value) / (max.value - min.value)) * 100;
+});
+
+const currentFeedback = computed(() => {
+  return feedbackRanges.value.find(
+    (r) => value.value >= r.min && value.value <= r.max,
+  );
+});
+
+const feedbackState = computed(() => currentFeedback.value?.state || '');
+
+const stateIcons: Record<string, string> = {
+  slow: 'fa-solid fa-gauge-simple',
+  ok: 'fa-solid fa-circle-check',
+  high: 'fa-solid fa-triangle-exclamation',
+  low: 'fa-solid fa-gauge-simple',
+  good: 'fa-solid fa-circle-check',
+  danger: 'fa-solid fa-triangle-exclamation',
+};
+</script>
+
+<template>
+  <div class="cpub-block-slider">
+    <div class="cpub-card-header">
+      <div class="cpub-card-header-icon"><i class="fa-solid fa-sliders"></i></div>
+      <div class="cpub-card-header-label">
+        {{ label }}
+        <span>Interactive</span>
+      </div>
+    </div>
+
+    <div class="cpub-slider-value-display">{{ value }}{{ unit }}</div>
+
+    <div class="cpub-slider-track-wrap">
+      <div class="cpub-slider-fill-track" :style="{ width: fillPct + '%' }"></div>
+      <input
+        v-model.number="value"
+        type="range"
+        class="cpub-slider-input"
+        :min="min"
+        :max="max"
+        :step="step"
+        :aria-label="label"
+      />
+    </div>
+
+    <div class="cpub-slider-range-labels">
+      <span>{{ min }}{{ unit }}</span>
+      <span>{{ max }}{{ unit }}</span>
+    </div>
+
+    <div
+      v-if="currentFeedback"
+      class="cpub-slider-output"
+      :class="`state-${feedbackState}`"
+    >
+      <i :class="stateIcons[feedbackState] || 'fa-solid fa-circle-info'"></i>
+      <span class="cpub-slider-output-text">{{ currentFeedback.message }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-slider {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  border-left: 4px solid var(--accent);
+  padding: 22px 24px;
+  margin: 28px 0;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.cpub-card-header-icon {
+  width: 30px;
+  height: 30px;
+  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: 13px;
+  flex-shrink: 0;
+}
+
+.cpub-card-header-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.cpub-card-header-label span {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-left: 4px;
+}
+
+.cpub-slider-value-display {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--accent);
+  margin-bottom: 14px;
+  letter-spacing: 0.04em;
+}
+
+.cpub-slider-track-wrap {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.cpub-slider-fill-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 6px;
+  background: var(--accent);
+  transform: translateY(-50%);
+  pointer-events: none;
+  transition: width 0.05s;
+}
+
+.cpub-slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+
+.cpub-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--accent);
+  border: var(--border-width-default) solid var(--border);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-slider-input::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--accent);
+  border: var(--border-width-default) solid var(--border);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-slider-range-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.cpub-slider-range-labels span {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-slider-output {
+  margin-top: 16px;
+  padding: 12px 14px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+  min-height: 42px;
+}
+
+.cpub-slider-output.state-slow,
+.cpub-slider-output.state-low {
+  background: var(--yellow-bg);
+  border: var(--border-width-default) solid var(--yellow-border);
+  color: var(--yellow);
+}
+
+.cpub-slider-output.state-ok,
+.cpub-slider-output.state-good {
+  background: var(--green-bg);
+  border: var(--border-width-default) solid var(--green-border);
+  color: var(--green);
+}
+
+.cpub-slider-output.state-high,
+.cpub-slider-output.state-danger {
+  background: var(--red-bg);
+  border: var(--border-width-default) solid var(--red-border);
+  color: var(--red);
+}
+
+.cpub-slider-output i { font-size: 13px; flex-shrink: 0; }
+.cpub-slider-output-text { line-height: 1.4; }
+</style>

package/components/blocks/BlockTextView.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { sanitizeBlockHtml } from '../../composables/useSanitize';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const html = computed(() => sanitizeBlockHtml((props.content.html as string) || ''));
+</script>
+
+<template>
+  <div class="cpub-block-text" v-html="html" />
+</template>
+
+<style scoped>
+.cpub-block-text {
+  font-size: 15px;
+  line-height: 1.75;
+  color: var(--text-dim);
+}
+
+.cpub-block-text :deep(p) { margin-bottom: 14px; }
+.cpub-block-text :deep(p:last-child) { margin-bottom: 0; }
+.cpub-block-text :deep(strong) { color: var(--text); font-weight: 600; }
+.cpub-block-text :deep(em) { font-style: italic; }
+.cpub-block-text :deep(a) { color: var(--accent); text-decoration: none; }
+.cpub-block-text :deep(a:hover) { text-decoration: underline; }
+.cpub-block-text :deep(code) {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--teal);
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 1px 6px;
+}
+.cpub-block-text :deep(ul),
+.cpub-block-text :deep(ol) {
+  margin: 0 0 14px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.cpub-block-text :deep(li) { color: var(--text-dim); }
+</style>

package/components/blocks/BlockToolListView.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Tool {
+  name: string;
+  url?: string;
+  required?: boolean;
+  notes?: string;
+}
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const tools = computed<Tool[]>(() => {
+  const raw = props.content.tools;
+  if (!Array.isArray(raw)) return [];
+  return raw as Tool[];
+});
+</script>
+
+<template>
+  <div v-if="tools.length > 0" class="cpub-block-tools">
+    <div class="cpub-tools-header">
+      <i class="fa-solid fa-wrench cpub-tools-icon"></i>
+      <span class="cpub-tools-title">Tools Required</span>
+      <span class="cpub-tools-count">{{ tools.length }}</span>
+    </div>
+    <div class="cpub-tools-list">
+      <div v-for="(tool, i) in tools" :key="i" class="cpub-tool-item">
+        <i class="fa-solid fa-wrench cpub-tool-bullet"></i>
+        <span class="cpub-tool-name">
+          <a v-if="tool.url" :href="tool.url" target="_blank" rel="noopener">{{ tool.name }}</a>
+          <template v-else>{{ tool.name }}</template>
+        </span>
+        <span v-if="tool.notes" class="cpub-tool-notes">{{ tool.notes }}</span>
+        <span v-if="tool.required === false" class="cpub-tool-optional">optional</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-tools {
+  border: var(--border-width-default) solid var(--border);
+  margin: 20px 0;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-tools-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-tools-icon { font-size: 12px; color: var(--accent); }
+.cpub-tools-title { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; }
+.cpub-tools-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+
+.cpub-tools-list { padding: 8px 14px; }
+
+.cpub-tool-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  font-size: 13px;
+}
+
+.cpub-tool-item:last-child { border-bottom: none; }
+
+.cpub-tool-bullet { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
+.cpub-tool-name { font-weight: 500; color: var(--text); }
+.cpub-tool-name a { color: var(--accent); text-decoration: none; }
+.cpub-tool-name a:hover { text-decoration: underline; }
+.cpub-tool-notes { font-size: 11px; color: var(--text-faint); margin-left: auto; }
+
+.cpub-tool-optional {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-faint);
+  border: var(--border-width-default) solid var(--border2);
+  padding: 1px 5px;
+  text-transform: uppercase;
+}
+</style>