@edgedev/create-edge-app 1.1.23 → 1.1.26

package/edge/components/cms/init_blocks/property_carousel.html

@@ -0,0 +1,59 @@
+<div
+  data-carousel
+  class="relative overflow-hidden"
+  data-carousel-autoplay
+  data-carousel-interval="4000"
+  data-carousel-loop
+  data-carousel-slides-to-scroll="1"
+  data-carousel-slides-to-scroll-lg="4"
+>
+  <div data-carousel-track class="flex">
+    {{{#array {"field":"List","schema":{"listing_price":"money","square_feet":"number","acres":"number"},"api":"https://api.clearwaterproperties.com/api/front/properties","apiField":"data","apiQuery":"?limit=20&filter_scope[agent][]=mt_nmar-mt.545000478","queryOptions":[{"field":"sort","optionsKey":"label","optionsValue":"value","options":[{"label":"Highest Price","value":"listing_price"},{"label":"Lowest Price","value":"-listing_price"},{"label":"Newest","value":"-list_date"}]},{"field":"filter_scope[agent][]","title":"Agent","optionsKey":"name","optionsValue":"mls.primary","options":"users"}],"limit":10,"value":[]}}}}
+      <div class="shrink-0 min-w-0 flex-[0_0_100%] lg:flex-[0_0_25%] p-4">
+          <div class="{{loading}}">
+            <div class="block bg-white shadow-md rounded-lg overflow-hidden animate-pulse">
+              <div class="relative w-full h-64 bg-gray-300">
+                <div class="absolute top-2 left-2 w-16 h-5 bg-gray-300 rounded"></div>
+                <div class="absolute bottom-2 right-2 w-20 h-5 bg-gray-300 rounded"></div>
+              </div>
+              <div class="p-4 space-y-3">
+                <div class="w-32 h-6 bg-gray-300 rounded"></div>
+                <div class="w-48 h-4 bg-gray-200 rounded"></div>
+                <div class="flex gap-4 mt-2">
+                  <div class="w-12 h-4 bg-gray-200 rounded"></div>
+                  <div class="w-12 h-4 bg-gray-200 rounded"></div>
+                  <div class="w-16 h-4 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <a class="block bg-white shadow-md rounded-lg overflow-hidden {{loaded}}">
+            <div class="relative w-full h-64 bg-gray-200 bg-[url('/images/placeholder.jpg')] bg-cover bg-center">
+              <img src="{{item.thumbnail_url}}" alt="For Sale" loading="lazy" class="w-full h-full object-cover">
+              <div class="absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-xs">{{item.listing_status}}</div>
+              <div class="absolute bottom-2 right-2 bg-white/80 text-gray-800 px-2 py-1 rounded text-xs">MLS® {{item.display_mlsnumber}}</div>
+            </div>
+
+            <div class="p-4">
+              <h4 class="text-xl font-bold text-gray-800">{{item.listing_price}}</h4>
+              <div class="text-gray-600 mt-1 truncate">{{item.display_address}}</div>
+              <div class="flex gap-4 mt-2 text-sm text-gray-700">
+                {{{#if {"cond": "item.total_bedrooms > 0"}}}}<span>{{item.total_bedrooms}} Beds</span>{{{/if}}}
+                {{{#if {"cond": "item.total_bathrooms > 0"}}}}<span>{{item.total_bathrooms}} Baths</span>{{{/if}}}
+                {{{#if {"cond": "item.property_type == 'ranch'"}}}}<span>{{item.acres}} Acres</span>
+                {{{#else}}}{{{#if {"cond": "item.square_feet > 0"}}}}<span>{{item.square_feet}} Sq.Ft.</span>{{{/if}}}{{{/else}}}
+              </div>
+            </div>
+          </a>
+      </div>
+    {{{/array}}}
+  </div>
+
+  <button type="button" data-carousel-prev
+    class="absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/60 text-white rounded-full">‹</button>
+  <button type="button" data-carousel-next
+    class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/60 text-white rounded-full">›</button>
+
+  <div data-carousel-dots class="mt-3 flex justify-center gap-2"></div>
+</div>

package/edge/components/cms/init_blocks/property_detail.html

@@ -0,0 +1,112 @@
+<section
+  class="relative cms-block cms-block-property-detail rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
+  data-block-type="property-detail"
+>
+  <!-- OVERLAY: Marks this entire block as a placeholder -->
+  <div
+    class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3"
+  >
+    <div
+      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
+    >
+      Property Detail Placeholder
+    </div>
+  </div>
+
+  <div class="mx-auto max-w-6xl pt-6">
+    <!-- Top label skeletons -->
+    <div class="mb-4 flex items-center justify-between gap-3">
+      <div class="h-4 w-40 rounded bg-slate-200"></div>
+      <div class="h-4 w-24 rounded bg-slate-200"></div>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+      <!-- LEFT COLUMN -->
+      <div class="space-y-5">
+        <!-- Hero image -->
+        <div class="overflow-hidden rounded-xl bg-slate-200">
+          <div class="relative h-64 w-full sm:h-80">
+            <div class="absolute left-3 top-3 h-6 w-20 rounded bg-slate-300"></div>
+            <div class="absolute bottom-3 left-3 h-6 w-32 rounded bg-slate-300"></div>
+          </div>
+        </div>
+
+        <!-- Price + address -->
+        <div class="space-y-2">
+          <div class="h-7 w-40 rounded bg-slate-300"></div>
+          <div class="h-4 w-64 rounded bg-slate-200"></div>
+        </div>
+
+        <!-- Stats -->
+        <div class="flex flex-wrap gap-4">
+          <div class="h-4 w-20 rounded bg-slate-200"></div>
+          <div class="h-4 w-20 rounded bg-slate-200"></div>
+          <div class="h-4 w-24 rounded bg-slate-200"></div>
+          <div class="h-4 w-20 rounded bg-slate-200"></div>
+        </div>
+
+        <!-- Description -->
+        <div class="space-y-2">
+          <div class="h-4 w-full rounded bg-slate-200"></div>
+          <div class="h-4 w-[90%] rounded bg-slate-200"></div>
+          <div class="h-4 w-[80%] rounded bg-slate-200"></div>
+          <div class="h-4 w-[70%] rounded bg-slate-200"></div>
+        </div>
+
+        <!-- Features / extras -->
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="space-y-2">
+            <div class="h-4 w-32 rounded bg-slate-200"></div>
+            <div class="h-3 w-[80%] rounded bg-slate-100"></div>
+            <div class="h-3 w-[70%] rounded bg-slate-100"></div>
+            <div class="h-3 w-[60%] rounded bg-slate-100"></div>
+          </div>
+          <div class="space-y-2">
+            <div class="h-4 w-28 rounded bg-slate-200"></div>
+            <div class="h-3 w-[75%] rounded bg-slate-100"></div>
+            <div class="h-3 w-[65%] rounded bg-slate-100"></div>
+            <div class="h-3 w-[55%] rounded bg-slate-100"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- RIGHT COLUMN — contact form style -->
+      <aside class="flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
+        <div class="space-y-1">
+          <div class="h-4 w-40 rounded bg-slate-200"></div>
+          <div class="h-3 w-28 rounded bg-slate-100"></div>
+        </div>
+
+        <div class="space-y-3">
+          <div class="space-y-1">
+            <div class="h-3 w-12 rounded bg-slate-200"></div>
+            <div class="h-9 w-full rounded-lg bg-slate-100"></div>
+          </div>
+
+          <div class="space-y-1">
+            <div class="h-3 w-10 rounded bg-slate-200"></div>
+            <div class="h-9 w-full rounded-lg bg-slate-100"></div>
+          </div>
+
+          <div class="space-y-1">
+            <div class="h-3 w-12 rounded bg-slate-200"></div>
+            <div class="h-9 w-full rounded-lg bg-slate-100"></div>
+          </div>
+
+          <div class="space-y-1">
+            <div class="h-3 w-16 rounded bg-slate-200"></div>
+            <div class="h-20 w-full rounded-lg bg-slate-100"></div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="mt-2 w-full rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60"
+          disabled
+        >
+          Contact About This Property (Placeholder)
+        </button>
+      </aside>
+    </div>
+  </div>
+</section>

package/edge/components/cms/init_blocks/property_detail_header.html

@@ -0,0 +1,34 @@
+<section
+  class="relative h-[50dvh] min-h-[260px] w-full bg-cover bg-center rounded-2xl border border-dashed border-slate-300"
+  data-block-type="property-detail-page-header"
+  style="background-image: url('{{{#image {"field":"backgroundImage","value":"https://www.clearwaterproperties.com/image/static/hp-recreational.jpg","tags":["Backgrounds"]}}}}')"
+>
+  <!-- Full placeholder overlay badge -->
+  <div class="pointer-events-none absolute inset-x-0 top-3 z-30 flex justify-center">
+    <div
+      class="rounded-full border border-white/60 bg-white/90 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-700 shadow-sm"
+    >
+      Property Detail Header Placeholder
+    </div>
+  </div>
+
+  <!-- Dark overlay -->
+  <div class="absolute inset-0 bg-black/40 z-10"></div>
+
+  <!-- Centered content -->
+  <div class="relative z-20 flex h-full items-center justify-center px-6 text-center text-white">
+    <div>
+      <!-- Address placeholder -->
+      <div class="mx-auto h-7 w-72 rounded bg-white/60"></div>
+
+      <!-- Subheader placeholder -->
+      <div class="mx-auto mt-4 h-4 w-52 rounded bg-white/40"></div>
+
+      <!-- Optional CTA placeholder -->
+      <div class="mx-auto mt-8 h-10 w-40 rounded border border-white/40 bg-white/20"></div>
+    </div>
+  </div>
+
+  <!-- Vignette (matches your original aesthetic) -->
+  <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/30 z-20"></div>
+</section>

package/edge/components/cms/init_blocks/property_results.html

@@ -0,0 +1,137 @@
+<section
+  class="relative cms-block cms-block-property-results rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
+  data-block-type="property-search-results"
+>
+  <!-- Overlay label -->
+  <div
+    class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3"
+  >
+    <div
+      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
+    >
+      Property Results Placeholder
+    </div>
+  </div>
+
+  <!-- Optional top skeleton bar -->
+  <div class="mb-4 flex flex-wrap items-center justify-between gap-3 pt-6">
+    <div class="h-4 w-32 rounded bg-slate-200"></div>
+    <div class="h-4 w-40 rounded bg-slate-200"></div>
+  </div>
+
+  <!-- 6-up grid -->
+  <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <!-- Repeat this card x6 -->
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-32 rounded bg-gray-300"></div>
+        <div class="h-4 w-48 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-16 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-28 rounded bg-gray-300"></div>
+        <div class="h-4 w-40 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-10 rounded bg-gray-200"></div>
+          <div class="h-4 w-14 rounded bg-gray-200"></div>
+          <div class="h-4 w-16 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-36 rounded bg-gray-300"></div>
+        <div class="h-4 w-44 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-20 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-32 rounded bg-gray-300"></div>
+        <div class="h-4 w-48 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-16 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-28 rounded bg-gray-300"></div>
+        <div class="h-4 w-40 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-10 rounded bg-gray-200"></div>
+          <div class="h-4 w-14 rounded bg-gray-200"></div>
+          <div class="h-4 w-16 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div class="block overflow-hidden rounded-lg bg-white shadow-md animate-pulse">
+      <div class="relative h-52 w-full bg-gray-200">
+        <div class="absolute left-2 top-2 h-5 w-16 rounded bg-gray-300"></div>
+        <div class="absolute bottom-2 right-2 h-5 w-20 rounded bg-gray-300"></div>
+      </div>
+
+      <div class="space-y-3 p-4">
+        <div class="h-6 w-36 rounded bg-gray-300"></div>
+        <div class="h-4 w-44 rounded bg-gray-200"></div>
+        <div class="mt-2 flex gap-4">
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-12 rounded bg-gray-200"></div>
+          <div class="h-4 w-20 rounded bg-gray-200"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <span class="sr-only">
+    Property search results placeholder grid (6 cards).
+  </span>
+</section>

package/edge/components/cms/init_blocks/property_search.html

@@ -0,0 +1,75 @@
+<div
+  class="relative cms-block cms-block-property-search-toolbar"
+  data-block-type="property-search-toolbar"
+>
+  <!-- Overlay -->
+  <div
+    class="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-white/65"
+  >
+    <div
+      class="rounded-full border border-slate-300 bg-white px-5 py-1.5 text-xs font-semibold tracking-wide text-slate-600 shadow-sm uppercase"
+    >
+      Property Search Placeholder
+    </div>
+  </div>
+
+  <!-- Toolbar -->
+  <div
+    class="flex flex-wrap items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
+  >
+    <!-- Location / Keyword -->
+    <div
+      class="flex min-w-[220px] flex-1 items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
+    >
+      <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        Location / Keyword
+      </span>
+    </div>
+
+    <!-- Price -->
+    <div
+      class="flex min-w-[150px] flex-none items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
+    >
+      <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        Price
+      </span>
+    </div>
+
+    <!-- Beds -->
+    <div
+      class="flex min-w-[110px] flex-none items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
+    >
+      <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        Beds
+      </span>
+    </div>
+
+    <!-- Baths -->
+    <div
+      class="flex min-w-[110px] flex-none items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
+    >
+      <span class="text-[11px] font-medium uppercase tracking-wide text-slate-400">
+        Baths
+      </span>
+    </div>
+
+    <!-- More Filters -->
+    <button
+      type="button"
+      class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-medium text-slate-600"
+      disabled
+    >
+      <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
+      <span class="uppercase tracking-wide">More Filters</span>
+    </button>
+
+    <!-- Search Button -->
+    <button
+      type="button"
+      class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm"
+      disabled
+    >
+      Search
+    </button>
+  </div>
+</div>

package/edge/components/cms/init_blocks/simple_array.html

@@ -0,0 +1,7 @@
+<div class="p-1 w-full bg-red-200">
+    <ul class="list-inside">
+    {{{#array {"field":"listThing", value: [] }}}}
+        <li class="list-disc">{{item}}</li>
+    {{{/array}}}
+    </ul>
+</div>

package/edge/components/cms/mediaCard.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ImagePlus, Loader2, Square, SquareCheckBig, Trash } from 'lucide-vue-next'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  selectMode: {
+    type: Boolean,
+    default: false,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+})
+const emits = defineEmits(['select', 'delete'])
+
+const getThumbnail = (file) => {
+  const images = file.cloudflareImageVariants
+  if (images) {
+    for (const img of images) {
+      if (img.endsWith('thumbnail')) {
+        return img
+      }
+    }
+  }
+  return null
+}
+
+const state = reactive({
+  tags: [],
+})
+
+const timeAgo = (timestamp) => {
+  if (!timestamp)
+    return ''
+
+  const now = Date.now()
+  const difference = now - timestamp
+  const seconds = Math.floor(difference / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0)
+    return `${days} day${days > 1 ? 's' : ''} ago`
+  if (hours > 0)
+    return `${hours} hour${hours > 1 ? 's' : ''} ago`
+  if (minutes > 0)
+    return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+  return `${seconds} second${seconds > 1 ? 's' : ''} ago`
+}
+</script>
+
+<template>
+  <Card
+    class="w-full group overflow-hidden rounded-2xl border bg-card hover:shadow-md hover:border-muted-foreground/20 transition-all"
+  >
+    <div class="relative w-full h-[200px] bg-muted">
+      <div class="z-10 absolute w-full flex inset-0 bg-black/10 dark:bg-black/30 justify-between items-start p-2">
+        <edge-shad-button
+          v-if="!props.selectMode"
+          size="icon"
+          class="bg-primary/80 text-primary-foreground hover:bg-primary shadow-sm"
+          @click.stop="emits('select', !props.selected, item.docId)"
+        >
+          <Square v-if="!props.selected" class="!w-5 !h-5" />
+          <SquareCheckBig v-else class="!w-5 !h-5" />
+        </edge-shad-button>
+        <div v-else class="w-5 h-5" />
+        <edge-shad-button
+          v-if="props.canDelete"
+          size="icon"
+          class="bg-destructive/80 text-destructive-foreground hover:bg-destructive h-9 w-9 sm:h-10 sm:w-10 rounded-xl border border-destructive/40 shadow-sm"
+          @click.stop="emits('delete', item.docId)"
+        >
+          <Trash class="!h-5 !w-5" />
+        </edge-shad-button>
+      </div>
+      <Loader2
+        v-if="!edgeGlobal.getImage(item, 'thumbnail')"
+        class="absolute inset-0 m-auto animate-spin h-6 w-6 text-muted-foreground"
+      />
+      <img
+        v-else
+        :src="edgeGlobal.getImage(item, 'thumbnail')"
+        alt=""
+        class="absolute inset-0 h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+      >
+    </div>
+
+    <!-- Main Content -->
+    <CardContent class="p-3 sm:p-4">
+      <div class="min-w-0 text-left">
+        <div class="flex items-center gap-1.5 text-xs sm:text-sm text-muted-foreground font-light italic">
+          <ImagePlus class="w-4 h-4 shrink-0" />
+          <span class="truncate">Uploaded {{ timeAgo(item.uploadTime) }}</span>
+        </div>
+
+        <div
+          class="mt-1.5 sm:mt-2 text-base sm:text-sm font-semibold tracking-wide uppercase text-foreground line-clamp-1"
+          :title="item.name"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </CardContent>
+
+    <!-- Footer with actions -->
+  </Card>
+</template>