rimecms 1.0.1 → 1.1.0

package/dist/fields/blocks/component/focus/RenderPlaceholder.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import { t__ } from '../../../../core/i18n/index.js';
-  import { ToyBrick } from '@lucide/svelte';
-  import type { Snippet } from 'svelte';
-  import type { LayerRow } from './focus.svelte.js';
-
-  type Props = { row: LayerRow; error?: unknown; children?: Snippet<[name?: string]> };
-  const { row, error, children }: Props = $props();
-
-  const Icon = $derived(row.config?.icon ?? ToyBrick);
-
-  $effect(() => {
-    if (error) console.error(`Render of block ${row.path} failed`, error);
-  });
-</script>
-
-<!-- A block without a render, or one whose render threw: its icon, its title, its nested lists. -->
-<div class="rz-render-placeholder" data-error={error ? '' : undefined}>
-  <p class="rz-render-placeholder__title">
-    <span class="rz-render-placeholder__icon"><Icon size={14} /></span>
-    <span>{row.title}</span>
-    {#if error}
-      <span class="rz-render-placeholder__error">{t__('fields.render_failed')}</span>
-    {/if}
-  </p>
-  {@render children?.()}
-</div>
-
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
-
-/* A well: an input, a track, a dropzone. Its edge shows on hover. */
-
-/* The hover tint, laid over the element's own fill. */
-
-/* The picked item of a segmented control. */
-
-/* The primary button's face: black on light, white on dark. */
-
-/* Keyboard focus on a button, a tab, a link. */
-
-/* A focused input: an accent edge and a soft halo. */
-
-/* An input with an error. */
-.rz-render-placeholder {
-    display: grid;
-    gap: var(--rz-size-3);
-    padding: var(--rz-size-3) var(--rz-size-4);
-    border: 1px dashed var(--rz-border-strong);
-    border-radius: var(--rz-radius-md);
-  }
-
-  .rz-render-placeholder__title {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
-    font-size: var(--rz-text-sm);
-    font-variation-settings: 'wght' 500;
-    font-weight: 500;
-  }
-
-  .rz-render-placeholder__icon {
-    display: grid;
-    place-items: center;
-    width: var(--rz-size-6);
-    height: var(--rz-size-6);
-    flex-shrink: 0;
-    border-radius: var(--rz-radius-sm);
-    background-color: var(--rz-bg-well);
-    color: var(--rz-fg-muted);
-  }
-
-  .rz-render-placeholder__error {
-    font-variation-settings: 'wght' 400;
-    font-weight: 400;
-    color: var(--rz-danger);
-  }
-</style>

package/dist/fields/blocks/component/focus/Stage.svelte

@@ -1,190 +0,0 @@
-<script lang="ts">
-  import { getFieldListAtPath } from '../../../../core/fields/util.js';
-  import { t__ } from '../../../../core/i18n/index.js';
-  import RenderFields from '../../../../panel/components/fields/RenderFields.svelte';
-  import { Button } from '../../../../panel/components/ui/button/index.js';
-  import { withBlockTypes } from '../../../../panel/context/blocks-ops.js';
-  import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
-  import { CopyPlus, ToyBrick, Trash2 } from '@lucide/svelte';
-  import { getBlocksFocusContext, type LayerRow } from './focus.svelte.js';
-  import StagePlaceholder from './StagePlaceholder.svelte';
-
-  type Props = { form: DocumentFormContext; onRemove: () => void };
-  const { form, onRemove }: Props = $props();
-
-  const focus = getBlocksFocusContext()!;
-  const current = $derived(focus.currentRow);
-  /** A block selected: that block alone. The root node: every block of the open list. */
-  const rows = $derived(current ? [current] : focus.path ? focus.rowsOf(focus.path) : []);
-
-  const fieldsOf = (row: LayerRow) =>
-    getFieldListAtPath(withBlockTypes(row.path, form.values), form.config.fields);
-</script>
-
-<div class="rz-stage" data-mode={current ? 'block' : 'all'}>
-  {#each rows as row (row.block.id)}
-    {@const Icon = row.config?.icon ?? ToyBrick}
-    {@const rendered = fieldsOf(row)}
-    <article class="rz-stage__card" data-block-path={row.path}>
-      <header class="rz-stage__header">
-        <button
-          type="button"
-          class="rz-stage__title"
-          onclick={() => focus.select(row.path)}
-          disabled={!!current}
-        >
-          <span class="rz-stage__icon"><Icon size={14} /></span>
-          <h3>{row.title}</h3>
-          <span class="rz-stage__path">{row.path}</span>
-        </button>
-        {#if current && !focus.locked}
-          <div class="rz-stage__actions">
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              icon={CopyPlus}
-              title={t__('common.duplicate')}
-              aria-label={t__('common.duplicate')}
-              onclick={focus.duplicateSelection}
-            />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              icon={Trash2}
-              title={t__('fields.delete_block')}
-              aria-label={t__('fields.delete_block')}
-              onclick={onRemove}
-            />
-          </div>
-        {/if}
-      </header>
-      <div class="rz-stage__fields">
-        <RenderFields fields={rendered.fields} path={rendered.path} {form} />
-      </div>
-    </article>
-  {:else}
-    <p class="rz-stage__empty">{t__('fields.no_blocks_yet')}</p>
-  {/each}
-  {#if !current && rows.length && !focus.locked}
-    <StagePlaceholder />
-  {/if}
-</div>
-
-<style>/* A level: its fill, a hairline, its shadow. raised, float. */
-
-/* A well: an input, a track, a dropzone. Its edge shows on hover. */
-
-/* The hover tint, laid over the element's own fill. */
-
-/* The picked item of a segmented control. */
-
-/* The primary button's face: black on light, white on dark. */
-
-/* Keyboard focus on a button, a tab, a link. */
-
-/* A focused input: an accent edge and a soft halo. */
-
-/* An input with an error. */
-.rz-stage {
-    display: grid;
-    align-content: start;
-    gap: var(--rz-size-6);
-    min-height: 100%;
-    padding-bottom: var(--rz-size-16);
-  }
-
-  .rz-stage[data-mode='all'] {
-    padding: var(--rz-size-6) var(--rz-size-6) var(--rz-size-16);
-  }
-
-  .rz-stage[data-mode='all'] .rz-stage__card {
-    background-color: var(--rz-bg-raised);
-    box-shadow:
-    0 0 0 1px var(--rz-border),
-    var(--rz-shadow-raised);
-    border-radius: var(--rz-radius-md);
-    overflow: hidden;
-  }
-
-  /* A block's head: its icon, its title, its path, and on the right what it can do. */
-  .rz-stage__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--rz-size-2);
-    height: calc(11.5 * var(--rz-unit));
-    padding-inline: var(--rz-size-3) var(--rz-size-1-5);
-    border-bottom: 1px solid var(--rz-border);
-    background-color: var(--rz-bg-raised);
-  }
-
-  /* Alone, the head stays on top of the fields, on the page's own fill. */
-  .rz-stage[data-mode='block'] .rz-stage__header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background-color: var(--rz-bg-page);
-  }
-
-  .rz-stage__title {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-2);
-    min-width: 0;
-    h3 {
-      font-variation-settings: 'wght' 500;
-      font-weight: 500;
-      font-size: var(--rz-text-md);
-      white-space: nowrap;
-    }
-    &:not(:disabled):hover h3 {
-      text-decoration: underline;
-    }
-  }
-
-  .rz-stage__icon {
-    display: grid;
-    place-items: center;
-    width: var(--rz-size-6);
-    height: var(--rz-size-6);
-    flex-shrink: 0;
-    border-radius: var(--rz-radius-sm);
-    background-color: var(--rz-bg-well);
-    color: var(--rz-fg-muted);
-  }
-
-  .rz-stage__path {
-    font-family: var(--rz-font-mono);
-    font-size: var(--rz-text-xs);
-    color: var(--rz-fg-subtle);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Ghost icon buttons, quiet until hovered. */
-  .rz-stage__actions {
-    --rz-button-ghost-fg: var(--rz-fg-muted);
-    display: flex;
-    gap: var(--rz-size-0-5);
-    flex-shrink: 0;
-    :global(.rz-button) {
-      width: var(--rz-size-7);
-      height: var(--rz-size-7);
-    }
-    :global(.rz-button:hover) {
-      color: var(--rz-fg);
-    }
-  }
-
-  .rz-stage__fields {
-    padding-block: var(--rz-size-6);
-  }
-
-  .rz-stage__empty {
-    padding: var(--rz-size-16) var(--rz-size-6);
-    text-align: center;
-    font-size: var(--rz-text-sm);
-    color: var(--rz-fg-subtle);
-  }
-</style>

package/dist/fields/blocks/component/focus/Stage.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { DocumentFormContext } from '../../../../panel/context/documentForm.svelte.js';
-type Props = {
-    form: DocumentFormContext;
-    onRemove: () => void;
-};
-declare const Stage: import("svelte").Component<Props, {}, "">;
-type Stage = ReturnType<typeof Stage>;
-export default Stage;