wip: editor improvements

Author: arpowers

@fiction/plugins/plugin-ai/systemMessage.ts

@@ -29,11 +29,11 @@ export class ContentCommand {
     const messages: CommandMessage[] = [
       {
         role: 'system',
-        content: `<system_message>follow these orders EXACTLY and return JSON based on inputs provided: ${formatGuidelines.guidelines}</system_message>`,
+        content: `<system_message>follow these orders EXACTLY and return ONLY JSON based on inputs provided: ${formatGuidelines.guidelines}</system_message>`,
       },
       {
         role: 'system',
-        content: `<output_format>Generate JSON content that conforms to the following schema: ${JSON.stringify(formatGuidelines.outputFormat)}. Ensure the response is structured according to this schema.</output_format>`,
+        content: `<output_format>Generate ONLY JSON that conforms to the following schema: ${JSON.stringify(formatGuidelines.outputFormat)}. Ensure the response is structured according to this schema.</output_format>`,
       },
     ]
 
@@ -110,46 +110,32 @@ export class ContentCommand {
         suggestion1: z.string().min(3).max(100),
         suggestion2: z.string().min(3).max(100),
       })),
-      guidelines: `
-      <role>
-      You are an expert writing assistant, providing precise and contextually appropriate autocomplete suggestions.
-      </role>
-
-      <output_format>
-      - Generate ONLY JSON content strictly adhering to the provided schema. Nothing besides JSON should be returned.
-      - Ensure grammatical correctness and proper punctuation. Based on previous text.
-      - Vary suggestion length based on context (typically 3-10 words).
-      - For uncertain subjects, prefer shorter responses (3-5 words).
-      - For more certain subjects, provide longer, more detailed suggestions (6-10 words).
-      - If a space is needed after a suggestion, include it in the suggestion.
-      </output_format>
-
-      <content_guidelines>
-      1. Style and Tone:
-         - Accurately mimic the user's writing style, voice, and tone.
-         - Maintain consistency across suggestions.
-
-      2. Context and Relevance:
-         - Provide suggestions that flow naturally from the given input.
-         - Ensure high relevance to the topic and context.
-         - Incorporate key ideas from the objectives when appropriate.
-
-      3. Creativity and Engagement:
-         - Offer unique perspectives to overcome potential writer's block.
-         - Use vivid language to evoke emotions and visualization.
-         - Suggest thought-provoking continuations when appropriate.
-
-      4. Precision and Conciseness:
-         - Prioritize clarity and conciseness.
-         - Avoid clichés, redundancy, and overused phrases.
-         - Use active voice and strong verbs.
-
-      5. Adaptability:
-         - Adjust suggestions based on the content type (e.g., formal report, creative writing, technical documentation).
-         - Provide a mix of continuation types (e.g., elaboration, transition, conclusion) as appropriate.
-
-      ${this.getObjectivesInstruction(objectives)}
-      </content_guidelines>`,
+      guidelines: `<role>Expert writing assistant generating brilliant, contextual autocomplete suggestions.</role>
+<output>
+- JSON content adhering to schema
+- Flawless grammar and punctuation, write or complete full sentences.
+- Context-based length (3-20 words)
+- Include trailing space if needed
+- Avoid repeating surrounding text
+</output>
+<guidelines>
+- Elevate style while maintaining voice
+- Ensure focused relevance and coherence
+- Seamlessly integrate objectives
+- Offer thought-provoking angles
+- Craft vivid, emotive language
+- Prioritize clarity and impact
+- Champion originality; avoid clichés
+- Use powerful verbs and active voice
+- Adapt tone to content type
+- Provide diverse, intelligent continuations
+- Address potential counterarguments
+- Inject expert insights and cutting-edge ideas
+- Balance creativity with accuracy
+- Suggest compelling metaphors/analogies
+- Propose data-driven points when relevant
+</guidelines>
+<objectives>${this.getObjectivesInstruction(objectives)}</objectives>`,
     }
   }
 

@fiction/posts/el/ElPostEditor.vue

@@ -44,6 +44,7 @@ defineProps({
       <ProseEditor
         :model-value="post.content.value"
         class="font-serif"
+        :supplemental="{ title: post.title.value, subTitle: post.subTitle.value }"
         @update:model-value="post?.update({ content: $event as string }, { caller: 'proseEditor:content' })"
       />
       <div v-if="$slots.footer" class="not-prose">

@fiction/site/utils/test/site.unit.test.ts

@@ -223,7 +223,7 @@ describe('updateSite / updatePages', async () => {
 
     await updateSite({ caller: 'testUpdateSite', site, newConfig: { pages: [{ templateId: 'wrap', cardId: 'card1' }] } })
 
-    expect(site.pages.value[0].cardId).toBe('card1')
+    expect(site.pages.value[0]?.cardId).toBe('card1')
   })
 
   it('merge updates editor', async () => {
@@ -259,10 +259,10 @@ describe('updateSite / updatePages', async () => {
     `)
     expect(userSitePages.length, 'set pages should be 1').toBe(1)
     expect(userSitePages.length).toBe(1) // Ensure no new pages were added
-    expect(userSitePages[0].cardId).toBe('card1')
-    expect(userSitePages[0].slug.value).toBe(undefined)
-    expect(userSitePages[0].title.value).toBe('Updated Title')
-    expect(userSitePages[0].userConfig.value.otherProp).toBe('Updated')
+    expect(userSitePages[0]?.cardId).toBe('card1')
+    expect(userSitePages[0]?.slug.value).toBe(undefined)
+    expect(userSitePages[0]?.title.value).toBe('Updated Title')
+    expect(userSitePages[0]?.userConfig.value.otherProp).toBe('Updated')
   })
 })
 

@fiction/ui/anim/gradientUtil.ts

@@ -15,9 +15,9 @@ export function hexToRgb(hex: string): { r: number, g: number, b: number } | nul
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
     ? {
-        r: Number.parseInt(result[1], 16),
-        g: Number.parseInt(result[2], 16),
-        b: Number.parseInt(result[3], 16),
+        r: Number.parseInt(result[1] ?? '0', 16),
+        g: Number.parseInt(result[2] ?? '0', 16),
+        b: Number.parseInt(result[3] ?? '0', 16),
       }
     : null
 }
@@ -81,8 +81,9 @@ export class SimplexNoise {
     this.perm = new Uint8Array(512)
     this.permMod12 = new Uint8Array(512)
     for (let i = 0; i < 512; i++) {
-      this.perm[i] = this.p[i & 255]
-      this.permMod12[i] = this.perm[i] % 12
+      const o = this.p[i & 255] ?? 0
+      this.perm[i] = 0
+      this.permMod12[i] = o % 12
     }
 
     this.grad3 = new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1])
@@ -93,7 +94,6 @@ export class SimplexNoise {
     const F3 = 1 / 3
     const G3 = 1 / 6
 
-    let n0: number, n1: number, n2: number, n3: number
     const s: number = (xin + yin + zin) * F3
     const i: number = Math.floor(xin + s)
     const j: number = Math.floor(yin + s)
@@ -110,54 +110,24 @@ export class SimplexNoise {
     let i2: number, j2: number, k2: number
     if (x0 >= y0) {
       if (y0 >= z0) {
-        i1 = 1
-        j1 = 0
-        k1 = 0
-        i2 = 1
-        j2 = 1
-        k2 = 0
+        [i1, j1, k1, i2, j2, k2] = [1, 0, 0, 1, 1, 0]
       }
       else if (x0 >= z0) {
-        i1 = 1
-        j1 = 0
-        k1 = 0
-        i2 = 1
-        j2 = 0
-        k2 = 1
+        [i1, j1, k1, i2, j2, k2] = [1, 0, 0, 1, 0, 1]
       }
       else {
-        i1 = 0
-        j1 = 0
-        k1 = 1
-        i2 = 1
-        j2 = 0
-        k2 = 1
+        [i1, j1, k1, i2, j2, k2] = [0, 0, 1, 1, 0, 1]
       }
     }
     else {
       if (y0 < z0) {
-        i1 = 0
-        j1 = 0
-        k1 = 1
-        i2 = 0
-        j2 = 1
-        k2 = 1
+        [i1, j1, k1, i2, j2, k2] = [0, 0, 1, 0, 1, 1]
       }
       else if (x0 < z0) {
-        i1 = 0
-        j1 = 1
-        k1 = 0
-        i2 = 0
-        j2 = 1
-        k2 = 1
+        [i1, j1, k1, i2, j2, k2] = [0, 1, 0, 0, 1, 1]
       }
       else {
-        i1 = 0
-        j1 = 1
-        k1 = 0
-        i2 = 1
-        j2 = 1
-        k2 = 0
+        [i1, j1, k1, i2, j2, k2] = [0, 1, 0, 1, 1, 0]
       }
     }
 
@@ -175,45 +145,33 @@ export class SimplexNoise {
     const jj: number = j & 255
     const kk: number = k & 255
 
-    let t0: number = 0.6 - x0 * x0 - y0 * y0 - z0 * z0
-    if (t0 < 0) {
-      n0 = 0
-    }
-    else {
-      const gi0: number = permMod12[ii + perm[jj + perm[kk]]] * 3
-      t0 *= t0
-      n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0)
+    const calculateNoise = (t: number, gi: number, x: number, y: number, z: number): number => {
+      if (t < 0)
+        return 0
+      t *= t
+      return t * t * ((grad3[gi] ?? 0) * x + (grad3[gi + 1] ?? 0) * y + (grad3[gi + 2] ?? 0) * z)
     }
 
-    let t1: number = 0.6 - x1 * x1 - y1 * y1 - z1 * z1
-    if (t1 < 0) {
-      n1 = 0
-    }
-    else {
-      const gi1: number = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3
-      t1 *= t1
-      n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1)
+    const getGi = (i: number, j: number, k: number): number => {
+      const index = ii + i + (perm[jj + j + (perm[kk + k] ?? 0)] ?? 0)
+      return (permMod12[index] ?? 0) * 3
     }
 
-    let t2: number = 0.6 - x2 * x2 - y2 * y2 - z2 * z2
-    if (t2 < 0) {
-      n2 = 0
-    }
-    else {
-      const gi2: number = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3
-      t2 *= t2
-      n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2)
-    }
+    const t0: number = 0.6 - x0 * x0 - y0 * y0 - z0 * z0
+    const gi0: number = getGi(0, 0, 0)
+    const n0 = calculateNoise(t0, gi0, x0, y0, z0)
 
-    let t3: number = 0.6 - x3 * x3 - y3 * y3 - z3 * z3
-    if (t3 < 0) {
-      n3 = 0
-    }
-    else {
-      const gi3: number = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3
-      t3 *= t3
-      n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3)
-    }
+    const t1: number = 0.6 - x1 * x1 - y1 * y1 - z1 * z1
+    const gi1: number = getGi(i1, j1, k1)
+    const n1 = calculateNoise(t1, gi1, x1, y1, z1)
+
+    const t2: number = 0.6 - x2 * x2 - y2 * y2 - z2 * z2
+    const gi2: number = getGi(i2, j2, k2)
+    const n2 = calculateNoise(t2, gi2, x2, y2, z2)
+
+    const t3: number = 0.6 - x3 * x3 - y3 * y3 - z3 * z3
+    const gi3: number = getGi(1, 1, 1)
+    const n3 = calculateNoise(t3, gi3, x3, y3, z3)
 
     return 32 * (n0 + n1 + n2 + n3)
   }
@@ -225,8 +183,8 @@ export class SimplexNoise {
     }
     for (let i = 0; i < 255; i++) {
       const r: number = i + ~~(random() * (256 - i))
-      const aux: number = p[i]
-      p[i] = p[r]
+      const aux: number = p[i] ?? 0
+      p[i] = p[r] ?? 0
       p[r] = aux
     }
     return p

@fiction/ui/anim/index.ts

@@ -112,15 +112,15 @@ export async function useElementVisible(args: { caller: string, selector: string
   let isVisible = false
   const observer = new IntersectionObserver((entries, observer) => {
     const [entry] = entries
-    if (entry.isIntersecting && !isVisible) {
+    if (entry?.isIntersecting && !isVisible) {
       isVisible = true
       onVisible()
 
       if (!onHidden) {
         observer.disconnect()
       }
     }
-    else if (!entry.isIntersecting && isVisible) {
+    else if (!entry?.isIntersecting && isVisible) {
       isVisible = false
       if (onHidden) {
         onHidden()
@@ -212,7 +212,7 @@ export function animateNumber(element: HTMLElement, finalValue: number | string,
           round: 1,
           duration: 2000,
           update(anim) {
-            element.innerHTML = formatNumber(anim.animations[0].currentValue, format) as string
+            element.innerHTML = formatNumber(anim.animations[0]?.currentValue, format) as string
           },
         })
         observer.unobserve(element)

@fiction/ui/effect/EffectParallaxBackground.vue

@@ -44,7 +44,7 @@ let animationFrame: number | null = null
 
 function updateParallax(entries: IntersectionObserverEntry[]) {
   const [entry] = entries
-  if (entry.isIntersecting) {
+  if (entry?.isIntersecting) {
     animationFrame = requestAnimationFrame(animate)
   }
   else if (animationFrame) {

@fiction/ui/frame/elBrowserFrameUtil.ts

@@ -328,7 +328,7 @@ export class FrameNavigator extends FictionObject<FrameNavigatorSettings> {
       return
     }
 
-    const newPath = this.history[this.currentIndex]
+    const newPath = this.history[this.currentIndex] ?? '/'
     this.setNewPath({ fullPath: newPath, updateHistory: false })
   }
 

@fiction/ui/inputs/InputMediaUpload.vue

@@ -49,7 +49,7 @@ async function uploadFiles(files?: FileList | null) {
   uploading.value = true
   const file = files[0]
 
-  if (file.size > fileSize) {
+  if (file && file.size > fileSize) {
     log.warn('mediaUpload', 'File size exceeds limit')
     fictionEnv.events.emit('notify', {
       type: 'error',