@owdproject/nuxt-theme-paper 0.0.0-stage → 4.0.0-alpha.3

package/src/runtime/components/PaperWindowSnapHints.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import WindowSnapHintsBase from '@owdproject/nuxt/runtime/components/window/DesktopCoreWindowSnapHintsBase.vue'
+</script>
+
+<template>
+  <WindowSnapHintsBase />
+</template>

package/src/runtime/composables/usePaperAppearance.ts

@@ -0,0 +1,26 @@
+import {
+  DEFAULT_PAPER_APPEARANCE,
+  paperAppearanceId,
+  type PaperAppearance,
+} from '../utils/paperAppearance'
+
+/** Read/write Paper light/dark appearance (theme-local, not core store). */
+export function usePaperAppearance() {
+  function setAppearance(appearance: PaperAppearance) {
+    paperAppearanceId.value = appearance
+  }
+
+  function toggleAppearance() {
+    paperAppearanceId.value =
+      paperAppearanceId.value === 'dark'
+        ? 'light'
+        : 'dark'
+  }
+
+  return {
+    appearance: paperAppearanceId,
+    defaultAppearance: DEFAULT_PAPER_APPEARANCE,
+    setAppearance,
+    toggleAppearance,
+  }
+}

package/src/runtime/plugins/paper-appearance.client.ts

@@ -0,0 +1,23 @@
+import { watch } from 'vue'
+import {
+  DEFAULT_PAPER_APPEARANCE,
+  PAPER_APPEARANCE_STORAGE_KEY,
+  paperAppearanceId,
+  readPersistedAppearance,
+  syncHtmlAppearance,
+} from '../utils/paperAppearance'
+
+/**
+ * Paper light/dark: localStorage → shared ref → html[data-owd-appearance].
+ * Head bootstrap script prevents first-paint flash on reload.
+ */
+export default defineNuxtPlugin(() => {
+  paperAppearanceId.value =
+    readPersistedAppearance() ?? DEFAULT_PAPER_APPEARANCE
+  syncHtmlAppearance(paperAppearanceId.value)
+
+  watch(paperAppearanceId, (appearance) => {
+    localStorage.setItem(PAPER_APPEARANCE_STORAGE_KEY, appearance)
+    syncHtmlAppearance(appearance)
+  })
+})

package/src/runtime/utils/paperAppearance.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue'
+
+export type PaperAppearance = 'light' | 'dark'
+
+export const PAPER_APPEARANCE_STORAGE_KEY = 'owd-paper-appearance'
+
+export const DEFAULT_PAPER_APPEARANCE: PaperAppearance = 'light'
+
+/** Shared appearance state — hydrated and synced by `paper-appearance.client` plugin. */
+export const paperAppearanceId = ref<PaperAppearance>(DEFAULT_PAPER_APPEARANCE)
+
+export function isPaperAppearance(value: string): value is PaperAppearance {
+  return value === 'light' || value === 'dark'
+}
+
+export function readPersistedAppearance(): PaperAppearance | undefined {
+  if (typeof localStorage === 'undefined') return undefined
+
+  const stored = localStorage.getItem(PAPER_APPEARANCE_STORAGE_KEY)
+  if (stored && isPaperAppearance(stored)) return stored
+
+  return undefined
+}
+
+/** Inline bootstrap: set data-owd-appearance before CSS paints (no flash). */
+export const paperAppearanceBootstrapScript = `(function(){var el=document.documentElement,d=${JSON.stringify(DEFAULT_PAPER_APPEARANCE)};try{var s=localStorage.getItem(${JSON.stringify(PAPER_APPEARANCE_STORAGE_KEY)});if(s==="light"||s==="dark"){el.dataset.owdAppearance=s;return}}catch(e){}el.dataset.owdAppearance=d})();`
+
+export function syncHtmlAppearance(appearance: PaperAppearance) {
+  if (typeof document === 'undefined') return
+  document.documentElement.dataset.owdAppearance = appearance
+}