feat(prose): DLT-3245 new component (#1169)

Author: francisrupert

.claude/rules/vue-components.md

@@ -7,7 +7,7 @@ paths:
 
 ## API Style
 
-- **New components**: Composition API with `<script setup lang="ts">`. Use `defineProps`, `defineEmits`, `defineSlots`.
+- **New components**: Composition API with `<script setup lang="ts">`. Use `defineProps`, `defineEmits`, `defineSlots`. Always include `defineOptions({ name: 'DtComponentName' })` — without it, vue-docgen infers the name from the filename (lowercase, no prefix), breaking the combinator, component-documentation.json, and Vue devtools.
 - **Existing components**: Options API with `compatConfig: { MODE: 3 }`. Do NOT convert unless explicitly asked.
 
 ## Props

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less

@@ -509,6 +509,44 @@ a.header-anchor {
   }
 }
 
+code {
+  .d-docsite--paragraph &,
+  .d-docsite--unordered-list &,
+  .d-docsite--ordered-list &,
+  .d-docsite--list-element &,
+  .d-docsite--preview-header & {
+    font-size: 95%;
+  }
+}
+
+.d-docsite-article {
+    > table:not([class]) {
+    border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+    border-collapse: collapse;
+    margin: var(--dt-size-200) 0;
+    inline-size: 100%;
+
+    th {
+      font: var(--dt-text-label-sm);
+      color: var(--dt-color-foreground-secondary);
+    }
+
+    th, td {
+      text-align: start;
+      border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+      border-inline: 0;
+      padding: var(--dt-size-450);
+    }
+
+    code {
+      background-color: var(--dt-color-background-default);
+      padding: var(--dt-size-200);
+      font: var(--dt-text-code-xs);
+    }
+  }
+
+}
+
 .d-docsite--unordered-list,
 .d-docsite--list-element,
 .d-docsite--ordered-list {

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less

@@ -40,6 +40,14 @@ div[class*="language-"] {
   }
 }
 
+code:not(.d-code--md, .d-code--sm, .d-prose *) {
+	padding: var(--dt-size-200) var(--dt-size-300);
+	color: var(--dt-color-blue-800);
+	background-color: var(--dt-color-surface-info);
+	border-radius: var(--dt-size-100);
+	user-select: all;
+}
+
 code[class*="language-"],
 pre[class*="language-"] {
 	margin: 0;

apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue

@@ -15,7 +15,7 @@
           </h2>
         </div>
         <!-- eslint-disable-next-line vue/no-undef-components -->
-        <content />
+        <content class="d-docsite-article" />
       </article>
       <dt-stack
         direction="row"

apps/dialtone-documentation/docs/.vuepress/theme/components/PageToc.vue

@@ -1,6 +1,13 @@
 <template>
   <aside class="dialtone-toc d-of-auto d-py-800 d-ps-fixed d-d-none xl:d-d-block">
-    <dt-text as="h2" kind="headline" :size="100" strength="semibold" tone="secondary" class="d-tt-uppercase d-px-100 d-pbe-50">
+    <dt-text
+      as="h2"
+      kind="headline"
+      :size="100"
+      strength="semibold"
+      tone="secondary"
+      class="d-tt-uppercase d-px-100 d-pbe-50"
+    >
       On this page
     </dt-text>
     <nav>

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -413,6 +413,10 @@
                 "text": "Presence",
                 "link": "/components/presence.html"
               },
+              {
+                "text": "Prose",
+                "link": "/components/prose.html"
+              },
               {
                 "text": "Radio",
                 "link": "/components/radio.html"